一、认识Vue
定义：一个构建数据驱动的Web界面的渐进式框架
优点：
1、可以完全通过客户端浏览器渲染页面，服务器端只提供数据
2、方面构建单页面应用程序(SPA)
二、引入Vue
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>vue导入</title> </head> <body> <div id="app"> <p title="普通p">p标签</p> <!-- v-bind vue的指令，可以被vue解析并处理 --> <!-- 第一个title：html标签的属性名(系统预定义的) --> <!-- 第二个titile：vue的变量 --> <p v-bind:title='title'>p标签</p> </div> </body> <!-- 引入外部vue js --> <script type="text/javascript" src="./js/vue.js"></script> <!-- 自身 js --> <script type="text/javascript"> // 创建vue实例，需要一个对象参数 new Vue({ el: '#app', data: { title: 'vue p' } }) </script> </html>
三、Vue实例
实例：el
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue实例之el</title> </head> <body> <div id="root"></div> <!-- <p v-bind:class="title" v-on:dblclick='action' v-model='abc' v-for="it in its"></p> --> <p v-bind:title='title'>p标签</p> </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> // el: vue实例的挂载目标 // 表示vue创建的该实例只对挂载点内部的模块进行处理 new Vue({ el: '#root', data: { title: 'vue p' } }) </script> </html>
数据：data
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue data</title> </head> <body> <div id="app"> <p>{{ msg }}</p> <!-- 出现在模块中的变量，一般都需要默认初始值 --> <p v-text='txt'></p> </div> </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', // data为模块中的变量提供数据 data: { msg: 'vue 控制的 文本1', txt: 'vue 控制的 文本2', } }); console.log(app) // el | data 为 vue变量 => 以$开头，区别普通变量 console.log(app.$data) console.log(app.$data.msg) // 所有在模块中产生的变量，也可以通过vue的实例直接访问 console.log(app.msg) </script> </html>
方法：methods
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue data</title> <style type="text/css"> .p1 { width: 300px; height: 100px; border: 1px solid #333; } </style> </head> <body> <div id="app"> <!-- v-on指令用于绑定事件 --> <!-- 事件对应逻辑由vue实例的methods处理 --> <!-- 绑定的事件(函数)需不需要携带参数列表： 无=>无需传参 有=>需要传参 --> <!-- 需要操作事件(需要事件对象)无需传参，传参后会都是事件 --> <p class="p1" v-on:click='func'>{{ msg }}</p> <p class="p1" v-on:click='fn("zero", 88888)'>{{ msg }}</p> </div> </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { msg: 'vue context' }, methods: { func: function (obj) { // alert('呵呵') // this: vue实例 => app // alert(this.msg) console.log(obj) }, fn: function (name, salary) { console.log(name) console.log(salary) } } }); </script> </html>
计算属性：computed
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>computed</title> </head> <body> <div id="app"> <div> 姓：<input type="text" v-model='first_name' /> </div> <div> 名：<input type="text" v-model='last_name' /> </div> <!-- <p>姓名：{{ full_name() }}</p> --> <!-- 采用计算方式的变量可以不在data中赋初值 --> <p>姓名：{{ full_name }}</p> </div> </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { first_name: '', last_name: '' }, // methods: { // full_name: function () { // return this.first_name + " " + this.last_name; // } // }, // 一个变量依赖于多个变量，一般对该变量采用计算处理 computed: { full_name: function () { return this.first_name + " " + this.last_name; } } }) </script> </html>
监听器：watch
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>computed</title> </head> <body> <div id="app"> <div> 姓名：<input type="text" v-model='full_name' placeholder="姓与名以空格隔开" /> </div> <p>姓：{{ first_name }}</p> <p>名：{{ last_name }}</p> </div> </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { full_name: '', first_name: '', last_name: '' }, watch: { full_name: function () { // 监听full_name，然后拆分为姓与名 var fname = this.full_name; var arr = fname.split(' '); this.first_name = arr[0]; this.last_name = arr[1]; } } }) </script> </html>
分隔符：delimiters
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>delimiters</title> </head> <body> <div id="app"> {{ msg }} [[ msg ]] ${ msg } </div> </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { msg: '数据' }, // delimiters配置自定义绑定符号 // 值为拥有两个元素的数组，元素为字符串形式 delimiters: ['${', '}'] }) </script> </html>
实例对象使用成员属性和方法
<script> var app = new Vue({ el: '#app', data: { msg: 'message' } }) console.log(app) console.log(app.$el) console.log(app.$data.msg) console.log(app.msg) </script>
四、实例生命周期钩子
定义：
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
钩子方法：
beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted：el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。
beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。
updated：数据更新时调用，发生在虚拟 DOM 打补丁之前。
activated：keep-alive 组件激活时调用。
deactivated：keep-alive 组件停用时调用。
beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed：Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
errorCaptured：2.5.0+ 新增，当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
重点钩子：
created：实例完全创建完毕(属性与方法都准备就绪)。可以进行数据操作(请求后台数据，重新渲染最新数据)
mounted：虚拟DOM构建完毕，并完成实例的el挂载。可以重新操作页面DOM
钩子函数实例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>生命周期钩子</title> </head> <body> <div id="app"> {{ msg }} </div> </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { msg: '数据' }, // 该钩子方法触发：vue实例刚被创建(只拥有内存位置),其他任何操作都未执行 // 就满足的beforeCreate钩子的触发条件，系统就会回调该方法的实现 // 用户在该触发条件情况下想去完成某些逻辑，那么就去实现该钩子 beforeCreate: function () { }, /* // 系统内部调用 if (beforeCreate) { beforeCreate() } // ... // ... if (created) { created() } if (beforeMount) { beforeMount() } // ... */ // 数据与事件加载完毕，el并没有进行挂载 created: function () { // 获取想要的数据(请求后台) // 事件的解绑或换绑或重新绑定 // 对虚拟DOM进行修改 }, // DOM树加载完毕，el渲染完毕 mounted:function () { // 可能需要对DOM进行操作(交给模块处理) } }) </script> </html>
五、视图常规操作
v-text：文本变量
<p v-text='msg'></p> <p>{{ msg }}</p>
v-once：一次性文本赋值
<p v-once>{{ msg }}</p>
v-html：html文本变量
<p v-html='msg'></p> <script> new Vue({ el: '#app', data: { msg: '<b>文本</b>' } }) </script>
v-bind：属性绑定
<div id="app"> <img v-bind:src='imgSrc' /> <!-- 简写 --> <img :src='imgSrc' /> </div> <script> new Vue({ el: '#app', data: { imgSrc: 'https://www.baidu.com/favicon.ico' } })
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>主要指令v-bind</title> <script type="text/javascript" src="js/vue.js"></script> <style type="text/css"> .a { background-color: red; } .b { color: green; } </style> </head> <body> <div id="app"> <!-- v-bind:绑定系统预定义属性 --> <!-- 字符串abc --> <p title="abc">p段落</p> <!-- 1、变量abc，需要初始化 --> <p v-bind:title="abc">p段落</p> <!-- 2、如何直接将abc作为字符串绑定到属性 --> <p v-bind:title="'abc'">p段落</p> <!-- 3、v-bind简写为: --> <p :title="'ABC'">p段落</p> <!-- 4、绑定多个变量 --> <!-- i：以数组形式进行赋值 --> <!-- a, b为两个变量 --> <!-- 变量值可以有data提供 --> <!-- <div :class="[a, b]">12345</div> --> <!-- ii：以对象形式进行赋值 --> <!-- a，b为两个class值 --> <!-- class值只取true | false --> <!-- 非空均视为true，否则视为false --> <!-- <div :class="{a: 'A', b: 'B'}">67890</div> --> <!-- <div :class="{a: true, b: true}">67890</div> --> <!-- iii --> <div :class="[{a: true}, {b: true}]">呵呵嘻嘻哈哈</div> <!-- 总结 --> <!-- [], 中出现的值，作为变量，变量值来源于data，且最终将来源于data的数据作为属性值赋值给v-bind绑定的属性 --> <!-- {}, 中出现的键(key)，直接作为v-bind绑定的属性的值，而键(key)对应的值(value)是决定键是否起效，值(value)的取值只为true|false --> <a :style="color" href="">百度</a> <a :style="{color: 'red', backgroundColor: 'black'}" href="">京东</a> </div> </body> <script type="text/javascript"> new Vue({ el: '#app', data: { abc: 'ABC', a: 'a', b: 'b', // color: 'color: red' color: { color: 'red', // 支持驼峰命名法 backgroundColor: 'orange' } } }) </script> </html>