- A+
所属分类：Web前端
- 1.简介
- 2.MVVM 模式的实现者——双向数据绑定模式
- 3.其它 MVVM 实现者
- 1）数据驱动
- 2）组件化
- 1.插值表达式
- 2.MVVM双向数据绑定：v-model
- 3.事件绑定: v-on
- 4.事件绑定简化版：使用@替换v-on:
- 5.属性绑定： v-bind
- 6.v-once指令
- 7.v-html
- 8.v-text
- 1.事件绑定范例
- 2.参数传递
- 3.停止鼠标事件
- 4.事件修饰符
- 1.插值表达式的方式
- 2.计算属性：computed
- 3.watch的用法：监控
- 1.class的动态绑定
- 2.加入computed
- 3.双向绑定的体现
- 4.多个样式的操作
- 5.通过style设置样式
- 6.使用computed设置样式
- 7.设置style属性的多个样式
- 1.分支语句
- 2.循环语句
一、什么是 Vue
1.简介
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式的js框架，发布于 2014 年 2 月。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库（如：vue-router，vue-resource，vuex）或既有项目整合。 MVC
2.MVVM 模式的实现者——双向数据绑定模式
- Model：模型层，在这里表示 JavaScript 对象
- View：视图层，在这里表示 DOM（HTML 操作的元素）
- ViewModel：连接视图和数据的中间件，Vue.js 就是 MVVM 中的 ViewModel 层的实现者
在 MVVM 架构中，是不允许 数据 和 视图 直接通信的，只能通过 ViewModel 来通信，而 ViewModel 就是定义了一个 Observer 观察者
- ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新
- ViewModel 能够监听到视图的变化，并能够通知数据发生改变
至此，我们就明白了，Vue.js 就是一个 MVVM 的实现者，他的核心就是实现了 DOM 监听 与 数据绑定
3.其它 MVVM 实现者
- AngularJS
- ReactJS
- 微信小程序
4.为什么要使用 Vue.js
- 轻量级，体积小是一个重要指标。Vue.js 压缩后有只有 20多kb （Angular 压缩后 56kb+，React 压缩后 44kb+）
- 移动优先。更适合移动端，比如移动端的 Touch 事件
- 易上手，学习曲线平稳，文档齐全
- 吸取了 Angular（
模块化）和 React（虚拟 DOM）的长处，并拥有自己独特的功能，如：计算属性 - 开源，社区活跃度高
5.Vue.js 的两大核心要素
1）数据驱动
当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器。
这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。这里需要注意的问题是浏览器控制台在打印数据对象时 getter/setter 的格式化并不同，所以你可能需要安装 vue-devtools 来获取更加友好的检查接口。
每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。
2）组件化
- 页面上每个独立的可交互的区域视为一个组件
- 每个组件对应一个工程目录，组件所需的各种资源在这个目录下就近维护
- 页面不过是组件的容器，组件可以嵌套自由组合（复用）形成完整的页面
二、快速开始
- 1.在页面引入vue的js文件即可。
注意：cdn是一种加速策略，能够快速的提供js文件
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script> - 2.在页面中绑定vue元素
创建一个div，id是app <div id="app"></div> - 3.创建vue对象，设计对象的内容
其中该vue对象，绑定了页面中id是app的那个div
<script> new Vue({ el:"#app", data:{ title:"hello vue!", args1:"hi!", age:18, flag:true } }); </script> - 4.在页面的元素中使用插值表达式来使用vue对象中的内容
<div id="app"> {{ title }} </div> 三、 插值表达式
插值表达式的作用是在View中获得Model中的内容
1.插值表达式
<div id="app"> {{title}} {{[1,2,3,4][2]}} {{ {"name":"xiaoyu","age":20}.age }} {{ sayHello()}} new Vue({ el:"#app", data:{ title:"hello world!" }, methods:{ sayHello:function(){ return "hello vue"; } } }); 2.MVVM双向数据绑定：v-model
<div id="app"> <input type="text" v-model="title" /> </div> 3.事件绑定: v-on
<input type="text" v-on:input="changeTitle" /> v-on叫绑定事件，事件是input，响应行为是changeTitle。也就是说，当input元素发生输入事件时，就会调用vue里定义的changeTitle方法
new Vue({ el:"#app", data:{ title:"hello world!" }, methods:{ sayHello:function(){ return "hello vue"; }, changeTitle:function(){ console.log("ct");//往日志里写 } } }); event.target.value == 当前事件的对象（input元素）的value值
注意：此时的this指的是当前vue对象。
所以：如果在method里要想使用当前vue对象中的data里的内容，必须加上this.
changeTitle:function(event){ this.title = event.target.value; } 4.事件绑定简化版：使用@替换v-on:
<input type="text" @input="changeTitle" /> 5.属性绑定： v-bind
html里的所有属性，都不能使用插值表达式
<a href="{{link}}">baidu</a> new Vue({ el:"#app", data:{ title:"hello world!", link:"http://www.baidu.com" }, ... 上面的这种做法是错误的，可以使用绑定属性绑定来解决：
要想在html的元素中的属性使用vue对象中的内容，那么得用v-bind进行属性绑定
<a v-bind:href="link">baidu</a> 可以缩写成 冒号 <a :href="link">baidu</a> 6.v-once指令
指明此元素的数据只出现一次，数据内容的修改不影响此元素
<p v-once>{{titile}}</p> 7.v-html
就好比是innerHTML
<p v-html="finishedlink"></p> new Vue({ el:"#app", data:{ title:"hello world!", link:"http://www.baidu.com", finishedlink:"<a href='http://www.baidu.com'>百度</a>" }, ... 8.v-text
纯文本输出内容
<p v-text="finishedlink"></p> 四、事件
1.事件绑定范例
- 范例一：
<div id="app"> <button type="button" v-on:click="increase">click</button> <p> {{counter}} </p> new Vue({ el:"#app", data:{ counter:0 }, methods:{ increase:function(){ this.counter++; }, ... - 范例二：
<p v-on:mousemove="mo">mooooooo</p> mo:function(event){ console.log(event); } - 范例三：
<p v-on:mousemove="mo"> mx:{{x}} my:{{y}} </p> new Vue({ el:"#app", data:{ counter:0, x:0, y:0, }, methods:{ increase:function(){ this.counter++; }, mo:function(event){ this.x = event.clientX, this.y = event.clientY } } }); 2.参数传递
<button type="button" v-on:click="increase(2)">click</button> ... methods:{ increase:function(step){ this.counter+=step; }, ... 传多个参数：
<button type="button" v-on:click="increase(2,event)">click</button> ... methods:{ increase:function(step,event){ this.counter+=step; }, ... 3.停止鼠标事件
<p v-on:mousemove="mo"> mx:{{x}} my:{{y}} ---<span v-on:mousemove="dummy">停止鼠标事件</span> </p> dummy:function(event){ event.stopPropagation(); } 另一种方式：
<span v-on:mousemove.stop>停止鼠标事件</span> 4.事件修饰符
输入回车键时提示
<input type="text" v-on:keyup.enter="alertE"/> 输入空格时提示
<input type="text" v-on:keyup.space="alertE"/> 五、vue改变内容——虚拟dom和diff算法
1.插值表达式的方式
- 范例一：
{{ count>10？"大于10","小于10"}} - 范例二：
<p> {{result}} </p> new Vue({ el:"#app", data:{ counter:0, result:"" }, methods:{ increase:function(step){ this.counter+=step; this.result=this.counter>10?"大于10":"小于10" }, } }); 2.计算属性：computed
1) 什么是计算属性
计算属性的重点突出在 属性 两个字上（属性是名词），首先它是个 属性 其次这个属性有 计算 的能力（计算是动词），这里的 计算 就是个函数；简单点说，它就是一个能够将计算结果缓存起来的属性（将行为转化成了静态的属性），仅此而已；
2) 计算属性与方法的区别
完整的 HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>布局篇 计算属性</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> </head> <body> <div id="vue"> <p>调用当前时间的方法：{{currentTime1()}}</p> <p>当前时间的计算属性：{{currentTime2}}</p> </div> <script type="text/javascript"> var vm = new Vue({ el: '#vue', data: { message: 'Hello Vue' }, methods: { currentTime1: function () { return Date.now(); } }, computed: { currentTime2: function () { this.message; return Date.now(); } } }); </script> </body> </html> 说明
methods：定义方法，调用方法使用currentTime1()，需要带括号computed：定义计算属性，调用属性使用currentTime2，不需要带括号；this.message是为了能够让currentTime2观察到数据变化而变化
注意：methods 和 computed 里不能重名
3) 测试效果
仔细看图中说明，观察其中的差异
4) 结论
调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢？此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点；计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销
3.watch的用法：监控
watch用于监控参数的变化，并调用函数，newVal是能获得参数新的值，oldVal是参数老的值。
new Vue({ el:"#app", data:{ counter:0, result:"" }, methods:{ increase:function(step){ this.counter+=step; //this.result=this.counter>10?"大于10":"小于10" }, getResult:function(){ return this.counter>10?"大于10":"小于10" } }, computed:{ getResultComputed:function(){ return this.counter>10?"大于10":"小于10" } }, watch:{ counter:function(newVal,oldVal){ this.result=newVal>10?"大于10":"小于10" } } }); watch的高端用法：
一秒后让count归为0，体现了vue的双向绑定
watch:{ counter:function(newVal,oldVal){ this.result=newVal>10?"大于10":"小于10"; var vm = this;//当前data setTimeout(function(){ vm.counter = 0; },1000); } } 六、vue改变样式
1.class的动态绑定
v-bind:class="{red:attachRed}" 键名是类名，键值是布尔，如果是true，则将指定的类名绑定在元素上，如果是false，则不绑定。
<head> <meta charset="UTF-8"> <title>下午</title> <style> .demo{ width:100px; height:100px; background-color:gray; display:inline-block; margin:10px; } .red{background-color: red;} .green{background-color: green;} .blue{background-color: blue;} </style> </head> <body> <div id="app"> {{attachRed}} <div class="demo" @click="attachRed=!attachRed" v-bind:class="{red:attachRed}"> </div> <div class="demo"></div> <div class="demo"></div> </div> <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script> <script> new Vue({ el:"#app", data:{ attachRed:false } }); </script> </body> 2.加入computed
<div class="demo" :class="divClasses"></div> new Vue({ el:"#app", data:{ attachRed:false }, computed:{ divClasses:function(){ return {//返回一个json对象 red:this.attachRed, blue:!this.attachRed } } } }); 3.双向绑定的体现
在input中输入颜色，就可以设置div的class
<div id="app"> <input type="text" v-model="color"/> {{attachRed}} <div class="demo" @click="attachRed=!attachRed" v-bind:class="{red:attachRed}"></div> <div class="demo"></div> <div class="demo" :class="divClasses"></div> <div class="demo" :class="color"></div> </div> <script> new Vue({ el:"#app", data:{ attachRed:false, color:"green" }, ... 4.多个样式的操作
.red{background-color: red;color: white;} <div class="demo" :class="[color,{red:attachRed}]">hahaha</div> 5.通过style设置样式
<div class="demo" :style="{backgroundColor:color}"></div> 设置div的style属性的值，style里放json对象，键是驼峰式写法，值是变量color
6.使用computed设置样式
<div class="demo" :style="myStyle"></div> <input type="text" v-model="width"/> new Vue({ el:"#app", data:{ attachRed:false, color:"green", width:100 }, computed:{ divClasses:function(){ return {//返回一个json对象 red:this.attachRed, blue:!this.attachRed } }, myStyle:function(){ return { backgroundColor:this.color, width:this.width+"px" } } } }); </script> 7.设置style属性的多个样式
<div class="demo" :style="[myStyle,{height:width*2+'px'}]"></div> 七、vue中的语句
1.分支语句
- v-if
- v-else-if
- v-else
- v-show: 实际上是让该元素的display属性为none,隐藏的效果。所以性能更好。
<div id="app"> <p v-if="show">hahah</p> <p v-else>hohoho</p> <p v-show="show">hehehe</p> <input type="button" @click="show=!show" value="dianwo"/> </div> <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script> <script> new Vue({ el:"#app", data:{ show:false } }); </script> 通过模板标签对多个元素进行同一的if和else管理
<template v-if="show"> <h1>heading</h1> <p>inside text</p> </template> 2.循环语句
vue中只有for循环
<body> <div id="app"> <ul> <li v-for="str in args"> {{str}} </li> </ul> </div> <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script> <script> new Vue({ el:"#app", data:{ args:["a","b","c","d"] } }); </script> </body> 改进版：for语句里，key建议加上，作为标识.i是下标
<ul> <li v-for="(str,i) in args" :key="i"> {{str}}{{i}} </li> </ul> 使用templete实现循环
<template v-for="(str,i) in args":key="i"> <p>{{str}}{{i}}</p> </template> 循环中操作对象
<template v-for="person in persons"> <p> <span v-for="value in person"> {{value}} </span> </p> <p> <span v-for="(v,k,i) in person"> {{k}}:{{v}}:{{i}}==== </span> </p> </template> <script> new Vue({ el:"#app", data:{ args:["a","b","c","d"], persons:[ {name:"xy",age:20,color:"red"}, {name:"yh",age:18,color:"green"} ] } }); </script> 循环的另一种用法：
v-for="n in 10" //可以在分页组件中使用 <nav> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <!--======v-for====--> <li v-for="n in 10"><a href="#">{{n}}</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> 八、总结
vue是以数据为驱动，渐进式的web框架，MVVM双向绑定，虚拟DOM为核心和diff算法，所谓的虚拟dom和diff算法，是指当页面内容发生变化时，只更新改变的部分，是通过虚拟dom和diff算法实现这样的操作，效率非常高。
