Vue基础篇

Vue

Vue是一套用于构建用户界面的渐进式JavaScript框架

什么是渐进式? Vue可以自底向上逐层地应用; 当构建简单应用时, 只需一个轻量小巧的核心库; 当构建复杂应用时, 可以引入各式各样的Vue插件

Vue具有以下特点:

采用组件化模式, 提高代码复用率且让代码更好维护

在这里插入图片描述

声明式编码, 让编码人员无需直接操作DOM, 提高开发效率

在这里插入图片描述

使用虚拟DOM+优秀的Diff算法, 尽量复用DOM节点

在这里插入图片描述

Vue基础

初始Vue

想让Vue工作, 就必须创建一个Vue实例, 且必须在使用构造函数时传入一个配置对象
root容器里面的代码依然符合html规范, 只不过加入了一些特殊的Vue语法, 这些Vue语法会被Vue解析
root容器里的代码被称为Vue模版
Vue实例和容器是一一对应的, Vue实例会配合着组件一起使用
{{xxx}}中的xxx要写js表达式, 并且xxx可以自动读取到data中的所有属性
一旦data中的数据发生变化, 那么页面中用到该数据的地方也会自动更新

<!-- 容器 -->
<div id="root">
  <!-- 插值表达式 -->
  <h1>Hello, {{ name.toUpperCase() }}</h1>
</div>
<script>
Vue.config.productionTip = false
new Vue({
  el: '#root', // el用于指定当前的Vue实例为某个容器服务, 值通常为css选择器字符串
  data: {
    name: 'You'
  } // data中的数据为el所挂载的容器使用
}) // 参数为配置对象
</script>

Vue模版语法

插值语法

语法: {{表达式}}

作用: 用于解析标签体(<a>文字内容是标签体)内容

指令语法

语法: v-xxx:

作用: 用于解析标签(包括: 标签属性、标签体内容、绑定事件……)

例如: 下列代码块中的href属性的值可以写js表达式, 因为**v-bind:**是一个vue指令语法, 会被vue解析

<a v-bind:href='url'>去百度</a>

数据绑定

Vue中有两种数据绑定的方式:

单向绑定(v-bind): 数据只能从data流向页面
双向绑定(v-model): 数据不仅能从data流向页面, 还可以从页面流向data
- 双向绑定一般应用在表单类元素上(如: input、select等)
- v-model:value 可以简写成 v-model, 因为v-model默认收集的就是value值

<input type="text" v-model:value="name">
<input type="text" v-model="name">

el与data的两种写法

el的两种写法

写法一: new Vue的时候配置el属性

new Vue({
  el: '#app'
})

写法二: 先创建Vue实例, 随后再通过原型对象中的$mount()指定

let vm = new Vue()
vm.$mount('#app')

data的两种写法

写法一: 对象式

new Vue({
  el: '#app',
  data: {
    key: 'value'
    // ...
  }
})

写法二: 函数式

new Vue({
  el: '#app',
  data() {
  	return {
  		key: 'value'    
    }  
  }
})

用到Vue组件时, data必须使用函数式, 否则会报错.

由Vue管理的函数, 一定不能写箭头函数, 一旦写了箭头函数, this就不再是Vue实例了

MVVM模型

MVVM是Model-View-ViewModel的缩写。

M: 模型(Model), 也就是Vue实例中data对象里的数据部分
V: 视图(View), 模版代码, 最终呈现给用户的内容
VM: 视图模型(ViewModel), Vue实例, 用来将Model渲染到View中, 并监听View中的数据, 反馈给Model

在这里插入图片描述

data中的所有属性, 最后都会出现在VM(vue实例对象)身上. 这些属性以及Vue原型上所有属性, 在Vue模版(即View)中都可以直接使用

数据代理

数据代理即通过一个对象代理对另一个对象中属性的操作(读/写), 下列代码块为proxy对象代理了target对象中的b属性. 可以通过proxy对象访问到target对象中的属性.

const proxy = {}
// 被代理对象
const target = {
  b: 20
}
Object.defineProperty(proxy, 'b', {
  get() {
    return target.b
  },
  set(v) {
    target.b = v
  }
})
console.log(proxy.b); // 20
proxy.b = 2
console.log(proxy.b) // 2
console.log(target.b) // 2

Vue中通过vm对象来代理data对象中的属性的读写. 这样做的好处是让用户更加方便地操作data中的属性.

Vue实例中声明的data最终会被解析到vm._data中, 因为vm中声明的属性是可以在模版中直接访问; vue做了一层数据代理, 将_data中的属性代理到vm对象中, 使我们在模版中可以直接通过属性名获取值, 而不需要写 _data.属性名

<!--如果没有数据代理-->
<h1>{{ _data.name }}</h1>

Vue数据代理的基本原理: 通过Object.defineProperty()把data对象中所有属性添加到vm上. 为每一个添加到vm上的属性都指定一个getter/setter. 在getter/setter内部去读写data中对应的属性.

在这里插入图片描述

事件处理

事件的基本使用

使用v-on:xxx 或 @xxx绑定事件, 其中xxx是事件名
事件的回调需要配置在vm配置对象的methods对象中, 最后会在vm对象上
methods中配置的函数, 不要用箭头函数! 否则this就不是vm了
methods中配置的函数, 都是被Vue所管理的函数, this的指向是vm 或 组件实例对象
@click=""和@click="demo($event)"效果一致, 但是后者可以传参

<div id="app">
<button v-on:click="showDialog()">点我弹出窗口</button>
<button @click="showDialog($event, 666)">点我弹出窗口</button>
</div>
<script>
new Vue({
  el: '#app',
  methods: {
    showDialog(event, value) {
      alert('hello')
      console.log(value) // 666
      console.log(event.target) // 事件源对象
    }
  }
})	
</script>

事件修饰符

语法: @事件名称.事件修饰符="方法名称($event, arg1, ...)"

prevent: 阻止默认事件, 比如标签的自动跳转等
stop: 阻止冒泡事件
once: 事件只触发一次. 比如按钮被点击一次后, 再次点击就不会调用回调函数
capture: 使用事件的捕获模式, 关闭冒泡模式
self: 只有event.target是当前操作的元素时才触发事件. 比如事件冒泡时, 外层的元素
passive: 事件的默认行为立即执行, 无需等待事件回调执行完毕. 比如鼠标滚轮的wheel事件, 需要等回调执行结束后, 才会有页面行为

<div id="app">
	<!-- 1 .prevent 阻止默认行为 -->
	<a @click.prevent="show()" href="https://www.baidu.com">去百度</a>
	<!-- 2 .stop 阻止事件冒泡 -->
	<div @click="show()" class="outer">
		<div @click.stop="show()" class="inner">

		</div>
	</div>
	<!-- 3 .once 事件只触发一次 -->
	<button @click.once="show">只触发一次</button>
</div>
<script>
	new Vue({
		el: '#app',
		methods: {
			show() {
				alert('hello')
			}
		}
	})
</script>

事件修饰符也支持链式调用, 比如@click.stop.prevent就是先阻止冒泡再阻止默认行为

键盘事件

语法: @keyup.键盘事件别名=“方法名()”

<input type="text" @keyup.enter="showInfo()" v-model:value="name">

Vue中常用的按键别名有:

回车(enter)
删除或退格(delete)
退出(esc)
空格(space)
换行(tab): 比较特殊, 需要配合keydown使用
上、下、左、右(up、down、left、right)

Vue未提供别名的按键, 可以使用按键原始的key值来绑定, 但需要将原来的大驼峰转为短横线命名法.

一些系统修饰键如: ctrl、alt、shift、meta等如果要单独使用需要配合keydown来使用才可正常触发事件; 组合键就可以正常使用keyup. 组合按键写法为 @keyup.ctrl.y

想要自定义别名, 可以修改Vue配置项, Vue.config.keyCodes.自定义键名=键码

属性

计算属性

什么是计算属性??? 当一个需要用的的属性不存在, 需要通过已有的属性(data对象)计算得来

原理: 其底层借助了Object.defineProperty()提供的getter和setter. 当数据被初次读取或当依赖的数据发生变化时计算属性的getter方法会被执行. 与methods来实现相比, 其内部有数据缓存机制, 多次读取不用重复计算, 效率更高, 调试也更加方便.

<div id="app">
  姓: <input type="text" v-model="firstname"><br><br>
  名: <input type="text" v-model="lastname"><br><br>
  全名: <span>{{ fullName }}</span>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      firstname: '张',
      lastname: '三'
    },
    computed: {
      fullName: {
        get() {
          // 这里的this指向的是Vue实例
          return this.firstname + '-' + this.lastname
        },
        set(value) {
          let arr = value.split('-')
          this.firstname = arr[0]
          this.lastname = arr[1]
        }
      }
    }
  })
</script>

计算属性的 getter 应只做计算而没有任何其他的副作用
计算属性最后也会出现在Vue实例对象上, 可以在插值表达式等直接读取
如果计算属性要被修改, 那必须写set函数去响应修改, 且set中要让其依赖数据改变
若计算属性不需要被修改, 即只有getter时, 该计算属性可以简写, 如下方代码块所示

// 简写方式一: 直接把冒号后面的函数当getter
computed: {
  fullName: function () {
    return ''
  }
}

// 简写方式二: 直接写成方法
computed: {
	// 方法名就是计算属性名
  fullName() {
    return ''
  }
}

监视属性

在有些情况下，我们需要在状态变化时执行一些“副作用”：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态。这时我们就可以用到vue配置中的watch选项, 在每次响应式属性(包括计算属性)发生变化时, 都会触发一个回调函数.

<div id="app">
  <h1>今天的天气很{{info}}</h1>
  <button @click="isHot = !isHot">切换</button>
</div>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      isHot: true
    },
    // 计算属性
    computed: {
      info() {
        return this.isHot ? '🥵' : '🥶'
      }
    },
    // 监视属性
    watch: {
      isHot: {
        // 初始化时让handler调用一次, oldVal为undefined
        immediate: true,
        handler(newVal, oldVal) {
          console.log(newVal, oldVal)
        }
      }
    }
  })
</script>

当初始化时没有添加监视属性时, 后续也可以通过Vue实例再添加:

vm.$watch('isHot', {
  immediate: true,
  handler(newVal, oldVal) {
    // ...
  }
})

watch默认不监测对象内部值的改变(只要对象引用地址没变, 里面的属性变化不监测). 当配置监测属性时开启deep:true即可监测对象内部值改变. 使用watch时应该根据数据的具体结构, 再决定是否采用深度监视.

// 只监测对象里的某个属性
vm.$watch('person.rich', {
  handler(newVal, oldVal) {
    // ...
  }
})

// 监测对象里的所有属性
vm.$watch('person', {
  deep: true, // 开启深度监测
  handler(newVal, oldVal) {
    // ...
  }
})

与计算属性类似, 当我们配置监视属性时, 如果只有一个handler(), 而其他都采用默认配置, 可以将代码简写:

watch: {
  // 方法名就是被监视属性名
  isHot(newVal, oldVal) {
    
  }
}

计算属性与监视属性的区别

计算属性能完成的功能, 监视属性都可以完成
监视属性能完成的功能, 计算属性不一定能完成. 例如: 监视属性可以进行异步操作.
计算属性不能有“副作用”, 而监视属性通常就是用来产生副作用的

所有被Vue所管理的函数, 最好写成普通函数, 这样this的指向才是vm 或组件实例对象

所有不被Vue所管理的函数(定时器的回调、ajax的回调、Promise的回调等), 最好写成箭头函数, 这样this的指向才是vm 或组件实例对象

绑定样式

使用Vue可以动态地绑定组件的样式

class样式

写法: :class="xxx" xxx可以是字符串、对象、数组

字符串适用于: 当类名不确定, 要动态获取时
数组适用于: 要绑定多个样式, 个数不确定, 名字也不确定
对象适用于: 要绑定多个样式, 个数确定, 名字也确定, 但不确定用不用

<style>
  .basic{width: 200px;height: 100px;border: 1px solid black;}
  .pink {background-color: pink; color: #CF4444}
  .red {background-color: red; font-size: 20px}
  .green {background-color: green; font-weight: bolder}
</style>

<div id="app">
  <!-- 1.字符串写法, mood的是字符串.类名不确定,需要动态变换 -->
  <div class="basic" :class="mood" @click="changeMood()"></div>
  <!-- 2.数组写法, 要绑定的样式个数不确定, 名字不确定 -->
  <div class="basic" :class="moodArr">{{ username }}</div>
  <!-- 3.对象写法,要绑定的样式个数确定、名字也确定,但是动态决定用不用 -->
  <div class="basic" :class="moodObj">{{ username }}</div>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      username: 'hello world',
      mood: 'pink',
      moodArr: ['pink', 'red', 'green'],
      // key为类名, value为boolean
      moodObj: {pink: true, red: false}
    },
    methods: {
      changeMood() {
        this.mood = 'red'
      }
    }
  })
</script>

style样式

写法一: :style="{fontSize: xxx}"其中xxx是动态值

写法二: :style="[a, b]", 其中a、b时样式对象, 对象中必须写css样式的属性. 不能写错

<!-- 1.绑定对象, 对象中的键值对为css属性和值 -->
<div class="basic" :style="styleObj">{{ username }}</div>
<!-- 2.绑定数组, 数组中可以是多个对象 -->
<div class="basic" :style="styleArr">{{ username }}</div>

渲染

条件渲染

v-if

写法: v-if=“表达式”、v-else-if=“表达式”、v-else

适用于切换频率较低的场景, 不展示的DOM会直接被移除, 不会出现在DOM树中.

v-show

写法: v-show=“表达式”

适用于切换频率较高的场景. 不展示的DOM元素不会被移除, 仅仅是隐藏了而已

标签上只能使用v-if指令

列表渲染

语法: v-for="(item, index) in xxx" :key="yyy", xxx部分可以为数组、对象、字符串、数字(指定次数)

在使用v-for指令遍历时, key是非常重要的. key是虚拟DOM对象的标识, 当数据发生变化时, Vue会根据新数据生成新的虚拟DOM,随后Vue进行新虚拟DOM与旧虚拟DOM的差异比较, 比较规则如下:

旧虚拟DOM中找到了与新虚拟DOM相同的key:
- 若虚拟DOM中内容没变, 直接使用之前的真实DOM
- 若虚拟DOM中内容变了, 则生成新的真实DOM, 随后替换掉页面中之前的真实DOM
旧虚拟DOM中未找到与新虚拟DOM相同的key
- 创建新的真实DOM, 随后渲染到页面

在开发中最好使用每条数据的唯一标识作为key. 通常情况下, 如果key仅用于渲染列表展示, 使用index作为key也是没有问题的. 但是如果存在对数据的逆序添加、逆序删除等破坏顺序操作, 可能会产生没有必要的真实DOM更新. 当结构中还包含输入类的DOM时, 还会产生错误的DOM更新.

<div id="app">
<ul>
  <!-- 如果不指定key, 则默认为index, 通常必须指定key为数据的唯一标识 -->
  <li v-for="(person, index) in people" :key="person.id">{{person.username}}-{{person.age}}</li>
</ul>
</div>
<script>
new Vue({
  el: `#app`,
  data: {
    people: [
      {id:1, username: 'lin', age: 18},
      {id:2, username: 'you', age: 18},
    ]
  }
})
</script>

Vue监视数据的原理

vue会监视data中所有层次的数据.

如何监测对象中的数据?

通过setter实现监视，且要在new Vue时就传入要监测的数据。

对象中后追加的属性，Vue默认不做响应式处理
如需给后添加的属性做响应式，请使用如下API：

Vue.set(target，propertyName/index，value)
vm.$set(target，propertyName/index，value)

如何监测数组中的数据？

通过包裹数组更新元素的方法实现，在原型链上会先找到Vue重写过的一些数组方法. 本质就是做了两件事：

调用原生对应的方法对数组进行更新
重新解析模板，进而更新页面

在Vue修改数组中的某个元素一定要用如下方法：

使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
Vue.set() 或 vm.$set()

Vue.set() 和 vm.$set() 不能给vm 或 vm 的根数据对象(vm._data) 添加属性！！

在操作数组时, 需要注意的是如果是修改数组中元素对象的属性, 则默认就能被监视. 不能被监测的是直接修改数组下标上的元素

<div id="app">
  <button @click="addAge()">年龄+1岁</button>
  <br>
  <button @click="addSex()">添加性别属性, 默认值:男</button>
  <br>
  <button @click="addFriend()">在列表首位添加一个朋友</button>
  <br>
  <button @click="modFriendName()">修改第一个朋友的名字:张三</button>
  <br>
  <button @click="addHobby()">添加一个爱好</button>
  <br>
  <button @click="modFirHobby()">修改第一个爱好: 开车</button>



  <h1>学生信息</h1>
  <h3>name: {{ student.name }}</h3>
  <h3>age: {{ student.age }}</h3>
  <h3 v-if="student.gender">sex: {{ student.gender }}</h3>
  <h3>hobby: </h3>
  <ul>
    <li v-for="(h,index) in student.hobby" :key="index">{{ h }}</li>
  </ul>
  <h3>friends:</h3>
  <ul>
    <li v-for="(f, index) in student.friends" :key="index">
      {{ f.name }}--{{ f.age }}
    </li>
  </ul>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      student: {
        name: 'you',
        age: 18,
        hobby: [
            '抽烟', '喝酒', '烫头'
        ],
        friends: [
          {
            name: 'lin',
            age: 18
          },
          {
            name: 'wang',
            age: 19
          }
        ]
      }
    },
    methods: {
      addAge() {
        this.student.age++
      },
      addSex() {
        this.$set(this.student, 'gender', '男')
      },
      addFriend() {
        this.student.friends.unshift({name: 'chen', age: 20})
      },
      modFriendName() {
        this.student.friends[0].name = 'san'
      },
      addHobby() {
        this.student.hobby.push('ping')
      },
      modFirHobby() {
        this.$set(this.student.hobby, 0, 'car')
      }
    }
  })
</script>

收集表单数据

指令: v-model

当表单控件类型不同的时候, v-model的具体用法如下:

type=“text”: 收集的是value值, 用户输入的就是value值
type=“radio”: 收集的是value值, 且必须要给标签配置value值
type=“checkbox”:
- 没有配置value属性时: 收集的就是checked, 值为true或者false
- 配置了value属性时:
  - 如果v-model的初始值是数组, 收集的就是value组成的数组
  - 如果v-model的初始值不是数组, 则收集的就是checked. 也就是boolean

v-model有三个修饰符: lazy(失去焦点再收集)、number:转为数字类型、trim:首尾空格去除

<div id="app">
<form @submit.prevent="submit()">
  账号: <input type="text" v-model="student.username"><br>
  密码: <input type="password" v-model="student.password"><br>
  性别: 男<input type="radio" value="male" v-model="student.gender">
  女 <input type="radio" value="female" v-model="student.gender"><br>
  爱好: 学习 <input type="checkbox" value="learn" v-model="student.hobby">
  打游戏 <input type="checkbox" value="play" v-model="student.hobby">
  吃饭 <input type="checkbox" value="eat" v-model="student.hobby"> <br>
  所属校区:
  <select v-model="student.city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
  </select><br>
  <button>提交</button>
</form>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    student: {
      username: '',
      password: '',
      gender: 'male',
      hobby: ['learn', 'play'],
      city: ''
    }
  },
  methods: {
    submit() {
      console.log(this.student)
    }
  }
})
</script>

过滤器

当要对显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)

过滤器的注册:

// 全局过滤器
Vue.filter(name, callback)
// 局部过滤器
new Vue({
  filters: {
    
  }
})

使用过滤器

{{ xxx | 过滤器名称 }}
// 也可用于v-bind
v-bind:属性 = "xxx | 过滤器名"

过滤器也可以接收额外参数, 多个过滤器也可以串联
使用过滤器并没有改变原本的数据, 而是产生新的对应的数据

<!-- 串联使用 -->
<h3>formatted: {{ timestamp | fmtTime('YYYY-MM-DD HH:mm:ss') | slice}}</h3>

指令

内置指令

v-text指定

作用: 向其所在的节点中渲染文本内容

与插值语法相比, v-text会替换掉节点中的内容, 而{{xx}}则不会

<!-- hello会被变量name的值替换 -->
<h3 v-text="name">hello</h3>

v-html指令

作用: 向指定节点中渲染包含html结构的内容

v-html有严重的安全性问题!!! 在网站上动态渲染任意HTML是非常危险的, 容易导致XSS攻击. 一定要在可信的内容上使用v-html, 永远不要用在用户提交的内容上!!!

v-cloak(没有值)

本质上是一个特殊属性, Vue实例创建完毕并接管容器后, 会删掉v-cloak属性
使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题

<style>
  /*属性选择器*/
  [v-cloak] {
    display: none;
  }
</style>
<h3 v-cloak>{{ name }}</h3>

v-once指令

v-once所在节点的初次动态渲染后, 就视为静态内容了
之后数据的改变不会引起v-once所在结构的更新, 可以用于优化性能

<div id=root>
  <!-- 之后n就算改变了, 这里的值也不会再渲染了 -->
  <h2 v-once>
    初始化时n的值为:{{n}}
  </h2>
</div>

v-pre指令

v-pre可以跳过其所在节点的编译过程. 可以利用该属性跳过没有使用指令语法、没有使用插值表达式语法的节点, 这样会加快编译速度.

preserve: 保留

自定义指令

局部指令

new Vue({
  directives: {
    '指令名': {
      // 指令与元素成功绑定
      bind(element, binding) {
        // ...
      },
      // 指令所在元素被插入页面时(真实DOM)
      inserted(element, binding) {
        // ...
      },
      // 模板被重新解析
      update(element, binding) {
        // ...
      }
    }
  }
})

写法二:

new Vue({
  directives{
  	// bind和update方法, 没有insertd钩子
  	'指令名'() {
  	
		}
	}
})

全局指令的写法: Vue.directive(指令名, 配置对象/回调函数)

指令定义时不加v-, 但是使用时要加
指令名如果是多个单词, 要使用短横线连接方式, 不要使用小驼峰
指令中函数的this指向的都是window对象, 不再是Vue实例

<div id="app">
	<h3>n原来为{{ n }}</h3>
	n扩大10倍后, 值为
  <h3 v-big="n"> </h3>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    n: 10
  },
  directives: {
    big(ele, binding) {
      console.log(binding)
      ele.innerText = binding.value * 10
    }
  }
})
</script>