本文详细介绍了Vue.js的常用选项，包括创建Vue实例、el的挂载、data的数据传递、methods中定义的方法、computed的计算属性以及watch的监听器。此外，还讨论了delimiters的自定义插值符号和生命周期钩子的各个阶段，帮助读者深入理解Vue实例的运作机制。
目录
三、data：含有零个或多个的 key/value 对，进行数据传递
四、computed：进行方法内的计算（实现一个变量依赖多个变量）
五、watch：监听变量，变量修改是触发方法（实现多个变量依赖于一个变量）
一、创建Vue实例
步骤总结：
- 页面中引入vue文件
- new一个新的Vue对象 （可将对象进行赋值）
- 在new对象中添加相关选项内容
<body> <div id="app" class="app"> <p title="test">title111</p> <p v-bind:title="title">v-bind</p> </div> </body> <!-- 在页面中引入vue --> <script src="js/vue-2.5.17.js"></script> <script type="text/javascript"> // 创建vue实例 new Vue({ // el: "#app" el: '.app', data: { title: "test2" } }); </script>
二、el ：vue实例的挂载
步骤总结：
- 在vue新对象内进行key：‘value’ 形式的挂载 例如：el：‘.test’
- value形式必须为CSS选择器语法 例如：el:‘.test’ 、el:'#test'
（强烈建议使用id进行绑定，有且只有一个）<body> <div id="app" class="app"> <p title="test">test</p> </div> <div id="main"> </div> </body> <!-- 在页面中引入vue --> <script src="js/vue-2.5.17.js"></script> <script type="text/javascript"> // 创建vue实例 new Vue({ // el: "#app" el: '.app', }); // 将一个vue实例挂载到页面的一个页面结构 new Vue({ // 挂载点 el: "#main", }) </script>
三、data：含有零个或多个的 key/value 对，进行数据传递
总结：
- vue 对象内的 data：{} 形式创建data选项
- data 内存在零个或多个 key：value 对；
key 以字符串形式存在，可适当省略合法变量名的引号；
value 可以为任意属性。- Html结构内，使用 插值表达式 {{}} (即，双大括号) 插入data内的数据，例如：{{ msg }}
注意：差值表达式内可以进行运算- JS结构内的到相应变量的方式：
- 直接获取vue实例对象， 例如 ： console.log(app)
- 使用$，获取vue实例对象内的data对象，例如： console.log(app.$data)
- 获取data下的相应变量名，例如： console.log(app.$data.msg)
- 直接通过vue对象获取data下的变量，例如： console.log(app.msg)
<body> <div id="app"> <!-- 插值表达式 --> {{ msg }} {{ num }} <!-- 插值表达式中可以进行运算 --> {{ 1 + 2 + 3 * 4 }} </div> </body> <script src="js/vue-2.5.17.js"></script> <script type="text/javascript"> var app = new Vue({ el: "#app", // 为挂载点内部的vue变量提供值 data: { msg: "hello world!", num: 88888 } }) </script> <script type="text/javascript"> // 获取msg,num变量的值 // 1.得到vue实例 console.log(app); // 2.获取vue变量data: $data console.log(app.$data); // 3.获取目标变量值 console.log(app.$data.msg); // 直接获取值 console.log(app.msg); console.log(app.num); </script>
三、methods：可以通过实例及表达式，进行调用的方法。
总结：
- 在vue对象内的创建 methods：{} ，存放方法
- methods内方法以 方法名：function(参数){} 的形式存放。
- methods内的方法，可以直接在JS结构体内进行调用，例如：vue对象名.方法名()
- methods内方法绑定v-on事件，启用事件触发函数。
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>methods</title> <style type="text/css"> .box { background-color: orange } </style> </head> <body> <div id="app"> <!-- v-on: 指令,操作事件的 --> <p class="box" v-on:click="t1Click">{{ test1 }}</p> <p class="box" v-on:click="t2Click">{{ test2 }}</p> <p class="box" v-on:mouseover="action">action 11111</p> </div> </body> <script src="js/vue-2.5.17.js"></script> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { a : 1, test1: "test1 defClick", test2: "test2 abcClick" }, // methods为挂载点内部提供方法的实现体 methods: { // 为下方直接调用函数，提供方法 plus:function () { this.a++; console.log(this.a); }, // 绑定v-on事件，事件触发时候回调相应函数 t1Click: function (ev) { console.log(ev); console.log("abc is clicked"); }, t2Click (ev) { console.log(ev); console.log("def is clicked"); }, action () { console.log("被悬浮"); } } }) // 直接调用对应方法 vm.plus() </script> </html>
四、computed：进行方法内的计算（实现一个变量依赖多个变量）
总结：
- 计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。
注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是不会被更新的。- vue对象内建立 computed：{}
- computed内以 方法名：function（参数）{}，
1- 纯粹进行计算相关的操作
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>computed</title> </head> <body> </body> <script src="js/vue-2.5.17.js"></script> <script type="text/javascript"> var vm = new Vue({ el: "#app", data: { a:1, }, computed:{ // 纯粹实现计算 // 仅读取 aDouble: function () { return this.a * 2 }, // 读取和设置 aPlus: { get: function () { return this.a + 1 }, set: function (v) { this.a = v - 1 } } }) // 调用aplus内的get console.log(vm.aPlus); // 调用aplus内的set vm.aPlus = 3; console.log(vm.aPlus); // vm内a被修改 console.log(vm.a); // 进行计算 console.log(vm.aDouble); </script> </html>
2- 实现一个变量依赖于多个变量
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>computed</title> </head> <body> <div id="app"> <div> <!-- v-model vue进行数据双向绑定的指令 --> <label for="xing">姓:</label><input type="text" name="xing" v-model="fisrt_name"> </div> <div> <label for="ming">名:</label><input type="text" name="ming" v-model="last_name"> </div> <div> <!-- 通过插值表达式实现（不推荐） --> <div>姓名: {{ fisrt_name + " " + last_name }} </div> <!-- 通过computed实现（推荐） --> <div>姓名: {{ full_name }} </div> <!-- 通过methods实现 --> <div>姓名: {{ full_name_bac() }} </div> </div> </div> </body> <script src="js/vue-2.5.17.js"></script> <script type="text/javascript"> var vm = new Vue({ el: "#app", data: { fisrt_name: "", last_name: "", // full_name: "" }, computed:{ // 一个变量依赖于多个变量 // 采用computed full_name: function () { // full_name对fisrt_name及last_name两个变量进行监听,两个值只有有一个变化,full_name就会随之变化,并且可以实时渲染到页面 return this.fisrt_name + " " + this.last_name; } }, methods: { full_name_bac: function () { return this.fisrt_name + " " + this.last_name; } } }) </script> </html>
五、watch：监听变量，变量修改是触发方法（实现多个变量依赖于一个变量）
总结：
- vue内 watch：{} 创建
- 变量的值修改触发监听方法，有多种调用方式
1- 调用修改变量值的多种方式
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>watch</title> </head> <body> </body> <script src="js/vue-2.5.17.js"></script> <script type="text/javascript"> var vm = new Vue({ data: { a: 1, b: 2, c: 3, d: 4, e: { f: {g: 5} }, }, methods:{ someMethod:function(){ console.log('b被修改触发'); } }, watch: { a: function (val, oldVal) { console.log('a被修改触发：new: %s, old: %s', val, oldVal) }, // 方法名,b被修改时，调用对应方法 b: 'someMethod', // 深度 watcher c: { handler: function (val, oldVal) { console.log('c被修改触发'); }, deep: true }, // 该回调将会在侦听开始之后被立即调用 d: { handler: function (val, oldVal) { console.log('d未修改触发');}, immediate: true }, // 直接修改e，接连触发 e: [ function handle1 (val, oldVal) {console.log('e被修改触发1');}, function handle2 (val, oldVal) { console.log('e被修改触发2'); } ], // watch vm.e.f's value: {g: 5} 'e.f': function (val, oldVal) {console.log('e内的f被修改触发'); }, } }) // console.log(vm.a); // vm.a = 'aaa'; // console.log(vm.a); // vm.b = 111; // console.log(vm.b); // vm.c = 'ccc'; // vm.d = 'ddd'; // vm.e.e1 = 'e1111'; // console.log(vm.e.e1); // delete vm.e.e1; // vm.e.f.g = 'ggg'; // vm.e = {}; //vm.e.f = 'fff'; </script> </html>2- 实现多个变量依赖于一个变量（监听唯一的变量）
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>watch</title> </head> <body> <div id="app"> <div> <label>姓名:</label> <input type="text" v-model="full_name"> </div> <p>姓: {{ first_name }} </p> <p>名: {{ last_name }} </p> </div> </body> <script src="js/vue-2.5.17.js"></script> <script type="text/javascript"> var vm = new Vue({ el: "#app", data: { // 多个变量依赖于一个变量, 对该变量进行监听 full_name: "", first_name: "", last_name: "" }, watch: { // 监听full_name变量,通过full_name具体修改first_name,last_name full_name () { var fullName = this.full_name; console.log(fullName); // split进行分割操作，返回列表 this.first_name = fullName.split(" ")[0]; this.last_name = fullName.split(" ")[1]; } } }) </script> </html>
六、delimiters：改变插值表达式符号（{{}}）
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>delimiters</title> </head> <body> <div id="app"> {{ msg }} <br/> ${ msg } </div> </body> <script src="js/vue-2.5.17.js"></script> <script type="text/javascript"> new Vue({ el: '#app', data: { msg: 'message' }, delimiters: ['${', '}'] }) </script> </html>
七、生命周期钩子：实例的各个时期调用的方法
- beforeCreate：初始化实例后，调用前触发。
- created：实例穿件完成后触发。
- beforeMount：挂在开始前被调用。
- mounted：el被请创建的vm.$el替换，并且挂载到实例上去后调用。
- beforeUpdate：数据更新时调用，发生在虚拟DOM补丁之前。
- updated：由于数据更改导致的虚拟DOM重新渲染和打补丁，之后调用。
- activated：keep-alive 组件激活时调用
- deactived：keep-alive 组件停用时调用
- beforeDestory：实例销毁之前调用
- destroyed：Vue 实例销毁后调用。
调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。- errorCaptured：当捕获一个来自子孙组件的错误时被调用
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>生命周期钩子</title> </head> <body> <div id="app"> {{ msg }} </div> </body> <script src="js/vue-2.5.17.js"></script> <script type="text/javascript"> new Vue({ el: "#app", data: { msg: "message" }, beforeCreate () { console.log("实例刚刚创建"); console.log(this.msg); }, created () { console.log("实例创建成功, data, methods"); console.log(this.msg); } // 拿到需求 => 确定钩子函数 => 解决需求的逻辑代码块 }) </script> </html>
扫一扫
4178
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
