1.实例与数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> </head> <body> <div id="app"> <input type="text" v-model="name" placeholder="your name"> <h1>你好,{{name}}</h1> </div> <script> var app = new Vue({ //通过构造函数Vue，创建一个Vue实例 el:'#app', // el: document.getElementById('app') //这是JS原生的获取标签的方式 // el元素用于指定一个页面中已经存在的DOM元素来挂在Vue实例，它可以是HTMLElement，也可以是CSS选择器 // 挂载成功之后，可以通过app.$el来访问该元素，Vue提供了许多常见的实例属性和方法，都以$开头 data: { //通过data选项，可以声明应用内需要双向绑定的数据 name: '', a: 2 } }); console.log(app.a) // 2 //Vue实例本身代理了data对象里所有的属性，所以可以直接访问 </script> </body> </html>
除了显式的声明数据外，也可以指向一个已有的变量，它们之间形成了数据的双向绑定，例如下面的data与myDate之间.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"></div> <script> var myData = { a: 1 }; //JS中的语句要以；作为结束符 var app = new Vue({ el: "#app", data: myData }); console.log(app.a); //1 app.a = 2; //修改属性原数据原数据也会被修改 console.log(myData.a); //2 myData.a = 3; //修改原数据，Vue属性也会被修改 console.log(app.a); </script> </body> </html> <!--双向绑定数据--> <!--所谓的双向绑定是指Vue实例属性与视图之间的绑定，修改其中一方另一方也会随之跟着变化-->
2.生命周期
每个Vue实例创建时，都会经历一系列的初始化过程，同时也会调用相应的生命周期钩子
我们可以利用这些钩子，在合适的时机执行我们的业务逻辑
Vue生命周期中常用的钩子：
created：实例创建完成之后调用，此阶段完成了数据的观测等，但尚未挂载，$el还不可用，会用来初始化一些数据
mounted：el挂载到实例后调用，一般我们的第一个业务逻辑会在这里开始
beforeDestory：实例销毁之前调用，主要解绑一些addEventListener监听的事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <input type="text" v-model="name" placeholder="your name"> <h1>你好,{{name}}</h1> </div> <script> var app = new Vue({ el:'#app', data: { name: '', a: 2 }, created: function () { console.log(this.$el) //undefined console.log(this.a) // 2 }, mounted: function () { console.log(this.$el) //$el代表el挂载的当前的DOM元素 } }) </script> </body> </html>
3.插值与表达式
“{{ }}”是最基本的文本插入方法，它会自动将我们双向绑定的数据实时显示出来
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> {{ date }} <!--这里输出的是浏览器默认的时间格式--> </div> <script> var app = new Vue({ el: "#app", data: { date: new Date() }, mounted: function () { var _this = this; this.timer = setInterval(function () { _this.date = new Date(); },1000); }, beforeDestroy: function () { if (this.timer) { //清除定时器 clearInterval(this.timer); } } }) </script> </body> </html>
效果：
被格式化后的效果：
如果你想输出一个HTML，而不是纯文本，那么可以使用v-html
如果使用v-html输入，那么可能会产生xss攻击
如果你想显示{{}}标签而不想被替换掉，那么可以使用v-pre跳过编译过程
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <span v-html="link"></span> <span v-pre>{{ '这里的内容是不会被编译的，也就是换原样显示' }}</span> </div> <script> var app = new Vue({ el: "#app", data: { link: "<a href='https://fanyi.baidu.com/?aldtype=16047#auto/zh'>这是一个百度的链接地址</a>" } }) </script> </body> </html>
在{{ }}里面除了简单的绑定属性外，还可以使用JS表达式进行简单的运算.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> {{ number / 5 }} <!--简单运算--> {{ isOK? '确定' : '取消' }} <!--布尔运算--> {{ text.split(',').reverse().join(':') }} <!--三元运算--> </div> <script> var app = new Vue({ el: "#app", data: { number: 100, isOK: false, text: '123,456' } }) </script> </body> </html>
vue.js只支持单个表达式，不支持语句和流运算。
在表达式中，不能使用用户自定义的全局变量，只能使用Vue白名单内的全局变量。
4.过滤器
Vue.js支持在{{ }}的插值尾部添加一个管道符，对数据进行过滤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> {{ date | formatDate }} <!--自定义一个日志格式--> </div> <script> var padDate = function (value) { return value < 10 ? '0' + value : value; }; var app = new Vue({ el: "#app", data: { date: new Date() //JS中事件获取方式 }, filters: { //过滤器 formatDate: function (value) { //设置一个过滤器函数，转化日期 var date = new Date(value); var year = date.getFullYear(); var month = padDate(date.getMonth() + 1); var day = padDate(date.getDate()); var hours = padDate(date.getHours()); var minutes = padDate(date.getMinutes()); var seconds = padDate(date.getSeconds()); return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds; } }, mounted: function () { var _this = this; //声明一个变量指向Vue实例this，保证作用域一致，this代表当前window对象 this.timer = setInterval(function () { _this.date = new Date(); //重新赋值 },1000); //一秒钟变化一次时间 }, beforeDestroy: function () { if (this.timer) { clearInterval(this.timer); //在vue实例销毁之前，清除定时器 } } }) </script> </body> </html>
效果展示：
过滤器可以串联，而且可以接受参数
串联：{{ message | filterA | filterB }}
接受参数：{{ message | filterA('arg1','arg2') }}
应当注意的是：过滤器应当用于简单的文本转换，如果要实现更为复杂的数据变换，应该使用计算属性.