1. vue 生命周期函数
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些 生命周期钩子 ，这就给我们提供了执行自定义逻辑的机会
生命周期图示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue实例生命周期函数</title> <script src="../../vue.js"></script> </head> <body> <div id="app"></div> <script> var vm = new Vue({ el:'#app', data:{ test:'template option' }, template:'<div>{{test}}</div>', beforeCreate:function () { // 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。 console.log('beforCreate') }, created:function () { // 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。 console.log('created') }, beforeMount:function () { // 在挂载开始之前被调用：相关的 render 函数首次被调用 console.log('beforeMount') console.log(this.$el); }, mounted:function () { // el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。 console.log('mounted') console.log(this.$el); this.$data.test = '我改变了test' // beforeUpdate updated方法 }, beforeDestroy:function () { // 实例销毁之前调用。在这一步，实例仍然完全可用。 console.log('beforeDestrory') }, destroyed:function () { // ue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 console.log('destroyed') }, beforeUpdate:function () { // 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。 console.log('boforeUpdate') }, updated:function () { // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。 // 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。 console.log('updated') this.$destroy(); // 完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。 // 触发 beforeDestroy 和 destroyed 的钩子。 } }) </script> </body> </html>
2. 模板语法
Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上， Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模板语法</title> <script src="../../vue.js"></script> </head> <body> <div id="app"> {{name}} <!--#插值表达式--> <div v-text="name"></div> <!--文本--> <div v-html="name" :title="title"></div> <!--被插入的内容都会被当做 HTML —— 数据绑定会被忽略--> <div v-text="age + '岁'"></div> <!--#过滤器--> {{ msg | capitalize }} <a v-bind:href="url">百度一下</a> v-bind 缩写 <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> v-on 缩写 <!-- 完整语法 --> <a v-on:click="doSomething"></a> <!-- 缩写 --> <a @click="doSomething"></a> </div> <script> var app = new Vue({ el:'#app', data:{ name:'<h1>Dell</h1>', title:'this is a title', age:20, msg:'this is a message', url:'https://www.baidu.com/' }, filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } }) console.log(app.$data) </script> </body> </html>
3. 计算属性，方法，侦听器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算属性，方法，侦听器</title> <script src="../../vue.js"></script> </head> <body> <div id="app"> <!--获取fullName--> <!--第一种方式--> <!--{{ fullName }}--> <!--第二种方式--> <!--{{getFullName()}}--> <!--第三种方式--> {{fullName}} {{ age }} </div> <script> var vm = new Vue({ el:'#app', data:{ firstName:'Dell', lastName:'Lee', age:20, fullName:'Dell Lee' }, // #计算属性 缓存机制，如果依赖的值没有发生改变，不会重新执行 // computed:{ // fullName:function () { // console.log('fullName 计算了一次') // return this.firstName+" "+this.lastName // } // }, // methods:{ // // 即使依赖的值没有发生改变，也会重新执行 // getFullName:function () { // console.log('getFullName 计算了一次') // return this.firstName+" "+this.lastName // } // }, watch:{ // #类似computed firstName:function () { console.log('我执行了firstName') return this.fullName = this.firstName+this.lastName }, lastName:function () { return this.fullName = this.firstName+this.lastName console.log('我执行了lastName') }, } }) </script> </body> </html>
4. 计算属性的 setter,getter
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算属性setter和getter</title> <script src="../../vue.js"></script> </head> <body> <div id="app"> {{fullName}} </div> <script> var vm = new Vue({ el:"#app", data:{ firstName:'Dell', lastName:'Lee', }, computed: { fullName: { // #依赖的值发生改变时，执行 get:function () { return this.firstName + " " + this.lastName }, set:function (value) { var name = value.split(" "); console.log(name); this.firstName = name[0]; this.lastName = name[1]; } } } }) </script> </body> </html>