Vue：核心技术

一、模板语句之插值语法{{}}

1、{{可以写什么}}：

①在data中声明的变量，函数都可以。②常量都可以。③只要是合法的JavaScript表达式都可以

④模板表达式都被放在沙盒中，只能访问全局变量的一个白名单：

 'Infinity,undefined,NaN,isFinite,isNaN,'  'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' 'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,'  'require'

2、注意：不能使用全局变量或者全局函数，只能用data里面的变量和函数。

二、模板语句之指令语句

指令的作用：当表达式的值改变时，将其产生的连带影响，响应式的作用于DOM。

1、vue框架中

所有的指令名字都以"v-"开头、都是以HTML标签的属性形式存在的，例如

<h1 v-once>{{msg}}</h1>
<h1 v-if="a < b">{{msg}}</h1>

需要注意的是：虽然指令写在标签的属性位置上，但是这个指令浏览器是看不懂的，需要vue框架进行编译，浏览器才能看懂。

2、vue框架的语法规则

<HTML标签 v-指令名:参数="JavaScript表达式"></HTML标签>

表达式：插值语法{{这里写什么}}，指令就可以写什么，但是不能在增加{{}}。

有的指令不需要参数和表达式 ，——> v-once、

有的指令不需要参数，但需要表达式 ，——> v-if = "表达式"、

有的指令需要参数和表达式 ，——> v-bind:参数 = "表达式"

3、v-once指令

作用：只渲染元素一次，重新渲染之后该元素跳过重复渲染。

4、v-if = "表达式"

作用：表达式的执行结果需要是一个布尔型的数据：true || false

    <div class="vues"><h1>{{msg}}</h1><h1 v-once>{{msg}}</h1><h1 v-if="a < b">{{msg}}</h1><h1 v-if="a < b">{{msg}}</h1></div><script>new Vue({el: '.vues',data: {msg: 'haibiao',a: 1,b: 2}})</script>

5、v-bind:参数 = "表达式"指令

单向数据绑定：data——>视图(view)

这个指令可以让HTML标签的某个属性的值产生动态的效果。两种写法

<HTML标签 :参数="表达式"></HTML标签>

<HTML标签 v-bind:参数="表达式"></HTML标签>

当标签体中的数据想要动态，使用插值语法，HTML标签的属性动态，使用指令语法。

    <div class="vues"><span v-bind:xyz="msg"></span><input type="text" name="username" :value="uname"><input type="text" name="username" v-bind:value="uname"></div><script>new Vue({el: '.vues',data: {msg: 'pang',uname: 'Mr.pang'}})</script>

6、v-model:value="表达式"指令

双向数据绑定：data<——>视图(view)

只能使用在表单类型的value元素上，因为表单类的元素才能给用户提供交互输入的界面。

<HTML标签 v-model:value=参数="表达式"></HTML标签>

<HTML标签 v-model="表达式"></HTML标签>

7、Object.defineProperty()

这个方法是：给对象新增属性，或者设置对象原有的属性。

Object.defineProperty(给哪个对象新增属性，'新增的这个属性名叫什么'，{给新增的属性设置相关的配置项key:value 对})

第三个参数的配置项：

value 配置项：给属性赋值

writable：设置该属性的值是否可以被修改，true：可以，false：不行

getter方法：当读取属性值的时候自动调用，getter方法的返回值就代表属性的值。

setter方法：当修改值的时候自动调用，setter方法上的参数用来接收传过来的值。

注意：当setter，getter方法存在，value和writable不能存在。

enumerable：设置属性是否能遍历，false：不可遍历，true：可遍历。

 configurable：表示属性是否能被删除，false：不能，true：能。 

    <script>let phone = {}Object.defineProperty(phone, 'color', {// value: '翡翠绿',// writable: true,get: function () {console.log('getter方法执行了');// return 'success'return this.color},set: function (val) {console.log('setter方法执行了' + val);this.color = val}})</script>

8、代理机制

通过访问  代理对象的属性  来间接访问  目标对象的属性。依靠Object.defineProperty()实现。

    <script>let target = {name: 'pang'}let proxy = {}Object.defineProperty(proxy, 'name', {get: function () {return target.name},set: function (val) {target.name = val}})</script>

9、v-on:事件名='表达式'

v-on:click='表达式' 表示当发生鼠标单击事件之后，执行表达式。

v-on:keydown='表达式' 表示当发生键盘按下事件之后执行表达式。v-on可以写成@

在vue中，所有事件所关联的回调函数，需要在vue实例的配置项methods中进行定义。

method是是一个对象{}, 在这个methods对象中可以定义多个回调函数。

Vue在调用回调函数的时候，会自动给回调函数传递一个对象，这个对象是：当前发生的事件对象

在绑定回调函数的时候，可以在回调函数的参数上使用$event占位符,vue看见$event自动将当前事件以对象的形式传过去。

    <div class="vues"><button v-on:click="sayHello()">hello</button><button @click="sayHello()">hello</button><button @click="sayHi($event,'pang')">hello</button></div><script>new Vue({el: '.vues',methods: {// sayHello: function () {//     alert('nihao')// }sayHello() {alert("hi")},sayHi(event, name) {console.log(event, name);}}})</script>

10、事件修饰符

.stop： 停止事件冒泡，相当于e.stopPropagation()。从内到外添加

.prevent： 阻止事件的默认行为，e.preventDefault()。

.capture： 添加事件监听器时使用事件捕获模式，事件.capture。从外向内添加

.self： 这个事件如果是“我自己元素”上发生的事件，这个事件不是别人传递给我的，执行程序。

.once：事件只发生一次。

.passive：无需等待，直接继续执行事件的默认行为。解除阻止。

.passive和.prevent修饰符是对立的，不可以共存。

11、按键修饰符

常用的按键修饰符：.enter、.tab(需要配合keydown事件使用)、.delete(捕获“删除”和“退格”键)、.esc、.space、.up、.down、.left.、right

    <div class="vues">tab:<input type="text" @keydown.tab="get">enter<input type="text" @keyup.enter="get">page-down<input type="text" @keyup.page-down="get">page-up<input type="text" @keyup.page-up="get">回车<input type="text" @keyup.huiche="get"></div><script>Vue.config.keyCodes.huiche = 13new Vue({el: '.vues',methods: {get(e) {console.log(e.target.value);}}})</script>

通过e.key获取这个键的真是名字，将真实名字以kebab-case风格进行命名。

自定义按键修饰符：通过Vue全局配置对象config来进行按键修饰符的自定义，即

Vue.config.keyCodes.huiche = 13

系统修饰符：ctrl、alt、shift、meta。

对于keydown事件来说：只要按下ctrl就会触发keydown事件

对于keyup事件来说：需要按下ctrl，并且加上按下组合键，然后松开组合键之后才能触发

12、关于this

如果使用箭头函数，this指向window；不使用，指向当前的Vue。

13、计算属性(computed)

当你调用某个方法时，直接调用会执行多次，如果使用计算属性，只要不修改值，只调用一次

    <div class="vues"><h1>{{msg}}</h1>原先数据：<input type="text" v-model="info"><!-- 反转数据：{{info.split('').reverse().join('')}} -->数据反转：{{repeatInfo()}}数据反转：{{haha}}数据反转：{{haha}}数据反转：{{haha}}</div><script>new Vue({el: '.vues',data: {msg: '计算机属性',info: ''},methods: {repeatInfo() {return this.info.split('').reverse().join('')}},computed: {haha: {get() {console.log('getter方法调用了');return 'nihao'},set(e) {console.log('setter调用了');}}}})</script>

14、侦听属性(watch)

监听多个属性、将文件名拿过来可以直接监听、可以监听Vue的原有属性、也可以监听计算属性。

immediate：初始化调用函数 true 开启初始化 || false 默认不调用

handler:固定写法，方法名必须交handler，有两个参数，改变后的值和原有的值。

当被监听的属性发生变化时，handler自动调用一次。

    <div class="vues"><h1>{{msg}}</h1>数字：<input type="text" v-model="number"></div><script>new Vue({el: '.vues',data: {msg: 'listen',number: 0},computed: {hehe() {return 'shuzi' + this.number}},watch: {number: {//初始化调用函数immediate: true,handler(a, b) {console.log(a, b);}},hehe: {handler(a, b) {console.log(a, b);}}}})</script>

深度监视：

使用deep属性开启深度监视，默认为false不开启，true为开启。

当需要监视一个具有多级结构的属性，并且监视所有属性，需要启用深度监视。

    <div class="vues">数字：<input type="text" v-model="a.b.c">数字：<input type="text" v-model="a.d.f">数字：<input type="text" v-model="a.q"></div><script>new Vue({el: '.vues',data: {a: {b: {c: 0},d: {f: 12},q: 1}},watch: {a: {deep: true,handler(a, b) {console.log(123);}}}})</script>

15、computed和watch的选择

如果在程序当中使用了异步方式，只能使用watch，如果完成其他功能，优先选择computed。

16、v-for

需要写在循环项上，语法格式:

v-for="(变量名，index) in/of 数组"
变量名代表了数组中的每一个元素

    <div class="vues">        <ul><li v-for="(name,index) of names">{{name}} + {{index}}</li></ul><table><tr><th>序号</th><th>姓名</th><th>年龄</th><th>选择</th></tr><tr v-for="(vip,index) of vips"><td>{{index + 1}}</td><td>{{vip.name}}</td><td>{{vip.age}}</td><td><input type="checkbox"></td></tr></table></div><script>new Vue({el: '.vues',data: {names: ['p', 'h', 'b'],vips: [{ id: 1, name: 'p', age: 19 },{ id: 2, name: 'h', age: 20 },{ id: 3, name: 'b', age: 21 },]}})</script>

17、v-text指令

可以将指令的内容拿出来填充到标签体之中，类似于JavaScript的innerText。

这种填充是以覆盖的形式进行填充，先清空标签体中原有的内容，填充新的内容。即使是一段HTML代码，也不会解析，当作普通文本进行处理。

18、自定义指令

使用directives开启自定义指令，

函数式方式

指令名字的设置：1.v- 不需要写，2.Vue官方建议指令的名字全部要小写。

指令名字会跟随一个回调函数，回调函数执行时机包括两个，

1.标签和指令第一次绑定的时候，2.模板被重新解析的时候。

这个回调函数有两个参数：1.真是的dom元素，2.标签与指令之间绑定的关系。

    <div class="vues"><div v-text="msg"></div><div v-text-danger="msg"></div></div><script>new Vue({el: '.vues',data: {msg: '自定义属性'},directives: {'text-danger': function (a, b) {a.innerText = b.valuea.style.color = 'pink'}}})</script>

对象式方式

这个对象中三个方法的名字不能随便写，这三个函数将来都会被自动调用。

元素与指令初次绑定的时候，自动调用bind。

注意：在特定的时间节点调用特定的函数，这种被调用的函数成为钩子函数。

    <script>new Vue({el: '.vues',data: {msg: '自定义属性',},directives: {'text-danger': function (a, b) {a.innerText = b.valuea.style.color = 'pink'},'bind-blue': {bind(a, b) {a.value = b.value},inserted(a, b) {a.parentNode.style.backgroundColor = 'blue'},update(a, b) {a.value = b.value}}}})</script>

inserted:元素被插入到页面之后，这个函数自动调用。

update:当模板重新解析的时候，这个函数会被自动调用。

三、class绑定形式

1、字符串形式

确定动态绑定的样式个数只有一个，但是名字不确定，采用字符串形式。

2、数组绑定

当样式的个数和名字都不确定shi，可以采用数组形式。

3、对象形式

样式的个数和名称是固定的，但是需要动态的决定样式用还是不用。

    <script src="../1.Vue/js/vue.js"></script><style>.any {border: 1px solid;background-color: aqua;}.big {width: 200px;height: 200px;}.small {width: 100px;height: 100px;}.active {font-size: 15px;color: pink;}</style>
</head><body><div class="vues"><h1>{{msg}}</h1><div class="any small">{{msg}}</div><br><button @click="changeBig()">变大</button><button @click="changeSmall()">变小</button><div class="any" :class="change">{{msg}}</div><br><div class="any" :class="arrays">{{msg}}</div><br><div class="any" :class="classList">{{msg}}</div><br></div><script>new Vue({el: '.vues',data: {msg: 'class事件',change: 'big',arrays: ['big', 'active'],classList: {'active': true,'big': true}},methods: {changeBig() {this.change = 'big'},changeSmall() {this.change = 'small'}}})</script>
</body>

四、条件渲染

1、v-show和template

v-show指令是通过修改元素的CSS样式的display属性来达到显示和隐藏的。

2、v-if和v-show的选择：

如果一个元素在页面上被频繁的隐藏和显示，建议使用v-show，因为此时v-if开销比较大。

使用v-if页面加载速度快，提高了页面的渲染效率。

3、template标签/元素

起到占位的作用，不会真正出现在页面上，也不会影响页面的结构。

    <div class="vues"><h1>{{msg}}</h1><button @click="counter++">点击+1</button><h1>{{counter}}</h1><img :src="img1" v-if="counter % 2 == 1"><!-- <img :src="img2" v-if="counter % 2 == 0"> --><img :src="img2" v-else><br><br><template v-if="counter === 10"><input type="text"><input type="checkbox"><input type="radio"></template></div><script>new Vue({el: '.vues',data: {msg: 'zhouliu',counter: 0,img1: './images/1.jpg',img2: './images/2.jpg'}})</script>