目录
1.初始Vue
1.1 什么是Vue
1.2 Vue的特点
1.3 引入Vue
1.4 使用Vue
2. 数据绑定的方法
2.1 Mustache（双大括号插值法）
2.2 v-text
2.3 v-html
3. 列表渲染
1.初始Vue
1.1 什么是Vue
Vue 是一套用于构建用户界面的渐进式JavaScript框架。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
1.2 Vue的特点
- Vue 上手简单易用。
- Vue 具有灵活强大的生态系统。
- Vue 比较高效，采用虚拟dom（使用js对象描述的dom节点）。
// 虚拟dom,因为真实的dom里面包含的方法和属性太多了，多次加载会耗费大量内存，//而使用对象来模拟dom节点就可只加载我们需要的方法和属性，会节约大量内存let div = {tagname: 'div',attr: {id: 'box',class: 'a'},innerHTML: '好好学习，天天向上'} - Vue 采用diff算法(差异算法或对比算法)：通过比较新旧组件树或虚拟DOM树，框架能够找出最小更新集合并减少不必要的DOM操作，从而提高应用的性能。
1.3 引入Vue
引入vue可以选择引入在线文件，也可以将文件中的内容全部复制到本地的.js文件中，然后引用该.js文件。
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>1.4 使用Vue
使用vue需要创建Vue实例 参数为options（选项）表示一个对象。
let vm = new Vue({// element 元素节点 表示当前vue实例所作用的元素节点el: "#app",// 存放当前数据的集合data: {msg: 'hello world vue.js',title: '初始vue'}});2. 数据绑定的方法
2.1 Mustache（双大括号插值法）
- 双大括号会将数据解释为普通文本，而非 HTML 代码。而且这个方法还有插值闪烁的问题，可以在标签内写入v-cloak，再设置v-cloak的样式为display: none;可以解决这个问题。
- Mustache（双大括号插值法）也可以绑定一个js表达式。在使用js表达式时，每个绑定的值都只能是单个表达式，语句、及流程控制、函数等是不会生 效的，
<style>[v-cloak] {display: none;}</style>
<body><div id="app"><!-- 双大括号中只能写js表达式 --><h1 v-cloak>{{msg.split('')}}</h1><h2 v-cloak>{{sex?'男':'女'}}</h2></div><script src="./vue.js"></script><script>let vm = new Vue({el: '#app',data: {msg: '好好学习 天天向上！！！',sex: true}})console.log(vm);</script>
</body>2.2 v-text
v-text指令用来渲染内容 类似于原生js中的innerText。
<body><div id="app"><!-- v-text指令用来渲染内容 类似于原生js中的innerText --><h2 v-text="title"></h2></div><!-- 插值闪烁： --><script src="./vue.js"></script><script>new Vue({el: '#app',data: {msg:'Vue基础指令',title:'请认真学习',html:"<a href='https://cn.vuejs.org/guide/introduction.html'>vue官网</a>"}})</script>
</body>2.3 v-html
v-html指令用来渲染内容 类似于原生js中的innerHtml。
<body><div id="app"><!--v-html指令用来渲染内容 类似于原生js中的innerHtml --><h3 v-html="html"></h3></div><!-- 插值闪烁： --><script src="./vue.js"></script><script>new Vue({el: '#app',data: {msg:'Vue基础指令',title:'请认真学习',html:"<a href='https://cn.vuejs.org/guide/introduction.html'>vue官网</a>"}})</script>
</body>3. 列表渲染
在vue中使用v-for指令可以进行数组格式数据渲染。
格式： <li v-for="(item,index) in list">{{item}}---{{index}}</li>
| v-for | 用于列表循环 |
| item | 表示遍历得到的每一项 |
| index | 表示遍历得到的每一项所对应的索引 |
| list | 表示要循环的数组名称 |
<body><div id="app"><ol><!-- v-for 用于列表循环item 表示遍历得到的每一项index 表示遍历得到的每一项所对应的索引list 表示要循环的数组名称--><li v-for="(item,index) in list">{{item}}---{{index}}</li></ol><hr></hr><ul><li v-for="(item,index) in userList">{{item.name}}---{{item.age}}---{{item.sex}}</li></ul><!-- 遍历数字 --><ol><li v-for="(item,index) in num">{{item}}---{{index}}</li></ol></div><script src="./vue.js"></script><script>new Vue({el: '#app',data: {list: ['张三', '李四', '王五', '赵六', '关四'],userList: [{name: "张11",age: 18,sex: '男'},{name: "张22",age: 17,sex: '女'},{name: "张33",age: 16,sex: '男'}],num: 10}})</script>
</body>
)
