Vue2-笔记1

Vue2

插件

• Vue 3 Snippets nollowtree
• Vetur Pine Wu
• Open in External App

第1章：Vue核心

{{}}

标签体内，动态显示data变量或变量表达式

插值语法：用于解析标签体内容。

v-bind:(单向绑定)：数据只能从data流向页面

标签属性之前，动态绑定标签，标签字符串为data变量或变量表达式，简写为==:==

指令语法：用于解析标签（包括标签属性、标签体内容、绑定事件。。。），还有好多其他的v-???

v-model:(双向绑定)：数据不仅能从data流向页面，还可以从页面流向data

用于value属性之前

1.双向绑定一般都应用在表单类元素上（如：input、select等）；

2.v-model:value 可以简写为v-model，因为v-model默认收集的就是value值。

el的两种写法

第一种：
const v = new Vue({
	el:'#root',//第一种写法
	data:{
		name:'尚硅谷'
	}
})
第二种：
const v = new Vue({
	data:{
		name:'尚硅谷'
	}
})
v.$mount('#root')//mount:挂载

data的两种写法

第一种：
const v = new Vue({
	el:'#root',
	//data的第一种写法，对象式
	data:{
		name:'尚硅谷'
	}
})
第二种：
const v = new Vue({
	el:'#root',
	//data的第二种写法，函数式
	data:function(){
		console.log(this)//此处this指的是vue实例对象。function函数不能写成箭头函数，如果为箭头函数，此处指向的是全局的window对象，箭头函数没有自己的this，往外找就找到了全局的window
		return{
			name:'尚硅谷'
		}
	}
})

v-on:事件绑定

v-on:xxx，xxx是事件名，简写为==@==

@click="demo"和@click="demo($event)"效果一致，但后者可以传参。没有传递参数时，会默认传递事件对象。如果传参，不会默认传递事件对象，想传递event对象的话，需要传递￥event参数。

事件修饰符(用于 click 等)

1.prevent：阻止默认事件（常用）；
2.stop：阻止事件冒泡（常用）；
3.once：事件只触发一次（常用）；
4.capture：使用事件的捕获模式；
5.self：只有 event.target 是当前操作的元素时才触发事件；
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

例：@click.prevent=“showInfo” @事件名.事件修饰符=“方法名” 事件修饰符可以连着写

键盘事件(用于 keyup 、 keydown )

Vue中常用的按键别名：

回车 => enter

删除 => delete (捕获“删除”和“退格”键)

退出 => esc

空格 => space

换行 => tab (特殊，必须配合keydown去使用)

上 => up

下 => down

左 => left

右 => right

例：@keydown.enter=“showInfo” @事件名.按键别名=“方法名” 键盘事件按键别名可以连着写

计算属性

computed(){} //简写(只有getter的时候)

监视属性

watch(){} 或 vm.$watch(‘被监视的属性’,{})

watch:{
	//完整写法
	属性（包含计算属性）:{
		//immediate:true // 初始化时让handler调用一下，（不需要）
		deep:true;//监视多级结构中所有属性的变化
		//handler(newValue,oldValue){
			console.log('xxx',newValue,oldValue)
		}
	}
	//简写(只有handler的时候)
	属性（包含计算属性）(newValue,oldValue){
		console.log('xxx',newValue,oldValue)
	}
	
}

深度监视：

1.Vue中的watch默认不监测对象内部值的改变（一层）；

2.配置deep:true可以监测对象内部值改变（多层）；

备注：

1.Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以；

2.使用watch时根据数据的具体结构，决定是否采用深度监测。

computed和watch之间的区别

1.computed能完成的功能，watch都可以完成；

2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作；

两个重要的小原则：

1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组建实例对象。

2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm或组件实例对象。

绑定class样式（常用）

<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
<div class="basic" :class="mood" @click="changeMood">{{name}}</div>

<!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
<div class="basic" :class="classArr" @click="changeMood">{{name}}</div>

<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
<div class="basic" :class="classObj" @click="changeMood">{{name}}</div>

data:{
  mood:"normal",
  classArr:['atguigu1','atguigu2','atguigu3'],
  classObj:{
    atguigu1:true,
    atguigu2:false,
  }
}

绑定style样式（大致同class）（不常用）

只有数组写法和对象写法。通常用对象写法，其中数组写法，数组里面也是对象罗列。

v-if(条件渲染)

适用于：切换频率较低的场景

特点：不展示的DOM元素直接被移除

注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能“打断”。

v-if="" (布尔值或判断表达式，表达式最后为布尔值)
v-else-if="" (布尔值或判断表达式，表达式最后为布尔值)
v-else

v-show(条件渲染)

适用于：切换频率较高的场景

特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

v-show="" (布尔值或判断表达式，表达式最后为布尔值)

备注：使用v-if的时候，元素可能无法获取到，而使用v-show一定可以获取到。

可以使用template包裹元素，而且页面展示的时候没有template这个元素，不影响结构。template只能使用v-if。

列表渲染

in和of都可以用。:key="index"最好写上，并且值不能重复。

<!-- 遍历数组 -->
<ul>
  <li v-for="(p,index) of persons" :key="index">//index索引从0开始
    {{p.name}}-{{p.age}}
  </li>
</ul>
<!-- 遍历对象 -->
<ul>
  <li v-for="(value,key) of car" :key="key">
    {{key}}-{{value}}
  </li>
</ul>
<!-- 遍历字符串（用的少） -->
<ul>
  <li v-for="(char,index) of str" :key="index">
    {{char}}-{{index}}//index索引从0开始
  </li>
</ul>
<!-- 遍历指定次数（用的少） -->
<ul>
  <li v-for="(number,index) of 5" :key="index">
    {{index}}-{{number}}//index索引从0开始，number从1开始到5
  </li>
</ul>

列表过滤

<input type="text" placeholder="请输入名字" v-model="keyWord">
<ul>
  <li v-for="(p,index) of filPersons" :key="index">//index索引从0开始
    {{p.name}}-{{p.age}}-{{p.sex}}
  </li>
</ul>

//用watch实现
data:{
  keyWord:"",
  persons:[
    {id:"001",name:"马冬梅",age:19,sex:"女"},
    {id:"002",name:"周冬雨",age:20,sex:"女"},
    {id:"003",name:"周杰伦",age:21,sex:"男"},
    {id:"004",name:"温兆伦",age:22,sex:"男"},
  ]，
  filPersons:[]
},
watch:{
  keyWord:{
    immediate:true,
    handler(val){
      this.filPersons = this.persons.filter((p) => {
        return p.name.indexOf(val) !== -1
      })
    }
  }
}
//用computed实现
data:{
  keyWord:"",
  persons:[
    {id:"001",name:"马冬梅",age:19,sex:"女"},
    {id:"002",name:"周冬雨",age:20,sex:"女"},
    {id:"003",name:"周杰伦",age:21,sex:"男"},
    {id:"004",name:"温兆伦",age:22,sex:"男"},
  ]，
  filPersons:[]
},
computed:{
  filPersons(){
    return this.persons.filter((p) => {
      return p.name.indexOf(this.keyWord) !== -1
    })
  }
}

列表排序

<input type="text" placeholder="请输入名字" v-model="keyWord">
<button @click="sortType = 2">年龄升序</button>
<button @click="sortType = 1">年龄降序</button>
<button @click="sortType = 0">原顺序</button>
<ul>
  <li v-for="(p,index) of filPersons" :key="p.id">
    {{p.name}}-{{p.age}}-{{p.sex}}
  </li>
</ul>

//用computed实现
data:{
  sortType:0;//0原顺序 1降序 2升序
  keyWord:"",
  persons:[
    {id:"001",name:"马冬梅",age:19,sex:"女"},
    {id:"002",name:"周冬雨",age:20,sex:"女"},
    {id:"003",name:"周杰伦",age:21,sex:"男"},
    {id:"004",name:"温兆伦",age:22,sex:"男"},
  ]，
  filPersons:[]
},
computed:{
  filPersons(){
    this.persons.filter((p) => {
      return p.name.indexOf(this.keyWord) !== -1
    })
  }
}

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

向响应式对象中添加一个property，并确保这个新property同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新property，因为Vue无法探测普通的新增property（比如this.myObject.newProperty = ‘hi’），普通的新增property指的是没有响应式，即没有getter，setter方法。

注意：对象不能是Vue实例或者Vue实例的根数据对象。即target不能是vm或vm.data

label for

可以做到当点击表单名的时候，也可以定位到input框

<label for="demo">账号</label>
<input type="text" id="demo">

收集表单数据

收集表单数据：
若：<input type="text">，则v-model收集的是value值，用户输入的就是value值。
若：<input type="radio">，则v-model收集的是value值，且要给标签配置value值。
若：<input type="checkbox">
  1.没有配置input的value属性，那么收集的就是checked（勾选or未勾选，是布尔值）
  2.配置input的value属性：
    （1）v-model的初始值是非数组，那么收集的就是checked（勾选or未勾选，是布尔值）
    （2）v-model的初始值是数组，那么收集的就是value组成的数组
备注：v-model的三个修饰符：
      lazy：失去焦点再收集数据
      number：输入字符串转为有效的数字
      trim：输入首尾空格过滤

过滤器

过滤器：
  定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
  语法：
    1.注册过滤器：Vue.filter(name,callback)或new Vue(filters:{})
    2.使用过滤器：{{xxx | 过滤器名}}或v-bind:属性="xxx | 过滤器名"
  备注：
    1.过滤器也可以接受额外参数、多个过滤器也可以串联
    2.并没有改变原本的数据，是产生新的对应的数据

使用

<h3>时间：{{time | timeFormater('YYYY-MM-DD') | mySlice}}</h3>//过滤器可以连接多个

data:{
  time:1621561377603 //时间戳
}，
//局部过滤器
filters:{
  timeFormater(value,str="YYYY-MM-DD HH:mm:ss"){//time值会自动占用第一个value，括号内其他参数往后排。str参数可以设置默认值
    return dayjs(value).format(str)//dayjs是一个第三方库需要引入
  },
  mySlice(value){
    return value,slice(0,4)
  }
}

//全局过滤器，需要卸载vue实例之前
Vue.filter('mySlice',fuction(value){
  return value,slice(0,4)
})

v-text（不用）

v-text指令：
  1.作用：向其所在的节点中渲染文本内容。
  2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

v-html（不用，有安全性问题）

v-html指令：
  1.作用：向指定节点中渲染包含html结构的内容。
  2.与插值语法的区别：
    （1）v-html会替换掉节点中所有的内容，{{xx}}则不会。
    （2）v-html可以识别html结构。
  3.严重注意：v-html有安全性问题！！！！
    （1）在网站上动态渲染任何html是非常危险的，容易导致XSS攻击。
    （2）一定要在可信的内容上使用v-html，永不要在用户提交的内容上！

v-cloak（防止vue未解析的语句显示）

v-cloak指令（没有值）：
  1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
  2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

v-once（只初次渲染）

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

v-pre

v-pre指令：
  1.跳过其所在节点的编译过程。
  2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

自定义指令

自定义指令总结：
  一、定义语法：
    （1）局部指令：
      new Vue({                       new Vue({
        directives：{指令名:配置对象} 或   directives：{指令名,回调函数}
      })                              })
    （2）全局指令：
      Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)
  二、配置对象中常用的3个回调：
    （1）bind：指令与元素成功绑定时调用。
    （2）inserted：指令所在元素被插入页面时调用。
    （3）update：指令所在模板结构被重新解析时调用。
  三、备注：
    1.指令定义时不加v-，但使用时要加v-；
    2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

使用：

需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍
需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
<h2>放大10倍后的n值是：<span v-big="n"></span></h2>
<input type="text" v-fbind:value="n">

//全局
Vue.directive('fbind',{
    //指令与元素成功绑定时（一上来）
    bind(element,binding){
      element.value = binding.value
    },
    //指令所在元素被插入页面时
    inserted(element,binding){
      element.focus()
    },
    //指令所在的模板被重新解析时
    update(element,binding){
      element.value = binding.value
    }
  }
)
Vue.directive('big',function(element,binding){
  element.innerText = binding.value * 10
})

//局部
directives:{
  'big-number'(element,binding){
    element.innerText = binding.value * 10
  },
  big(element,binding){
    element.innerText = binding.value * 10
  },
  fbind:{
    //指令与元素成功绑定时（一上来）
    bind(element,binding){
      element.value = binding.value
    },
    //指令所在元素被插入页面时
    inserted(element,binding){
      element.focus()
    },
    //指令所在的模板被重新解析时
    update(element,binding){
      element.value = binding.value
    }
  }
}

生命周期

常用的生命周期钩子：
  1.mounted：发送ajax请求、启动定时器、绑定自定义时间、订阅消息等【初始化操作】；
  2.beforeDestroy：清除定时器、解绑自定义时间、取消订阅消息等【首尾工作】。
关于销毁Vue实例：
  1.销毁后借助Vue开发者工具看不到任何信息；
  2.销毁后自定义事件会失效，但原生DOM事件依然有效；
  3.一般不会在beforeDestroy操作数据，因为即使操作数据，也不会再触发更新流程了。