Vue 核心基础

vue 简介

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

官网链接

vue 的特性

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

数据驱动视图
在使用了 vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构当页面数据发生变化时，页面会自动重新渲染
双向数据绑定
在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源中
开发者不再需要手动操作 DOM 元素，来获取表单元素最新的值

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 的显示与隐藏

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

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

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

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

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

给 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} )` }
  }
})

特点：

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

好处：

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