前言：关于vue我已经更了3篇博文了，这篇是第4篇，关于Vue原生构造器选项，包括methdos、watch、mixins、extends、delimiters、computed、propsData，下面我们一一来以例子为例进行讲解。 Tip：下面的例子要注意看注解，注解才是精髓。 1、methdos Option 方法选项 应用场景：定义执行函数，例如我们写一个点击事件的add方法，此时我们就应该在method里定义。 例子描述：学习这个methods选项，我们要掌握 例子如下： 2、mixins option 混入选项操作 应用场景： 例子说明： 例子如下： 3、extends option 扩展选项 应用场景： extends注意事项： 例子如下： 4、watch Option 监控选项 应用场景：监控某个值的变化的一个生命周期 例子说明： 例子如下： 5、delimiters Option 自定义插值符 应用场景： 例子说明： 例子如下： 6、computed Option 计算选项 应用场景： 例子说明： 7、propsData Option 全局扩展的数据传递 应用场景： 例子如下： 如果你看懂那你可以去看我前面写的博客，再来看这篇。链接如下：
Vue入门学习笔记4 vue原生构造器的选项详解
1、methods里的函数是如何传值的；
2、自定义组件如何调用methods里的函数；
3、构造器作用域外如何调用methods里的函数；
4、了解点击事件的event参数。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>methdos Option 实例</title> <script type="text/javascript" src="../assets/js/vue.js"></script> </head> <body> <h1>methdos Option 实例</h1> <hr> <div id="app"> {{num}} <br> <!-- 1、methods传值 2、event 相当于原始javascript的mouse event 鼠标事件的一系列事件【了解即可】 --> <p><button @click="add(2,$event)">add</button></p> <!-- 3、 自定义组件调用methods里的函数 .native修饰符的作用是调用原生构造器下的methods选项里的成员 --> <p><btn @click.native="add(2)"></btn></p> </div> <!-- 4、 作用域外（构造器作用域外）调用构造器里的methods选项下的成员函数add --> <button onclick="app.add(3)">外部add</button> <script type="text/javascript"> var btn = { template:`<button>组件add</button>` } var app = new Vue({ el:"#app", data:{ num : 0 }, components:{ "btn":btn }, methods:{ add:function(a,event){ if(a != " "){ this.num+=a }else{ this.num++ } console.log(event) } } }) </script> </body> </html>
1、掌握构造器混入与全局混入的写法
2、通晓全局混入与构造器里的混入选项和原生谁先执行<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>mixins option</title> <script type="text/javascript" src="../assets/js/vue.js"></script> </head> <body> <!-- 应用场景： 1 当项目已经上线了，构造器已经成熟了的时候，突然接到新的需求时 2 当出现很多公共的方法属性时，也就是说很多构造器或者其他作用域都要调用的一些方法属性时 --> <!-- 验证目的： 1 构造器混入与全局混入的写法 2 全局混入与构造器里的混入选项和原生谁先执行 --> <h1>mixins 混入选项操作</h1> <hr> <div id="app"> {{num}} <p><button @click="add">add</button></p> </div> <script type="text/javascript"> var addConsole = { // updated vue生命周期之一，更新时触发 updated:function(){ console.log("数据发生变化了。num变成" + this.num) } } // 2 全局的混入。 // 应用场景，多个构造器作用域共有的方法时使用 Vue.mixin({ updated:function(){ // 全局混入比原生构造器里的混入要提前 console.log("我是全局的混入") } }) var app = new Vue({ el:"#app", data:{ num:1 }, methods:{ add:function(){ this.num++; } }, updated:function(){ // 混入先执行，原生后执行 console.log("我是原生的updated") }, // 1构造器里的混入 // [addConsole]是一个数组，当有多个混入时逗号隔开就行 mixins:[addConsole] }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>extends option</title> <script type="text/javascript" src="../assets/js/vue.js"></script> </head> <body> <!-- 应用场景： 类似于mixins --> <!-- extends注意事项： 1 一个构造器里只能有一个扩展 2 当扩展的方法与原生构造器里的methods下的方法一样时，只执行原生的 --> <h1>extends option 扩展选项</h1> <hr> <div id="app"> {{num}} <p><button @click="add">add</button></p> </div> <script type="text/javascript"> var extendsObj = { updated:function(){ console.log("我是开展的updated"); }, methods:{ add:function(){ // 该方法不执行，原因是该方法与原生的构造器中的methods选项里add方法同名 // 当扩展到的方法与原生的同名时，只会执行原生的构造器里的methods选项里的方法 console.log("我是被扩展出来的方法"); this.num++ } } } var app = new Vue({ el:"#app", data:{ num:1 }, methods:{ add:function(){ console.log("我是原生的方法"); this.num++; } }, updated:function(){ console.log("我是原生的updated"); }, // 扩展，扩展只能放一个对象，即只能有一个扩展，不能像mixins那样用一个数组混入多个 extends:extendsObj }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>watch Option 实例</title> <script type="text/javascript" src="../assets/js/vue.js"></script> </head> <body> <h1>watch Option 实例(监控)</h1> <hr> <div id="app"> <p>今日温度：{{wendu}} 度</p> <p>穿衣建议：{{chuanyi}}</p> <p><button @click="shenggao(5)">升高温度</button><button @click="jiangdi(5)">降低温度</button></p> </div> <script type="text/javascript"> var chuanyiArray = ['T恤短袖','夹克长裙','棉衣羽绒服']; var app = new Vue({ el:"#app", data:{ wendu : 16, chuanyi : '夹克长裙' }, methods:{ shenggao:function(num){ if(num != " "){ this.wendu+=num }else{ this.wendu++ } }, jiangdi:function(num){ if(num != " "){ this.wendu-=num }else{ this.wendu-- } } }, // 1 写在构造器中 // watch:{ //监控元素值的改变 // //wendu ---要监控的值 // //newVal --新值，即改变的值 // //oldVal --旧值，即原本的值 // wendu:function(newVal,oldVal){ // if(newVal >= 26){ // this.chuanyi = chuanyiArray[0]; // }else if(newVal < 26 && newVal > 0){ // this.chuanyi = chuanyiArray[1]; // }else{ // this.chuanyi = chuanyiArray[2]; // } // } // } }) // 2 实例属性写watch app.$watch('wendu',function(newVal,oldVal){ if(newVal >= 26){ this.chuanyi = chuanyiArray[0]; }else if(newVal < 26 && newVal >0){ this.chuanyi = chuanyiArray[1]; }else{ this.chuanyi = chuanyiArray[2]; } }) </script> </body> </html>
原生态的vue是用两对大括号进行插值的，本来自修改为一对大括号<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>delimiters Option</title> <script type="text/javascript" src="../assets/js/vue.js"></script> </head> <body> <!-- 应用场景：当现有的插值符与项目本身冲突时使用 --> <h1>delimiters Option 自定义插值符</h1> <hr> <div id="app"> <!-- 原生的插值符是两对大括号 --> <!-- <p> {{mes}}</p> --> <!-- 自定义成一对大括号为插值符 --> <p>{mes}</p> </div> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ mes :'hell world!' }, delimiters:['{','}'] }) </script> </body> </html>
后台向前端传递的数据价钱是100，而我们希望修改格式为￥100元，但是又不希望污染原始数据，因为在其他地方的时候我们可能就只需要100这个格式的数据。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>computed Option</title> <script type="text/javascript" src="../assets/js/vue.js"></script> </head> <body> <!-- 应用场景： 不污染原始数据的前提下改变数据的格式或者排序的顺序等 --> <!-- 下面以不污染原始数据的前提下修改数据的格式 --> <h1>computed Option 计算选项操作实例</h1> <hr> <div id="app"> <p>{{newPrice}}</p> </div> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ price : 100 }, computed:{ // 不污染原数据，相当于新建了一个对象。 newPrice:function(){ // 1 格式化数据 return this.price = '￥' + this.price + '元' }, } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>propsData Option 实例</title> <script type="text/javascript" src="../assets/js/vue.js"></script> </head> <body> <h1>propsData Option 全局扩展的数据传递</h1> <!-- propsData是用于传值的，主要用于扩展里面 。 即，全局扩展的数据传递 --> <!-- 用到的不多 --> <hr> <!-- 这里的header是自定义标签 --> <header></header> <script type="text/javascript"> var header_a = Vue.extend({ template:`<p>{{mes}} - {{a}}</p>`, data:function(){ return{ mes: 'hello , I am header!' } }, // 2 挂载a props:['a'] }); // 1 propsData传值，传递一个变量a的值1 new header_a({propsData:{a:1}}).$mount('header') </script> </body> </html>
vue入门学习笔记1 下载安装搭建服务教程 vue入门语法 hello world
Vue入门学习笔记2 Vue内部指令整理
Vue入门学习笔记3 vue全局API整理
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
134