一、使用VUE
1、引入vue.js文件
//下载后导入 <script src=vue.js></script>2、通过下面的代码展示用，创建一个Vue的实例，然后通过应用的id嵌入根元素，将数据放入一个对象data中，并且将表达式传入div中{{msg}}（一定注意必须是双大括号）
<div id="app"> {{ msg}} </div> //建立vue对象，固定格式 new Vue({ el: '#app', //通过id嵌入元素，el是元素ELEMENT的缩写 data: { msg: 'Holle Word!' } })二、指令
指令：带有前缀 v-，以表示它们是 Vue 提供的特殊特性，通过属性来操作元素。 1、v-model
v-model:实现了数据和视图的双向绑定 分成了3步： 1）把元素的值和数据相互绑定 2）当输入内容时，数据同步发生变化，视图 ---数据的驱动 3）当改变数据时，输入内容也会发生变化，数据-》视图的驱动 例子：利用vue中的v-model把input标签与data数据中msg属性进行双向绑定，msg可以有默认值也可以默认为空！ <div id="app"> <input type="text" v-model="msg"> <h1>{{msg}}</h1> </div> <script> new Vue({ el:"#app", data:{ msg:"Holle Word !" } })2、v-bind
<div id="app"> <a v-on:href="url">我</a> </div> <script> new Vue({ el: "#app", //表示在当前这个元素内开始使用VUE data:{ url: "http://www.qq.com" }, }) </script>3、v-text
// v-text 在元素中插入文本，比较单一 <div id="app"> <h1 v-text="msg">{{msg}}</h1> </div> <script> new Vue({ el:"#app", data:{ msg:"Holle Word !" } })4、v-html
// v-html:在元素不中不仅可以插入文本，还可以插入标签，多样化 <div id="app"> <h1 v-html="hd"></h1> </div> <script> new Vue({ el:"#app", data:{ hd: "<input type='button' value='提交'>", str: "我要发财!" } })5、v-if – v-show – v-on // v-if: 根据表达式的真假值来动态插入和移除元素，下面的例子演示了我们不仅可以把数据绑定到 DOM 文本或特性，还可以绑定到 DOM 结构。此外，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用过渡效果。 // v-show:根据表达式的真假值来隐藏和显示元素
<div id="app"> <p v-if="pick">我是刘德华</p> <p v-else>我是张学友</p> <p v-show="temp">我是赵本山</p> <p v-show="ok">你喜欢我吗？</p> </div> <script> var vm = new Vue({ el: "#app", //表示在当前这个元素内开始使用VUE data:{ pick: false, temp: true, ok: true } }) <script> <div id="app"> <input type="button" value="点我吧!" v-on:click="show()"> </div> <script> new Vue({ el: "#app", //表示在当前这个元素内开始使用VUE data:{ arr: [11,22,3344,55], }, methods: { show: function () { this.arr.pop(); } } }) </script>6、v-for
根据变量的值来循环渲染元素
<div id="app"> <ul> <li v-for="item in todos"> {{ item.text }} </li> </ul> </div> var app = new Vue({ el: '#app', data: { todos: [ { text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '整个牛项目' } ] } }) // 循环列表有两个参数，一个为元素中的数据，另一个为索引值 <div id="app"> <ul> <li v-for="(item,index2) in arr"> {{item}}: {{index2}} </li> </ul> </div> <script> new Vue({ el: "#app", //表示在当前这个元素内开始使用VUE data:{ arr: [11,22,33,44,55], } }) </script> // 循环字典时，有三个参数，元素中的value值，key，索引值 <div id="app"> <ul> <li v-for="(item,key,index) in obj"> {{item}}: {{key}}:{{index}} </li> </ul> </div> <script> new Vue({ el: "#app", //表示在当前这个元素内开始使用VUE data:{ obj: {a:"张三",b:"李四",c:"王大拿",d:"谢大脚"}, }, }) </script>