前端，VUE学习记录（3）

本文接着前两章的内容继续叙述我的Vue学习过程，随着对Vue的学习越来越深入，我们会发现很多知识逐渐变得越来越抽象，接下来我会用很多我写的代码图来展示我学习的过程，并解释一些概念性的东西例如什么是Vue响应式等。注：本人水平有限，由于文章是我本人通过学习理解后总结出的，如有写的不好或者写错的地方欢迎私信我，并温柔的指出。谢谢阅览。

​

目录:

（1）Vue的三种模板

（2）Vue模板有哪些语法

（3）指令与修饰符

（4）sync修饰符

（5）Vue进阶属性:Directive指令

（6）Mixin混入

 

（1）Vue的三种模板

前面我们学习了许多Vue的构造选项，那么他们的写法有很多种，比如template

第一种：

Vue完整版，写在HTML里

<div id=xxx> {{n}} <button @click="add">+1</button> </div> new Vue({ el:'#xxx', data:{n:0}//data可以改成函数 methods:{add(){}} })

第二种：

Vue完整版，写在选项里

html里面留空，把具体内容写在选项里面

<div id=app> </div> new Vue({ template:` <div> {{n}} <button @click="add">+1</button> `, data:{n:0}//data可以改为函数 methods:{add(){this.n+=1}} </div> }).$mount('#app') //注意一个细节，div#app会被替换

第三种:

Vue非完整版，配合xxx.vue文件

<template> <div> {{n}} <button @click="add"> +1 </button> </div> </template>

另一个地方写如下代码

import XXX from './xxx.vue' //XXX是一个options对象 new Vue{ render:h=>h(XXX) }).$mount('#app') <script> export default{ data(){return {n:0}}, //data必须为函数 methods:{add(){this.n += 1}} } </script> <style> //这里写CSS </style>

以上就是写Vue的三种模板

 

（2）Vue模板有哪些语法

v-html

就想让他显示为html内容

 

v-on

绑定事件

​

v-bind

绑定属性

​

v-if

​

v-for

 

如果你用了v-for，必须后面加个key不然就会有警告

 

v-show

有点类似于if else 但是更简单

​

总结：

Vue模板主要特点：

使用XML语法（不是HTML）

使用{{}}插入表达式

使用v-html v-on v-bind等指令操作DOM

使用v-if v-for 等指令实现条件判断和循环

 

（3）指令与修饰符

要解释什么是指令就看一段代码：

<div v-text:"x"></div>

这里面的v-开头的东西就是指令

语法：

v-指令名：参数=值，如v-on：click=add

如果值里没有特殊字符，则不加引号

有些指令没有参数和值，如v-pre

有些指令没有值，如 v-on：click.prevent

有哪些修饰符？

@click.stop="add"表示阻止事件传播/冒泡

@click.prevent="add"表示阻止默认动作

@click.stop.prevent="add"同时表示两种意思

​

（4）sync修饰符

sync修饰符解释起来比较麻烦，我们可以举个例子

爸爸给儿子钱，儿子要花钱怎么办

答：儿子打电话（触发事件）向爸爸要钱

---

首先我们要知道Vue的规则：

Vue规则：组件不能修改props外部数据

Vue规则：this.$emit可以触发事件，并传参

Vue规则：$event可以获取$emit的参数

<button @click="money -= 100"> <span>花钱</span> </button> // 但这样其实是会报错的，会警告不能直接修改外部的 props

所以问题来了，到底怎么才能花钱？

// App.vue <button @click="$emit('update:money', money-100)"> <span>花钱</span> </button> // Child.vue <Child :money="total" v-on:update:money="total = $event"/>

v-on:update:money="total = $event"这段代码就是用来获取money更新后的值，但是好长啊，Vue作者为我们提供了一个修饰符sync！帮助我们简化

最终它可以变成这样：

<Child :money.sync="total"/>

当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。

代码 <Child :money.sync="total"/> 会被扩展为

代码 <Child :money="total" v-on:update:money="total = $event"/>

（5）Vue进阶属性:Directive指令

指令有一个明显的区分v- 开头的都是指令

如何自己制造一个指令呢？

1.声明一个全局指令

Vue.directive('x',directiveOptions)

Vue.directive('x',{ inserted:function (el){ el.addEventListener('click',()=>{console.log('x')}) } })

2.声明一个局部指令

new Vue({ ..., directives:{ "x":directiveOptions } })

​

指令的作用：

主要用于DOM操作

Vue实例/组件用于数据绑定、事件监听、DOM更新

Vue指令主要目的就是原生DOM操作

减少重复

如果某个DOM操作你经常使用，就可以封装为指令

如果某个DOM操作比较复杂，也可以封装成指令

例如：

​

（6）Mixin混入

其实Mixin就是复制，他的目的也是为了减少重复

类比：

directives的作用是减少DOM操作的重复

mixins的作用是减少data，methods，钩子的重复

举例：

假设我们需要在每个组件上添加name和time

在created、destroyed时，打出提示，并报出存活时间

一共有五个组件，请问你怎么做？

一、给每个组件添加data和钩子，共五次

二、或者使用mixins减少重复