Vue2 基础一指令

代码下载

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，官网。

Vue基本使用

如何利用Vue将hello world 渲染到页面上
1、需要提供标签用于填充数据，在标签中使用插值语法的形式即 {{}} 进行填充数据，插值表达式支持基本的计算操作。

2、引入vue.js库文件，一定要先引入Vue文件在使用Vue语法因为存在作用域的问题。

3、使用vue的语法做功能，使用 new Vue() 创建一个Vue的实例，在构造函数中以对象的形式做一些配置：

el：元素的挂载位置（值可以是CSS选择器或者DOM元素）
data：模型数据（值是一个对象）

4、利用Vue将数据渲染到页面上，数据写在data里面。

    <h2>Hello world!</h2><div id="app1"><div>{{msg}}</div><div>{{1 + 2}}</div><div>{{msg + 'a' + 'b'}}</div></div><script src="../js/vue.js"></script><script>let vm = new Vue({el: '#app1',data: {msg: 'Hello Vue!'}});</script>

编译过程（Vue语法→原生语法）

Vue模板语法

前端渲染方式：

原生js拼接字符串——（缺点：不同开发人员的代码风格差别很大，随着业务的复杂，后期的维护变得逐渐困难起来。）
使用前端模板引擎——（优点：大家都遵循同样的规则写代码，代码可读性明显提高了，方便后期的维护。缺点：没有专门提供事件机制。）
使用vue特有的模板语法

指令

指令的本质就是自定义属性，指令的格式：以v-开始（比如：v-cloak）

v-cloak指令

插值表达式存在“闪动”的问题，使用v-cloak指令可以解决该问题，原理就是先通过属性选择器隐藏，替换好值之后 v-cloak 属性会被自动去除再显示最终的值。

        <div v-cloak>{{msg}}</div>

数据绑定指令

v-text 指令填充纯文本:

用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
如果数据中有HTML标签会将html标签一并输出

注意:此处为单向绑定，数据对象上的值改变，插值会发生变化;但是当插值发生变化并不会影响数据对象的值

v-html 指令填充HTML片段：

存在安全问题
本网站内部数据可以使用，来自第三方的数据不可以用
它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出

v-pre 指令填充原始信息：

显示原始信息，跳过这个元素和它的子元素的编译过程（分析编译过程）

    <div class="main" id="app"><div>{{msg1}}</div><div v-text="msg1"></div><div v-html="msg1"></div><div v-pre>{{msg1}}</div></div><script src="../js/vue.js"></script> <script>let vm = new Vue({el: '#app',data: {msg1: '<h1>Hello Vue</h1>'}});</script>

响应式

html5中的响应式（屏幕尺寸的变化导致样式的变化）
数据的响应式（数据的变化导致页面内容的变化）

v-once 只编译一次：

显示内容之后不再具有响应式功能

        <div v-once>{{msg1}}</div>

mvvm：
MVVM是前端视图层的概念，主要关注于视图层分离，也就是说MVVM把前端的视图层，分为了三部分 Model, View , ViewModel：

m model，数据层 Vue 中数据层都放在 data 里面
v view 视图，Vue 中 view 即 HTML页面
vm (view-model) 控制器将数据和视图层建立联系，vm 即 Vue 的实例就是 vm

双向数据绑定

v-model指令，限制在 <input>、<select>、<textarea>、components 中使用

        <input type="text" v-model="msg">

事件绑定

v-on 用来绑定事件的，形式如: v-on:click 缩写为 @click：

    <div class="main" id="app"><!-- 在 html 中使用 data 里面的数据不需要使用 this --><button v-on:click="num++">按钮1</button><button @:click="num++">按钮1</button></div><script src="../js/vue.js"></script><script>let vm = new Vue({el: '#app',data: {num: 0}});</script>

事件函数的调用方式，可以直接绑定函数名称或者调用函数, Vue的实例的 methods 中主要定义函数：

    <div class="main" id="app"><button @click="say">按钮3</button><button @click="say()">按钮4</button></div><script src="../js/vue.js"></script><script>let vm = new Vue({el: '#app',methods: {handle: function() {// 在函数中 使用data里面的数据 一定要加this console.log('num: ', this.num);}}});</script>

事件函数参数传递：

如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event

    <div class="main" id="app"><button @click="handle1">按钮5</button><button @click="handle2(1, 2, $event)">按钮6</button></div><script src="../js/vue.js"></script><script>let vm = new Vue({el: '#app',methods: {handle1: function(e) {console.log(e.target.innerHTML);},handle2: function(p1, p2, e) {console.log('p1: ', p1);console.log('p2: ', p2);console.log(e.target.innerHTML);}}});</script>

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。 Vue 不推荐我们操作DOM 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符修饰符是由点开头的指令后缀来表示的

.stop 阻止冒泡
.prevent 阻止默认行为
.self 只有事件从元素本身发出才触发处理函数

        <div @click="handle" style="background-color: red;"><button @click="handle1">按钮1</button><a href="https://www.baidu.cn/" @click.prevent="handle">百度</a><button @click.stop="handle1">按钮2</button></div><div @click.self="handle" style="background-color: cyan;"><button @click="handle1">按钮3</button></div>

使用修饰符时，顺序很重要;相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

在监听键盘事件时，经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符，常用的按键修饰符：

.enter 回车键
.esc 退出键
.tab tab键
.delete 删除键(捕获“删除”和“退格”按键)
.space 空格键
.up 上
.down 下
.left 左
.right 右
.keyCode 监听特定 keyCode 值对应的按键（例如 .65-a）

        <input type="text" v-on:keyup.enter.delete.left.up="handle"><input type="text" v-on:keyup.65="handle">

在Vue中可以通过全局 config.keyCodes 对象，自定义按键修饰符别名：

    <div class="main" id="app"><input type="text" v-on:keyup.kbA="handle"></div><script src="../js/vue.js"></script><script>Vue.config.keyCodes.kbA = 65;let vm = new Vue({el: '#app',methods: {handle: function() {// 在函数中 使用data里面的数据 一定要加this console.log('num: ', this.num);}}});</script>

简单计算器案例

实现简单的加法计算，分别输入数值a和数值b，点击计算按钮，结果显示在下面：

通过v-model指令实现数值a和数值b的绑定
给计算按钮绑定事件，实现计算逻辑
将计算结果绑定到对应位置

    <div class="main" id="app"><h4>简单计算器案例</h4><div><span>数值A：</span><input type="text" v-model="a"> <br /><span>数值B：</span><input type="text" v-model="b"> <br /><button v-on:click="plus">相加计算</button> <br /><span>结果：</span><span v-text="result"></span></div></div><script>let vm = new Vue({el: '#app',data: {a: '',b: '',result: ''},methods: {plus: function() {this.result = parseInt(this.a) + parseInt(this.b);}}});</script>

属性绑定

v-bind 指令被用来响应地更新 HTML 属性，v-bind:href 可以缩写为 :href

    <div class="main" id="app"><a v-bind:href="baiduUrl">百度</a><a :href="baiduUrl">百度1</a></div><script>Vue.config.keyCodes.kbA = 65;let vm = new Vue({el: '#app',data: {baiduUrl: 'https://www.baidu.cn/'}});

v-model的低层实现原理是使用 v-bind 绑定 value 属性，使用 v-on 将输入域中的最新的数据覆盖原来的数据：

    <div class="main" id="app"><!-- v-model原理 --><div>{{msg}}</div><input type="text" v-bind:value="msg" v-on:input="inputHandle"><input type="text" :value="msg" @input="msg = $event.target.value;"></div><script src="../js/vue.js"></script><script>let vm = new Vue({el: '#app',data: {msg: 'Hello Vue!'},methods: {inputHandle: function(e) {this.msg = e.target.value;}}});</script>

class 样式绑定

class 样式处理有对象绑定和数组绑定两种：

    <style>.active {border: 1px solid red;width: 100px;height: 100px;}.err {background-color: orange;}</style><div class="main" id="app"><!-- 绑定对象 --><div v-bind:class="{active: isActive, err: isErr}">绑定对象</div><!-- 绑定数组 --><div v-bind:class="[activeClass, errClass]">绑定数组</div><!-- 对象绑定和数组绑定可以结合使用 --><div v-bind:class="[activeClass, errClass, {text: isText}]">对象绑定和数组绑定可以结合使用</div><!-- class绑定的值可以简化操作 --><div :class="objClasses">class绑定的值可以简化操作</div><div :class="arrClasses">class绑定的值可以简化操作</div><!-- 默认的class会保留 --><div class="default" :class="objClasses">默认的class会保留</div><button v-on:click="classHandle">切换</button></div><script src="../js/vue.js"></script><script>let vm = new Vue({el: '#app',data: {isActive: true,isErr: true,isText: true,activeClass: 'active',errClass: 'err',textClass: 'text',arrClasses: ['active', 'err', 'text'],objClasses: {active: true, err: true, text: true}},methods: {classHandle: function() {this.isActive = !this.isActive;this.isErr = !this.isErr;this.isText = !this.isText;if (this.activeClass === '') {this.activeClass = 'active';} else {this.activeClass = '';}if (this.errClass === '') {this.errClass = 'err';} else {this.errClass = '';}this.objClasses.active = !this.objClasses.active;this.objClasses.err = !this.objClasses.err;this.objClasses.text = !this.objClasses.text;if (this.arrClasses.length > 0) {this.arrClasses = [];} else {this.arrClasses = [this.activeClass, this.errClass, this.textClass];}}}});

绑定对象和绑定数组的区别：

绑定对象的时候对象的属性即要渲染的类名对象的属性值对应的是 data 中的数据（表示是否渲染的布尔值）
绑定数组的时候数组里面存的是 data 中的数据（表示类名）

样式绑定相关语法细节：

对象绑定和数组绑定可以结合使用
class绑定的值可以简化操作
默认的class如何处理？默认的class会保留

style样式绑定

style 样式处理也有对象绑定和数组绑定两种：
CSS 属性名可以用驼峰式
组语法可以将多个样式对象应用到同一个元素

    <div class="main" id="app"><div :style="{border: borderStyle, width: widthStyle, height: heightStyle}"></div><div :style="objStyles"></div><div :style="[objStyles, overrideStyles]"></div><button @click="styleHandle">切换</button></div><script src="../js/vue.js"></script><script>let vm = new Vue({el: '#app',data: {borderStyle: '1px solid blue',widthStyle: '100px',heightStyle: '200px',objStyles: {border: '1px solid green',width: '200px',height: '100px'},overrideStyles: {border: '5px solid orange',backgroundColor: 'blue'}},methods: {styleHandle: function() {if (this.heightStyle === '100px') {this.heightStyle = '200px';} else {this.heightStyle = '100px';}if (this.objStyles.width === '100px') {this.objStyles.width = '200px';} else {this.objStyles.width = '100px';}}}});

分支结构

v-if，v-else，v-else-if，v-show

v-if与v-show的区别：

v-if控制元素是否渲染到页面，是动态的向DOM树内添加或者删除DOM元素，v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件。
v-show控制元素是否显示（已经渲染到了页面），本质就是标签display设置为none，控制隐藏，v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。

    <div class="main" id="app"><!-- 分支结构 --><div v-if="score>=90">优秀</div><div v-else-if="score<90&&score>=80">良好</div><div v-else-if="score<80&&score>=60">一般</div><div v-else>差</div><div v-show="flag">v-show</div><button @click="showHandle" v-text="flag ? '隐藏' : '显示'"></button></div><script src="../js/vue.js"></script><script>let vm = new Vue({el: '#app',data: {score: 99,flag: true},methods: {showHandle: function() {this.flag = !this.flag;}}});

循环结构

v-for 用于循环的数组、对象里面的值可以是对象，也可以是普通元素：

不推荐同时使用 v-if 和 v-for，当 v-if 与 v-for 一起使用时， v-for 具有比 v-if 更高的优先级。
key 给每个节点做一个唯一标识（一般使用数据的id或者遍历序号），key的作用主要是帮助Vue区分不同的元素，从而提高性能，高效的更新虚拟DOM。

    <div class="main" id="app"><!-- 循环结构 --><div :key="value.id" v-for="(value, index) in fruits"><div v-if="value.id>1" :key="i" v-for="(v, k, i) in value" v-text="k + ': ' + v"></div></div></div><script src="../js/vue.js"></script><script>let vm = new Vue({el: '#app',data: {fruits: [{id: 1,ename: 'apple',cname: '苹果'},{id: 2,ename: 'orange',cname: '橘子'},{id: 3,ename: 'banana',cname: '香蕉'}]}});

Tab选项卡案例

把tab栏中的数替换到页面上：

把 data 中 title 利用 v-for 循环渲染到页面上
把 data 中 path 利用 currentIndex 序号取出渲染到页面上

默认的第一项tab栏高亮：

tab栏高亮通过添加类名 current 来实现 (CSS current 的样式已经提前写好)
在data 中定义一个默认的索引 currentIndex 为 0 给第一个li 添加 current 的类名
通过动态绑定class 来实现第一个li 的索引为 0 和 currentIndex 的值刚好相等
currentIndex === i 如果相等则添加类名 current 否则添加空类名

点击每一个tab栏当前的高亮其他的取消高亮：

给每一个li添加点击事件
将 v-for 循环中的索引 i 赋值给 currentIndex

css：

        .tab > ul {list-style: none;margin: 0;padding: 0;}.tab > ul > li {float: left;width: 80px;height: 40px;line-height: 40px;text-align: center;border-top: 1px solid blue;border-left: 1px solid blue;box-sizing: border-box;}.tab > ul > li.current {background-color: orange;}.tab > ul > li:last-child {border-right: 1px solid blue;}.tab > div {clear: both;}

html:

    <div class="main" id="app"><div class="tab"><ul><li :class="currentIndex === i ? 'current' : ''" :key="v.id" v-for="(v, i) in list" v-text="v.title" @click="currentIndex = i"></li></ul><div><img v-bind:src="'../' + list[currentIndex].path" alt=""></div></div></div>

js：

    <script src="../js/vue.js"></script><script>let vm = new Vue({el: '#app',data: {currentIndex: 0, // 选项卡当前的索引list: [{id: 1,title: 'apple',path: 'img/apple.png'},{id: 2,title: 'orange',path: 'img/orange.png'},{id: 3,title: 'lemon',path: 'img/lemon.png'}]}});