vue.js 常用语法总结(一)
概述
2016年已经结束了。你是否会思考一下,自己在过去的一年里是否错过一些重要的东西?不用担心,我们正在回顾那些流行的趋势。通过比较过去12个月里Github所增加的star数,我们利用bestof.js.org分析所涉及的项目技术,发现2016最流行项目有以下这些:图片通过比较去年最火的10个项目,你可以总览2016的web前端技术发展,会发现:Vue.js在去年获得了超过25000个star,这意味着每天有72个star,超过了包含React以及Angular在内的其它任何框架。但是,相信大多数开始接触Vue.js的学习者和笔者一样,面对Vue.js如此多的API方法头晕目,所以笔者为大家整理了一下Vue.js的属性与方法,方便大家回顾(目前是第一部分的內容,下篇會將后継的補充完善)!
一、起步1、v-model(绑定数据)2、v-for(循环)3、v-on(绑定事件)4、data(数据)5、methods(方法)6、$index(索引) 二、概述1、data(绑定 DOM 文本到数据)2、v-if(不满足条件的话则不会出现在dom中)3、v-show(不满足条件,则样式会设置成隐藏 display:none;)4、组件eg:<div id="app3"> <app-nav></app-nav> <!--导航--> <app-view> <app-sidebar></app-sidebar> <!--侧边栏--> <app-content></app-content> <!--展示内容--> </app-view></div><script type="text/javascript"> var vm2=new Vue({ el:"#app2", data:data2});</script> 三、Vue实例1、构造器:Vue.extend2、数据属性:vm.a3、实例属性和方法: 1)vm.$el 2)vm.$data 3)vm.$watch 4)实例生命周期 eg: var vm4 = new Vue({ data: { a: 1 }, beforeCreate:function(){ //创建前 }, created: function(){ console.log('a is: ' + this.a); // `this` 指向 vm 实例 }, beforeMount:function(){ //加载前 }, mounted:function(){ //加载后 }, beforeUpdate:function(){ //更新前 }, updated:function(){ //更新后 }, beforeDestroy:function(){ //销毁前 }, destroyed:function() { //销毁后 } }); 四、数据绑定语法 1、文本插值: {{msg}}2、单次绑定: v-once {{msg}}3、纯HTML: v-html4、绑定表达式: {{number+1}}5、过滤器: {{ message | filterA | filterB }}、{{ message | filterA 'arg1' arg2 }} 6、指令: <p v-if="greeting">Hello!</p> 带参数的指令: <a v-bind:href="url"></a> <a v-on:click="doSomething"></a> 带修饰符的指令: <a v-bind:href.literal="/a/b/c"></a> 指令缩写: <a v-bind:href="url"></a> -> <a :href="url"></a> <button v-bind:disabled="someDynamicCondition">Button</button> -> <button :disabled="someDynamicCondition">Button</button> <a v-on:click="doSomething"></a> -> <a @click="doSomething"></a> 五、Vue实例1、构造器: var data = { a: 1 }; var vm6 = new Vue({ //每个 Vue.js 应用的起步都是通过构造函数 Vue 创建一个 Vue 的根实例 el: '#example', data: data, beforeCreate:function(){}, //创建前 created: function(){ //创建后 console.log('a is: ' + this.a); //`this` 指向 vm 实例 }, beforeMount:function(){}, //加载前 mounted:function(){}, //加载后 beforeUpdate:function(){}, //更新前 updated:function(){}, //更新后 beforeDestroy:function(){}, //销毁前 destroyed:function() {} //销毁后 }); 2、扩展Vue构造器,从而用预定义选项创建可复用的组件构造器: var MyComponent = Vue.extend({ //扩展选项 }); var myComponentInstance = new MyComponent(); //所有的 `MyComponent` 实例都将以预定义的扩展选项被创建 3、属性和方法 console.log( vm6.a === data.a ); //true //设置属性也会影响到原始数据 vm6.a = 2; console.log( data.a ); //2 //反之亦然 data.a = 3; console.log( vm6.a ); //3 vm6.b=5; //注意:只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上,它不会触发视图更新 console.log(data.b); //undefined 4、实例属性与方法:这些属性与方法都有前缀$,以便与代理的数据属性区分 vm6.$data === data //true vm6.$el === document.getElementById('example'); //true vm6.$watch('a', function (newVal, oldVal) {}); //$watch 是一个实例方法,这个回调将在 `vm.a` 改变后调用 六、数据绑定语法1、文本插值: <span>Message:{{ msg }}</span> //每当这个属性变化时它也会更新 <span v-once>This will never change:{{ msg }}</span> //一次性绑定2、纯 HTML: <div v-html="rawHtml"></div> //大括号会将数据解释为纯文本,为了输出真正的 HTML ,需使用 v-html 指令,你不能使用 v-html 来复合局部模板,组件更适合担任 UI 重用与复合的基本单元3、属性: <div v-bind:id="dynamicId"></div>4、绑定表达式: {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} 一个限制是每个绑定只能包含单个表达式,因此下面的语句是无效的: {{ var a = 1 }} //这是一个语句,不是一个表达式 {{ if (ok) { return message } }} //流程控制也不可以,可改用三元表达式5、过滤器: {{ message | capitalize }} //这个过滤器其实只是一个 JavaScript 函数,返回大写化的值 {{ message | filterA | filterB }} //过滤器可以串联 {{ message | filterA 'arg1' arg2 }} //过滤器也可以接受参数:第一个参数—为过滤器函数,带引号的参数—为字符串,不带引号的参数—按表达式计算6、指令: 职责是—当其表达式的值改变时把某些特殊的行为应用到 DOM 上 <p v-if="greeting">Hello!</p> //v-if 指令将根据表达式 greeting 值的真假删除/插入 <p> 元素7、参数: <a v-bind:href="url"></a> //v-bind 指令,用于响应地更新 HTML 特性,用特性插值 href="{{url}}" 可获得同样的结果,但实际上它也是在内部特性插值,转为 v-bind 绑定 <a v-on:click="doSomething"></a> //v-on 指令,用于监听 DOM 事件,参数是被监听的事件的名字8、修饰符:以半角句号 . 开始的特殊后缀,表示指令应当以特殊方式绑定 <a v-bind:href.literal="/a/b/c"></a>9、缩写: <a v-bind:href="url"></a> //完整语法 <a :href="url"></a> //缩写 <a v-on:click="doSomething"></a> //完整语法 <a @click="doSomething"></a> //缩写 七、计算属性 $watch、computed、计算属性的getter、setter属性1、计算属性: var vm = new Vue({ el: '#example', data: { a: 1 }, computed: { b: function () { //一个计算属性的 getter return this.a + 1; //`this` 指向 vm 实例 } } }); console.log(vm.b); //2 vm.a = 2; console.log(vm.b); //32、计算属性 $watch与computed对比: var vm2=new Vue({ el:"#example2", data:{ firstName:'Foo', lastName:'Bar', fullName:'Foo Bar' } }); vm2.$watch('firstName',function(val){ this.fullName=val+' '+this.lastName; }); vm2.$watch('lastName',function(val){ this.fullName=this.firstName+' '+val; }); var vm3=new Vue({ el:'#example2', data:{ firstName:'Foo', lastName:'Bar' }, computed:{ fullName:function(){ return this.firstName+' '+this.lastName; } } });3、计算 setter: var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: { get: function () { //getter return this.firstName + ' ' + this.lastName; }, set: function (newValue) { //setter var names = newValue.split(' '); this.firstName = names[0]; this.lastName = names[names.length - 1]; } } } }); //现在在调用 vm.fullName = 'John Doe' 时,setter 会被调用,vm.firstName 和 vm.lastName 也会有相应更新 八、class与style绑定(数据绑定在data上)1、绑定class 1)对象语法 <div id="box" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div> <div id="box2" v-bind:class="classObject"></div> 2)数组语法 <div id="box3" v-bind:class="[classA,classB]"></div> <div id="box4" v-bind:class="[classA,isB?classB:'']"></div> <div id="box5" v-bind:class="[classA,{classB:isB,classC:isC}]"></div> <!--当有多个条件 class 时,在 1.0.19+ 中,可以在数组语法中使用对象语法--> 2、 绑定内联样式style 1)对象语法 <div id="box6" v-bind:style="{color:activeColor,fontSize:fontSize+'px'}"></div> <div id="box7" v-bind:style="styleObject"></div> 2)数组语法 <div id="box8" v-bind:style="[styleObjectA,styleObjectB]">text</div> <!-- v-bind:style 的数组语法可以将多个样式对象应用到一个元素上--> 九、条件渲染 v-if、v-show、v-else(条件指令不能在实例元素上使用)1、在字符串模板中,如 Handlebars,我们得像这样写一个条件块: {{#if ok}} <h1>Yes</h1> {{/if}} * 注意,以下所有的条件指令,都不能在实例根元素上使用 1)v-if,v-else HTML: <div id="box1"> <h1 v-if="greeting">Yes</h1> </div> <div id="box2"> <h1 v-else="greeting2">No</h1> </div> JS: var vm=new Vue({ el:"#box1", data:{ greeting:false } }); var vm2=new Vue({ el:"#box2", data:{ greeting2:false } }); 2)多个元素v-if,需要将v-if添加到包装元素template上,最终的渲染结果不会包含它 HTML: <div id="box3"> <template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template> </div> JS: var vm3=new Vue({ el:'#box3', data:{ ok:false } }); 3)v-show 指令: 也是根据条件展示元素的选项,但它只是切换display属性。注意,v-show 不支持 <template> 语法 HTML: <div id="box4"> <h1 v-show="ok">Hello!</h1> </div> JS: var vm4=new Vue({ el:"#box4", data:{ ok:false } }); 4)v-else 指令:必须立即跟在v-if/v-show的后面,否则它不能被识别 HTML: <div id="box5"> <div v-if="greeting">Sorry</div> <div v-else>Not sorry</div> </div> JS: var vm5=new Vue({ el:"#box5", data:{ greeting:Math.random()>0.5 } }); 5)v-if、v-show与组件组合使用 HTML: <div id="box6"> <custom-component v-show="condition">1</custom-component> <p v-else>这可能也是一个组件1</p> </div> <div id="box7"> <custom-component v-show="condition">2</custom-component> <p v-show="!condition">这可能也是一个组件2</p> </div> JS: var vm6=new Vue({ el:"#box6", data:{ condition:true } }); var vm7=new Vue({ el:"#box7", data:{ condition:false } }); 6)v-if、v-show对比 在切换 v-if 块时,Vue.js 有一个局部编译/卸载过程,因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染,因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。 v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——在条件第一次变为真时才开始局部编译(编译会被缓存起来)。 相比之下,v-show 简单得多——元素始终被编译并保留,只是简单地基于 CSS 切换。 一般来说,v-if 有更高的切换消耗,而 v-show 有更高的初始渲染消耗。 因此,如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变 v-if 较好。 十、列表渲染 v-for1、v-for: $index、template v-for(items是data中的一个数组) HTML: <li v-for="(index,item) in items">{{ index }}-{{ item.message }}</li> <li v-for="item of items">{{ $index }}-{{ item.message }}</li> <!--从 1.0.17 开始可以使用 of 分隔符,更接近 JavaScript 遍历器语法--> HTML: <ul id="example1"> <template v-for="item in items"> {{ parentMessage }} - {{ $index+1 }} <li>{{ item.msg }}</li> <li class="divider">--------------</li> </template> </ul> JS: var vm1=new Vue({ el:'#example1', data:{ parentMessage:'标题', items:[ { msg:'Foo' }, { msg:'Bar' } ] } }); 2、数组变动检测: 变异方法、非变异方法、track-by、$set、$remove 1)数组方法 a、变异方法:会修改原始数组 ? push() ? pop() ? shift() ? unshift() ? splice() ? sort() ? reverse() b、非变异方法(替换数):不修改原始数组,而返回新数组,可直接用新数组替换旧数组 ? filter() ? concat() ? slice() 这并不会导致 Vue弃用已有DOM,重新渲染整个列表,Vue实现了一些启发算法,最大化复用 DOM 元素,会用新数组替换原始数组 HTML: <ul id="example2"> <li v-for="item in items"> {{ item.message }} </li> </ul> JS: var vm2=new Vue({ el:'#example2', data:{ items:[ { message:'Foo1' }, { message:'Bar1' } ] } }); vm2.items.push({ message:'test1' }); vm2.items = vm2.items.filter(function (item) { return item.message.match(/Foo/); }); 2)track-by:追踪元素,避免无用的重新渲染DOM元素 HTML: <ul id="example3"> <li v-for="item in items" track-by="_uid"> {{item._uid}} </li> </ul> JS: var vm3=new Vue({ el:'#example3', data:{ items:[ { _uid:'88f869d' }, { _uid:'7496c10' } ] } }); /* 在替换数组 items 时,如遇到包含 _uid: '88f869d' 的新对象,Vue可复用这个已有对象的作用域与 DOM 元素, 如没有唯一的键供追踪,可以使用 track-by="$index",它强制让 v-for 进入原位更新模式: -> 片断不会被移动,只是刷新对应索引的新值,这种模式也可处理数据数组中重复的值 -> 数据替换高效,但也会付出一定的代价 -> DOM 节点不再映射数组元素顺序的改变,不能同步临时状态(eg: <input> 元素的值)以及组件的私有状态 -> 如果 v-for 块包含 <input> 元素或子组件,要小心使用 track-by="$index" */ 3)问题: .$set(); .items=[]; 因为 JavaScript 的限制,Vue.js 不能检测到下面数组变化: a.直接用索引设置元素,如 example3.items[0] = {} b.修改数据的长度,如 example3.items.length = 0 为了解决问题1,Vue.js 扩展了观察数组,为它添加了一个 $set() 方法: HTML: <ul id="example4"> <li v-for="item in items"> {{ $index+1 }}—{{ item.childMsg }} </li> </ul> JS: var vm4 = new Vue({ el: '#example4', data: { items: [ { childMsg: 'Foo3' }, { childMsg: 'Bar3' } ] } }); vm4.items.$set(0, { childMsg: 'Changed!'}); //为了解决问题a,Vue.js 扩展了观察数组,为它添加了一个 $set() 方法 vm4.items=[]; //至于问题b,只需用一个空数组替换 items 4)$remove:用于从目标数组中查找并删除元素 HTML: <ul id="example5"> <li v-for="item in items"> {{ $index }}—{{ item.msg }} </li> </ul> JS: var vm5 = new Vue({ el: '#example5', data: { items: [ { msg: 'Foo4' }, { msg: 'Bar4' } ] } }); /* 在内部它调用 splice(),因此,不必这样: var index = this.items.indexOf(item); if (index !== -1) { this.items.splice(index, 1); } 只用这样: this.items.$remove(item); */ vm5.items.filter(function (item) { if(item.msg=='Foo4'){ vm5.items.$remove(item); } }); 3、对象json v-for: $key、value <li v-for="value in object">{{ $key }} : {{ value }}</li> <li v-for="(key,val) in object">{{ key }} {{ val }}</li> <!--也可以给对象的键提供一个别名--> 对象json的遍历,在内部是用的Object.keys遍历,但不同的JS引擎下不是一致的 4、值域: v-for="n in 10" <div id="example6"><span v-for="n in 10">{{ n }} </span></div> 5、显示过滤排序的结果: 想显示过滤/排序过的数组,同时不实际修改或重置原始数据,有2个办法: a、使用内置的过滤器 filterBy 和 orderBy,过滤器更方便 b、创建一个计算属性,返回过滤/排序过的数组,计算属性有更好的控制力,更灵活,因为它是全功能JS 1)filterBy : 限制—指令的值须是数组,eg:v-for a、只显示包含字符串 "hello" 的元素 : <div v-for="item in items | filterBy 'hello'"></div> b、只在用户对象的 name 属性中搜索 "Jack": <div v-for="user in users | filterBy 'Jack' in 'name'"></div> c、使用动态参数作为搜索目标或搜索字段,配合 v-model 我们可以轻松实现输入提示效果: HTML: <div id="example6"> <input v-model="searchText" /> <ul> <li v-for="user in users | filterBy searchText in 'name'"> {{ user.name }} </li> </ul> </div> JS: var vm6=new Vue({ el:'#example6', data:{ searchText:'', users:[ { name:'Bruce' }, { name:'Chuck' }, { name:'Jackid' } ] } }); d、多搜索字段: HTML: <div id="example7"> <input v-model="searchText"> <ul> <li v-for="user in users | filterBy searchText in 'name' 'phone'"> {{ user.name }}-{{ user.phone }} </li> </ul> </div> JS: var vm7=new Vue({ el: '#example7', data: { searchText: '', users: [ { name: 'Bruce', phone:'18701039633' }, { name: 'Chuck', phone:'18700000000' }, { name: 'Jackie', phone:'15811119619' } ] } }); 2)orderBy:限制—指令的值须是数组,eg v-for, 1为升序,-1为降序 a、升序: <li v-for="user in users | orderBy 'phone'">{{ user.name }}-{{ user.phone }}</li> b、降序: <li v-for="user in users | orderBy 'phone' -1">{{ user.name }}-{{ user.phone }}</li> c、原始类型数组: <li v-for="n in 10 | orderBy -1">{{ n }}</li> d、动态排序: HTML: <div id="example8"> <button @click="order = order * -1">Reverse Sort Order</button> <ul> <li v-for="user in users | orderBy 'name' order"> {{ user.name }} </li> </ul> </div> JS: var vm8=new Vue({ el: '#example8', data: { order: 1, users: [ { name: 'Bruce' }, { name: 'Chuck' }, { name: 'Jackie' } ] } }); e、使用两个键名排序: HTML: <div id="example9"> <ul> <li v-for="user in users | orderBy 'name' 'phone' order"> {{ user.name }}-{{ user.phone }} </li> </ul> </div> JS: var vm9=new Vue({ el: '#example9', data: { users: [ { name: 'Bruce', phone:'18701039633' }, { name: 'Chuck', phone:'18700000000' }, { name: 'Jackie', phone:'15811119619' } ] } });
vue.js 常用语法总结(一)相关推荐
- Vue.js 基础语法 入门语句 Vue学习笔记 v-model 双向数据绑定
Vue.js 基础语法,入门语句,Vue学习笔记 学习网站:https://www.bilibili.com/video/BV15741177Eh vue 的体验 响应式:数据一旦改变,视图就会响应改 ...
- Vue.js 模板语法
模板语法 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 H ...
- (6)vue.js基础语法—插值表达式
一.vscode插件介绍 在我们演示插值表达式之前,我们先安装这一个VScode给我们提供的插件,它可以将我们书写好的网页通过服务端口的方式进行访问,同时它的好处还有:再修改代码后,不需要我们手动点击 ...
- 四、Vue.js 模板语法
本章概要 应用程序实例 插值 指令 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将呈现的 DOM 绑定至底层组件实例的数据.所有的 Vue.js 模板都是有效的 HTML ,可以 ...
- vue js基础语法
什么是vue vue是目前前端主流的js框架,它和库的区别在于: 库是更多是一个封装好的特定的集合,提供给开发者使用,而且是特定于某一方面的集合(方法和函数),库没有控制权,控制权在使用者手中,在库中 ...
- Vue.js常用插件
UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...
- (5)vue.js 基础语法—el选项
一.el选项介绍 • 用于选取一个 DOM 元素作为 Vue 实例的挂载目标. • 只有挂载元素内部才会被 Vue 进行处理,外部为普通 HTML 元素. • 代表 MVVM 中的 View 层(视图 ...
- vue.jsv-html,Vue.js常用指令汇总(v-if、v-for等)
JS: var vm = new Vue({ el: '#example03',data: { people: [{ name: 'Jack',age: 30,sex: 'Male' },{ name ...
- vue.js 模板语法
首先在js里创建vue实例,下文中的msg都是vue实例中的数据. 渲染文本 使用{{}}语法 <span>Message: {{ msg }}</span> 修改标签属性 直 ...
- vue.js常用命令
安装webpack: npm install webpack webpack-cli -g 安装vue-cli: npm install -g vue-cli 用 vue-cli 来构建项目: vue ...
最新文章
- 显示股票信息页面的开发
- 强化学习与3D视觉结合新突破:高效能在线码垛机器人
- 现在好用的mysql客户端_还在用 Navicat 的,可以试试这几款免费且好用的 MySQL 客户端...
- 【机器学习实战】意大利Covid-19病毒感染数学模型及预测
- 一个c++ 2d图形引擎 AGG
- Java必备技能:IDEA一定要懂的32条快捷键
- C++中的floor()函数
- Swing JTree用法总结
- C++ 定时器使用和停止
- 【神器】这三款网络抓包工具在手,同事想甩锅都难!
- java即时通讯 开源_java开源即时通讯软件服务端openfire源码构建
- Android stdio报错:“xxx keeps stopping“解决方案
- C++ 计算球体体积
- RN Error: 无法获取此包的编译时间戳。请更新react-native-update到最新版本后重新打包上传。
- 超详细的Python实现百度云盘模拟登陆(模拟登陆进阶) 1
- 学了python不知干啥?爬爬虫! (1)保存网络图片
- PMP笔记-区分质量保障(QA)和质量控制(QC)
- java finally关闭文件流_Java如何正确的使用try catch finally关闭文件流的总结
- 大力智能台灯T6 结构拆解
- HDFS的shell命令简介
热门文章
- 优化理论17----wolfe_Powell准则、Wo1fe-Powell搜索法
- jupyter快捷键、markdown语法及markdown的算式语法
- PHP获取对象的hashcode_php 字符串转hashcode(包括中文)
- 动画算计算机专业吗,能够定义角色功能的计算机动画系统属于。 (1.0分)
- 使用std:sort和Eigen根据矩阵某一行/列元素对矩阵的行/列排序
- itext生成pdf间距_跳过APP打开pdf的烦恼,服务端直接将pdf转图片,别踩乱码之坑...
- 力扣-387 字符串中的第一个唯一字符
- Flutter 进阶系列篇
- Flutter高级第3篇:底部 Tab 切换保持页面状态的几种方法
- Flutter功能 组件描边,圆角