vue 核心基础

vue 简介

官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架

官网链接

vue 的特性

vue 框架的特性，主要体现在如下两方面：

  1. 数据驱动视图

    在使用了 vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构当页面数据发生变化时，页面会自动重新渲染

  2. 双向数据绑定

    在填写表单时，双向数 据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源中

    开发者不再需要手动操作 DOM 元素，来获取表单元素最新的值

    image-20220815224514594

MVVM 的工作原理

ViewModel 作为 MVVM 的核心，是它把当前页面的数据源（Model）和页面的结构（View）连接在了一起。

  • 当数据源发生变化时，会被 ViewModel 监听到，VM 会根据最新的数据源自动更新页面的结构
  • 当表单元素的值发生变化时，也会被 VM 监听到，VM 会把变化过后最新的值自动同步到Model 数据源中

vue 的使用

基本使用步骤

 <!-- 2. 声明一个被 vue dom 的容器 -->
<div id="app">{{name}}</div>
 <!-- 1. 导入 vue -->
<script src="./lib/vue-2.6.12.js"></script>
<script>
// 3.创建 vue 实列对象
const vm = new Vue({
    // 3.1指定 vm 要控制的容器区域
    el: '#app',
    // 3.2指定 Model 数据源
    data: {           
        name: '张山        
    }   
})
</script>

vue 指令

指令是 vue 开发中最基础、最常用、最简单的知识点。

内容渲染指令

指令是 vue 开发中最基础、最常用、最简单的知识点。

v-text：v-text指令会覆盖元素内默认的值。

{{ }}：vue 提供的 {{ }} 语法，专门用来解决v-text 会覆盖默认文本内容的问题。这种 {{ }} 语法的专业名称是插值表达式（英文名为：Mustache）

v-html：v-text指令和{{}}`插值表达式只能渲染纯文本内容。`v-html`可以渲染包含 `HTML` 标签的字符串渲染到页面上 

<div id="app">
    // 页面显示 张三 v-text 会覆盖原有的值
    <p v-text="name">名字</p>
    // 显示 年龄：18
    <p>年龄：{{age}}</p>
    // h4标题红色字体的 hello world
    // t-html会渲染标签
    <p v-html="info"></p>
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            age: 18,
            name: '张三',
            info: '<h4 style="color:red;">hello world</h4>'
        }
    })
</script>
在 vue 提供的模板渲染语法`{{}}中，除了支持绑定简单的数据值之外，还支持Javascript 表达式的运算

// 简单运算
{{num + 1}}
// 三元判断
{{ok ? 'yes' : 'no'}}
// 字符串的方法
{{str.splist('').reversr().join('')}}
// 字符串的拼接
<div v-bind:id="'list' + id"></div>

属性绑定指令

v-bind：为元素的属性动态绑定属性值，简写形式（简写为英文的 : ）

<!--  为图片动态绑定图片路径-->
<div id="app">
 <img v-bing:src="imgUrl" />
    <!-- 简写 -->
 <img :src="imgUrl" />
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            imgUrl:'./img/1.png'         
        }
    })
</script>

事件绑定指令

v-on 事件绑定指令，用来辅助程序员为 DOM 元素绑定事件监听，简写形式（简写为英文的 @ ）。通过 v-on 绑定的事件处理函数，需要在 methods 节点中进行声明：

<div id="app">
 <button v-on:click="add">按钮1</button>
    <!-- 简写 -->
 <button @click="add">按钮2</button>
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        methods:{
            add(){
                // 函数处理
            }
        }
    })
</script>

原生 DOM 对象有 onclick、oninput、onkeyup 等原生事件，替换为 vue 的事件绑定形式后，
分别为：v-on:click、v-on:input、v-on:keyup

$ event 是 vue 提供的特殊变量，用来表示原生的事件参数对象 event。$event 可以解决事件参数对象event被覆盖的问题

事件修饰符

事件修饰符 说明
.prevent 阻止默认行为，如 a 链接跳转、表单提交
.stop 阻止事件冒泡
.once 绑定的事件只触发 1 次
.capture 以捕获模式触发事件处理函数
.self 只有在 event.target 是当前元素自身时触发事件处理函数
.passive 事件的默认行为立即执行，无需等待事件回调执行完毕 
<a href="www.baidu.com" @click.prevent="fn">阻止链接跳转</a>

按键修饰符

在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符

<!-- 按下回车 触发 submit() 函数 -->
<input type="text" @keyup.enter="submit" />
<!-- 按下esc  触发 back() 函数 -->
<input type="text" @keyup.esc="back" />

双向绑定指令

v-model 双向数据绑定指令，用来辅助开发者在不操作 DOM 的前提下，快速获取表单的数据。

经常用于表单元素如 input，textarea，select 。

<p>{{ username }}</p>
<input type="text" v-model:value="username" />
<input type="text" v-model="username" />

<p>{{ province }}</p>
<select v-model="province">
  <option value="">请选择</option>
  <option value="1">北京</option>
  <option value="2">上海</option>
  <option value="3">广州</option>
</select>

v-model 指令修饰符

修饰符 作用 示例
.number 将用户输入转为数值类型 <input v-model.number="age" />
.trim 删除输入的首尾空白字符 <input v-model.trim="msg">
.lazy 当失去焦点时，才更新数据，类似防抖 <input v-model.lazy="msg">

条件渲染指令

v-if，v-show：条件渲染指令用来辅助开发者按需控制 DOM 的显示与隐藏

  1. v-show 的原理是：动态为元素添加或移除 display: none 样式，来实现元素的显示和隐藏
    • 如果要频繁的切换元素的显示状态，用 v-show 性能会更好
  2. v-if 的原理是：每次动态创建或移除元素，实现元素的显示和隐藏
    • 如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时 v-if 性能更好

在实际开发中，绝大多数情况，不用考虑性能问题，直接使用 v-if 就好了！！！

v-if 指令在使用的时候，有两种方式：

  1. 直接给定一个布尔值 true 或 false

    <p v-if="true">被 v-if 控制的元素</p>

  2. 给 v-if 提供一个判断条件，根据判断的结果是 true 或 false，来控制元素的显示和隐藏

    <p v-if="type === 'A'">良好</p>

列表渲染指令

v-for： 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for 指令需要使用 item in datas 形式的特殊语法，其中：

  • datas是待循环的数组
  • item是被循环的每一项

v-for 指令还支持一个可选的第二个参数，即当前项的索引。语法格式为 (item, index) in items

使用 key 维护列表的状态

  • 当列表的数据变化时，默认情况下，vue 会尽可能的复用已存在的DOM 元素，从而提升渲染的性能。但这种默认的性能优化策略，会导致有状态的列表无法被正确更新。

  • 为了给 vue 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲染的性能。此时，需要为每项提供一个唯一的 key 属性

  • key 是虚拟 DOM 对象的标识，可提高页面更新渲染的效率。当数据变化时，Vue 会根据新数据生成新的虚拟 DOM，随后进行新旧虚拟 DOM 的差异比较

key 的注意事项：

  • key 的值只能是字符串或数字类型
  • key 的值必须具有唯一性（即：key 的值不能重复）
  • 建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性）
  • 使用 index 的值当作 key 的值没有意义（因为 index 的值不具有唯一性）
  • 建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱

过滤器

过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式和 v-bind 属性绑定。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符”进行调用

注：vue3 剔除了过滤器相关的功能

<!-- 在插值表达式通过管道符 | 调用 capitalize 过滤器 对 message 格式化 -->
<p>{{message | capitalize }}</p>

<!-- 在 v-bind 通过管道符 | 调用 formatId 过滤器 对 rawId 格式化 -->
<div :id="rawId | formatId"></div>
// 定义私有过滤器
// new vue() 实例所控制的 el 区域内使用
filters: {
  capitalize(str) {
    return str.charAt(0).toUpperCase() + str.slice(1)
  }
}

// 定义全局过滤器
Vue.filter("capitalize",(str)=>{
   return str.charAt(0).toUpperCase() + str.slice(1)
})

如果私有过滤器和全局过滤器冲突，按照就近原则调用私有过滤器。

连续调用多个过滤器

过滤器从左往右调用，将前一个的结果交给下一个过滤器继续处理

<p>{{ message | capitalize | capitalize }}</p>

传递参数

<p>{{ message | capitalize(arg1,arg2) }}</p>
<script>
  // 第一个参数永远都是管道符的值
  Vue.filter('capitalize',(val,arg1,arg2)=>{
    ...
  })
</script>

watch 侦听器

watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。

const vm = new Vue({
  el: '#app',
  data: { 
  name: '张三',
  },
  watch:{
    // 监听 name 的表化
    // newVal 的变化后的值，
    // oldVal 的变化之前的值
    name(newVal,oldVal){
      ...
    }
  }
})

默认情况下，组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用，则需要使用 immediate 选项

watch:{
   // 监听 name 的表化
   // newVal 的变化后的值，
   // oldVal 的变化之前的值
   name(newVal,oldVal){
     ...
   },
   immediate:true
 }

如果 watch 侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用 deep 选项

const vm = new Vue({
  el: '#app',
  data: { 
    info:{ name: '张三' }
  },
  watch:{
  info:{
      handler(newVal,oldVal){
        ...
      }
    },
    deep:true
  }
 }
})

计算属性

计算属性指的是通过一系列计算之后，最终得到一个属性值，可以被模板结构和 methods 方法使用

<div id="app">
<div class="box" :style="{ backgroundColor: rgb }">
      {{ rgb }}
</div>
</div>
const vm = new Vue({
  el: '#app',
  data: { 
   r: 0, g: 0, b: 0
  },
  computed:{
    rgb(){return `rgb( ${this.r}, ${this.g}, ${this.b} )` }
  }
})

特点：

  1. 定义的时候，要被定义为“方法”
  2. 在使用计算属性的时候，当普通的属性使用即可

好处：

  1. 实现了代码的复用
  2. 只要计算属性中依赖的数据源变化了，则计算属性会自动重新求值！