学习vue.js 第一天

最近听到很多人都在用Vue.js ,我也想凑凑热闹，来个入门啥的，要不以后人家说，啥都不知道，多low

看到官网是这样介绍Vue.js

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层。

在我第一天的学习后，我觉得它和angular.js 有点像，至于到底是不是这样还需要深入学习。

我的理解这个框架让我在前端数据显示方面很简单，不用再写一堆js “+=” 什么的，这只是我目前浅层的理解，更深的以后会学习再说。

下面是我今天学习的代码，里面有很多注释是我自己的理解，希望对有需要的人有帮助，不需要的人，自动略过，谢谢。

（一）

<!DOCTYPE>
<html>
<head><meta charset="utf-8"><title>vue01</title><script type="text/javascript" src="../vue.js"></script>
</head>
<body><!--声明式渲染 将数据渲染进DOM系统有一个特点 元素是响应式的  在浏览器控制台里改变 app.message的值 相应页面上的值也会改变--><div id="app">{{message}} <!-- 数据 --></div>
<script>var app = new Vue({el:"#app",//这个应该就是包含data数据的元素的class或者id，我是这么理解的
        data:{message:"Hello Vue!" // 渲染在页面上的数据
        }})
</script>
</body>
</html>

（二）

<body><!--条件判断指令--><div id ="app"><p v-if="seen">我在呢</p><p v-if="noseen">我在呢</p></div><!-- 条件循环指令 在控制台里输入 app1.items.push({text:"第四条"}) 页面会多加一条--><div id="app1"><ol><li v-for="item in items">{{item.text}}</li></ol></div>
<script>var app = new Vue({el:"#app",//这个应该就是包含data数据的元素的class或者id，我是这么理解的
        data:{seen:true, // 渲染在页面上的数据
            noseen:false}})var app1 = new Vue({el:"#app1",//这个应该就是包含data数据的元素的class或者id，我是这么理解的
        data:{items:[{text:"第一条"},{text:"第二条"},{text:"第三条"}]}})
</script>
</body>

（三）

<body><!--绑定事件 单击事件v-on:click--><div id ="app"><p v-on:mouseenter="change">{{message}}</p><button v-on:click="reverse">reverse</button></div><script>var app = new Vue({el:"#app",//这个应该就是包含data数据的元素的class或者id，我是这么理解的
        data:{message:'Hello Vue.js!'},methods:{ //方法
            reverse:function(){this.message = this.message.split("").reverse().join("")},change:function(){this.message = "你好吗？";}}})</script>
</body>

（四）

<body><!--双向数据绑定 用v-model 连接数据--><div id ="app"><p>{{message}}</p><input v-model="message"></div><script>var app = new Vue({el:"#app",//这个应该就是包含data数据的元素的class或者id，我是这么理解的
        data:{message:'Hello Vue.js!'},})</script></body>

转载于:https://www.cnblogs.com/wangwei-exits/p/6253370.html

学习vue.js 第一天相关推荐

eclipsevue代码怎么运行_[Java教程]使用eclipse初步学习vue.js操作
[Java教程]使用eclipse初步学习vue.js操作 0 2017-11-26 19:00:06 一.vue.js的初步认识 https://unpkg.com/vue ">vu ...
vue.js视频课程_在此免费课程中学习Vue.js！ ✨
vue.js视频课程 by ZAYDEK 由ZAYDEK 在此免费课程中学习Vue.js! ✨ (Learn Vue.js in this free course! ?✨) 让我们做点Vueseful ...
vue.js 天气插件_天气检查我的项目以学习Vue.js
vue.js 天气插件天气 (vue-weather) Weather checking me project for learning Vue.js. 天气检查我的项目以学习Vue.js. Vie ...
学习Vue.js入门，简单了解一下
Vue开发入门 1.1 Vue框架的优点 Vue是渐进式框架 , 出现在JavaScript之后,但因其易于使用.灵活.速度快,对JavaScript的主流地位有着很大的威胁. Vue 遵循渐进增 ...
学习Vue.js实战（一）
Vue.js是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. (所谓Progressive,就是可以一步一步的有阶段性的使用vue.js.其简单小巧,压 ...
学习vue.js的自我梳理笔记
基本语法格式: <script> new Vue({ el: '#app', data: { url: 'http://www.runoob.com' } }) </script&g ...
从0到1学习Vue.js，包含例子及实战项目（三）
为什么80%的码农都做不了架构师?>>> 在之前两篇文章中,我们首先了解了Vue环境的搭建以及两个重要思想--路由和组件的学习,通过组件库中的按钮组件和导航组件,相信大家也开始 ...
可以不学html直接学vue吗,一个只学过HTML，CSS，JS的前端初学者在学习Vue.js之前还需要学习哪些知识？...
看了大家的回答,感觉很多人都没说到点子上大概大家对如何有效的掌握一门新的框架也是一头雾水吧为了给题主解惑,以及各位如此耐心回答问题的朋友提供一个学习思路,所以我决定要抖点干货. 主题就是<如 ...
琪露诺学习Vue.js的第二天
道德三皇五帝, 功名夏后商周, 五霸七雄闹春秋, 顷刻兴亡过首. 青史几行名姓, 北茫无数荒丘, 前人撒种后人收, 无非是龙争虎斗! 事件修饰符 1.使用 .stop 阻止冒泡 <div c ...

学习vue.js 第一天

学习vue.js 第一天相关推荐

最新文章

热门文章