新手小白VUE整理(2) —— VUE指令

VUE 2.x

1.VSCode基本插件安装

• vscode-icon(文件图标主题)
• open in browser （右键项目单击启动，运行单个HTML页面）
• 设置修改自动保存
• Auto Close Tag（自动闭合HTML/XML标签）
• vetur（vue文件基本语法的高亮插件）
• Auto Rename Tag（自动完成另一侧标签的同步修改）
• JavaScript(ES6) code snippets（ES6语法智能提示以及快速输入，除js外还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间）
• Vue2 Snipptets (Vue2语法智能提示)
• Prettier - Code formatter
  参考:https://blog.csdn.net/xgocn/article/details/126499253
  1.vue调试工具,vue devtools插件安装
  官网地址:https://devtools.vuejs.org/guide/installation.html

2.vue的特性

• 数据驱动视图
  vue监听到数据的变化以后，自动渲染到页面上，不需要程序猿手动再去操作dom元素。（单向数据绑定）
• 双向数据绑定（通常用于表单form中）
  在网页中，form表单负责采集数据，Ajax负责提交数据。
  js数据的变化，会被自动渲染到页面上
  页面上表单采集的数据发生变化的时候，会被vue自动获取到，并更新到js数据中
  注：数据驱动视图和双向数据绑定的底层原理是MVVM（Mode数据源，View视图，ViewModel：vue实例）

3.vue指令

指令是vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构

vue中的指令按照不同的用途可以分为如下6大类：
1）内容渲染指令
2）属性绑定指令
3）事件绑定指令
4）双向绑定指令
5）条件渲染指令
6）列表渲染指令

4.内容渲染指令

1）v-text指令：作为标签的属性使用，填充标签的内容，并覆盖标签原本内容
2）{{ }}：插值表达式，作为标签的内容使用，相当于占位符
3）v-html:把带有标签的字符串,渲染成真正的HTML内容
使用示例:

<div id="app">
  {{ username }}
</div>
// 初始化Vue实例
const vm = new Vue({
  // el属性是固定写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
  el:'#app',
  // data是要渲染到页面上的数据
  data:{
    username:'zhangsan'
  }
})

5.属性绑定指令

v-bind:为元素动态绑定值,简写":",示例:

<input type="text" :placeholder="tips"/>

注:在内容渲染指令和属性绑定指令中,支持javascript表达式运算,比如:字符串拼接,
三元运算符等,但是不支持复杂语句

6.事件绑定指令

v-on:标签事件绑定指令,简写"@",示例:

<button v-on:click="add(5)">+5</button>

7.内置事件对象$event

vue提供内置变量,$event,它就是原生的DOM事件对象e
1)如果方法没有参数,那么第一个参数可以用e接收,例如:

<button v-on:click="add()">+1</button>
methods:{
  add(e){
    console.log(e)
  }
}

2)如果方法有参数,则需要传入$event来接收时间对象e,例如:

<button v-on:click="add(1,$event)">+1</button>
methods:{
  add(num,e){
    console.log(num)
    console.log(e)
  }
}

8.事件修饰符

在事件处理函数中,调用event.preventDefault() 或 event.stopPropagation()是非常常见的需求.
vue提供了事件修饰符概念,来辅助程序猿更方便的对事件的触发进行控制.常见的5个事件修饰符

• .prevent:阻止默认行为(比如:a链接的跳转,表单的提交等)
• .stop:阻止事件冒泡
• .capture:以捕获模式触发当前的事件处理函数
• .once:绑定的事件只触发1次
• .self:只有在event.target是当前元素自身时触发事件处理函数
  使用:@click.prevent , @click.stop…

9.按键修饰符

在监听键盘事件时,我们经常需要判断详细的按键,此时,可以为键盘相关的事件添加按键修饰符,例如:
<input type=“text” @keyup.esc=“clearInput” @keyup.enter=“submit”>
针对使用比较多的:esc按键和enter按键

10.v-model

1)双向绑定:表单与DOM元素值相互同步,只能表单元素中使用:input,textarea,select等
2)v-model相关修饰符:

 a) .number:将表单输入的字符串类型的数字转换成number类型是胡子,示例:<input type="text" v-model.number="username">
 b) .trim:去除首尾空格,示例:<input type="text" v-model.trim="username">
 c) .lazy:在"change"时而非"input"时更新,示例:<input type="text" v-model.lazy="username">

11.条件渲染指令

条件渲染指令用来辅助开发者按需控制DOM的显示和隐藏,常用指令:
v-if:每次动态创建或移除元素,实现元素的显示或隐藏
v-show:动态为元素添加或移除display:none样式,来实现元素的显示和隐藏

12.v-else-if,v-else

v-else-if,v-else 必须与v-if结合使用,使用示例:

<div v-if="type==='A'">优秀</div>
<div v-else-if="type==='B'">良好</div>
<div v-else-if="type==='C'">一般</div>
<div v-else>差</div>

13.循环渲染指令,v-for

使用示例:

const vm = new Vue({
    // el属性是固定写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
    el:'#app',
    // data是要渲染到页面上的数据
    data:{
      list:[
        {id:1,name:'zhangsan'},
        {id:2,name:'李四'},
        {id:3,name:'王五'}
      ]
    }
})
<!-- 官方建议:只要用到v-for指令,那么一定要绑定一个:key属性 -->
<!-- 而且,尽量把id作为key的值 -->
<!-- 官方对可以的值类型:必须是string或者number类型 -->
<!-- key的值不能重复 -->
<tr v-for="(item,index) in list" :title="item.name" :key="item.id">
  <td>{{index}}</td>
  <td>{{item.id}}</td>
  <td>{{item.name}}</td>
</tr>

14.过滤器

• 过滤器是vue为开发者提供的功能,常用于文本格式化,过滤器可以用在这两个地方:插值表达式和v-bind属性绑定
  过滤器应该被添加在JavaScript表达式的尾部,由"管道符(|)"进行调用,示例代码如下:

<p>{{message | upperCase}}</p>
<div v-bind:id="rawId | formatId"></div>

• 全局过滤器

Vue.filter(upperCase,function(str){
  return str.toUpperCase()
})

• 注意点:过滤器要定义到filter节点下,本质是一个函数
  在过滤器函数中,一定要有return值
  过滤器的第一个形参,就是管道符前面的那个值
  全局过滤器要定义在vue实例前面
  如果全局过滤器和私有过滤器名字一致,会调用"私有过滤器"
• 连续调用过滤器: {{ message | 过滤器A | 过滤器B | … }}

15.侦听器(监听器)-- watch

watch侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的做操
1)基本语法格式(方法格式的侦听器):

const vm = new Vue({
  el:'app',
  data:{
    username:''
  },
  watch:{
    // 侦听器本质是一个函数,要监视哪个数据的变化,就把哪个数据名作为方法名
    username(newVal,oldVal){
      console.log(newVal,oldVal)
    }
  }
})
缺点1:无法自动触发
缺点2:无法侦听到对象中属性的变化

2)对象格式侦听器,immediate

const vm = new Vue({
  el:'app',
  data:{
    message:''
  },
  watch:{
    message:{
      handler(newVal,oldVal){
        console.log("监听到了username的变化:",newVal,oldVal)
      },
      // immediate,控制侦听器是否自动触发一次
      immediate:true
    }
  }
})

3)对象格式侦听器,deep

const vm = new Vue({
    // el属性是固定写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
    el:'#app',
    // data是要渲染到页面上的数据
    data:{
      message:"message信息",
      user:{
        username:"test",
        age:11
      }
    },
    watch:{
      user:{
        handler(newVal,oldVal){
          console.log("触发了侦听器")
          console.log("新值:",newVal)
          console.log("旧值:",oldVal)
          // 这里注意:由于对象类型的数据指向同一个引用,因此newVal和oldVal值一样
        },
        // 开启深度侦听,只要对象中任何一个属性变化,都会触发对象侦听器
        deep:true
      },
      // 如要要侦听对象的子属性的变化,必须包裹一层单引号,此时可以获取新值和旧值
      'user.username'(newVal,oldVal){
        console.log(newVal)
        console.log(oldVal)
      }
    }
  })

16.计算属性

• 计算属性指的是通过一些列运算之后,最终得到一个属性值.
  这个动态计算出来的属性值可以被模板结构或methods方法使用,示例代码如下:

<div id="app">
    <input type="text" v-model="message1">
    <input type="text" v-model="message2">
    <input type="text" v-model="message3">
    <hr>
    <p>{{allMessage}}</p>
</div>

const vm = new Vue({
  // el属性是固定写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
  el:'#app',
  // data是要渲染到页面上的数据
  data:{
    message1:"信息1",
    message2:"信息2",
    message3:"信息3"
  },
  // 所有的计算属性都要定义到computed节点之下
  // 计算属性在定义的时候,要定义成"方法格式"
  computed:{
    // 计算属性在使用的时候,与data中的普通属性使用方法完全一致
    allMessage(){
      return this.message1 + "," + this.message2 +","+this.message3
    }
  }
})

• 特点:在定义的时候,要定义成"方法格式",
  在使用的时候,与data中的普通属性使用方法完全一致
• 好处:可以实现代码的复用
  只要计算属性中依赖的数据源发生变化,则计算属性会自动重新求值