一.到vue官网下载vue.js文件；
二.常见指令介绍
1.插值表达式
{{}}
当模型中的数据发生改变时，那么试图中的数据也对应发生改变
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!--第一步：引入vue.js--> <script src="vue.js"></script> </head> <body> <!--第二步：创建模板--> <div id="app"> <!--插入表达式--> {{name}} </div> </body> <!--第三步：创建vue对象--> <script type="text/javascript"> new Vue({ //管理边界 el:"#app", data:{ name:"你好啊" } }) </script> </html>
2.v-text
将一个变量的值渲染到指定的元素中
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!--第一步：引入vue.js--> <script src="vue.js"></script> </head> <body> <!--第二步：创建模板--> <div id="app"> <!--v-text--> <h1 v-text="name"></h1> </div> </body> <!--第三步：创建vue对象--> <script type="text/javascript"> new Vue({ //管理边界 el:"#app", data:{ name:"你好啊" } }) </script> </html>
v-text 不能识别h1标签
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!--第一步：引入vue.js--> <script src="vue.js"></script> </head> <body> <!--第二步：创建模板--> <div id="app"> <!--v-text不能识别h1标签--> <!--v-html--> <div v-text="vaule"></div> </div> </body> <!--第三步：创建vue对象--> <script type="text/javascript"> new Vue({ //管理边界 el:"#app", data:{ vaule:"<h1>Hello Word!!!</h1>" } }) </script> </html>
3.v-html
可以真正输出html元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!--第一步：引入vue.js--> <script src="vue.js"></script> </head> <body> <!--第二步：创建模板--> <div id="app"> <!--v-html--> <div v-html="vaule"></div> </div> </body> <!--第三步：创建vue对象--> <script type="text/javascript"> new Vue({ //管理边界 el:"#app", data:{ vaule:"<h1>Hello Word!!!</h1>" } }) </script> </html>
4.v-model
实现双向数据绑定
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!--第一步：引入vue.js--> <script src="vue.js"></script> </head> <body> <!--第二步：创建模板--> <div id="app"> <!--v-model--> <input type="text" v-model="name" /> <br/> 名字：{{name}} </div> </body> <!--第三步：创建vue对象--> <script type="text/javascript"> new Vue({ //管理边界 el:"#app", data:{ name:'' } }) </script> </html>
5.v-bind
绑定页面中元素的属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!--第一步：引入vue.js--> <script src="vue.js"></script> </head> <body> <!--第二步：创建模板--> <div id="app"> <!--v-bind--> <a v-bind:href="value">百度一下</a> </div> </body> <!--第三步：创建vue对象--> <script type="text/javascript"> new Vue({ //管理边界 el:"#app", data:{ value:'http://baidu.com' } }) </script> </html>
点击就跳到百度页面。
6.v-if 和 v-show
v-if:
作用：判断是否加载固定内容，如果是真，就加载，如果是假，就不加载。
语法：v-if="判断表达式"
v-show：
作用：判断是否显示内容
语法：v-show="判断表达式"
v-if 和 v-show 相同点和不同点：
1：相同点：都可以实现对于一个元素的显示与隐藏操作
2:不同点：v-if是将元素添加或移除 dom 树模型中，v-show 只是在这个属性上加了 display：none而已
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!--第一步：引入vue.js--> <script src="vue.js"></script> </head> <body> <!--第二步：创建模板--> <div id="app"> <!--v-if--> <h1 v-if='isShow'>你好啊</h1> <h1 v-show='isShow'>你好啊</h1> </div> </body> <!--第三步：创建vue对象--> <script type="text/javascript"> new Vue({ //管理边界 el:"#app", data:{ isShow:false } }) </script> </html>
v-if 有更高的切换消耗，安全性性高。v-show 初始化消耗大一点。所以，如果需要频繁切换并对安全性没有要求时，可以使用v-show。如果在运行时，条件不可能改变的话，使用v-if更好一点。
8.v-for
作用：控制html元素的循环
语法：v-for="item in 集合"
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!--第一步：引入vue.js--> <script src="vue.js"></script> </head> <body> <!--第二步：创建模板--> <div id="app"> <!--v-for--> <ul> <li v-for="singer in singers">{{singer.no}}, {{singer.name}}</li> </ul> </div> </body> <!--第三步：创建vue对象--> <script type="text/javascript"> new Vue({ //管理边界 el:"#app", data:{ singers:[ {no:01,name:'AAA'}, {no:02,name:'BBB'}, {no:03,name:'CCC'}, {no:04,name:'DDD'}, ] } }) </script> </html>
9：v-on
作用：对页面中事件进行绑定
语法：v-on：事件类型=“监听器”
缩写：@事件类型=“监听器”
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!--第一步：引入vue.js--> <script src="vue.js"></script> </head> <body> <!--第二步：创建模板--> <div id="app"> <!--v-on--> <ul> <li v-on:click="myclick">单击</li> <li @click="myclick">点击事件指令的一个快捷方式</li> </ul> </div> </body> <!--第三步：创建vue对象--> <script type="text/javascript"> new Vue({ //管理边界 el:"#app", //data 存放数据 data:{ }, //methods 存放方法 methods:{ myclick:function(){ console.log('我被点击了'); } } }) </script> </html>
