初识Vue:
要想Vue工作,就必须创建一个Vue实例,并且传入一个配置对象;
root容器里的代码依然符合html规范,只不过混入了特殊的Vue语法:
root容器里的代码被称为【Vue模版】;
vue实例和容器是一一对应的;
真实开发中只有一个vue实例,并会配合组件一起使用
{{×××}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性
若data中的数据发生改变,那么模板中用到该数据的地方也会自动更新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
//引入Vue
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
//准备好一个容器
<div id="root">
<h1>hello {{name}}</h1> //{{name}}是在接收后面的name
</div>
<script type="text/javascript">
//创建Vue实例
new Vue({
el:'#root',
data:{
name:'world'
}
})
</script>
</body>
</html>
模版语法
1.插值语法:
功能:用于解析标签体内容。
写法:{{xxx}},xxx是js表达式,且xxx可以自动读取到data中的所有属性
2·指令语法:
功能:用于解析标签(包括:标签属性、标签体内容、绑定事件....)
举例:v-bind:href="xxx" 或 简写为:href="xxx", x××同样要写js表达式,
且可以直接读取到data中的所有属性。
备注:vue中有很多的指令形式都是:v-???
v-bind 单向绑定
v-model 双向绑定 只能应用在表单类元素(输入类元素 如input select)
data与el的2种写法
1.el有2种写法
new Vue时候配置el属性。
先创建vue实例,随后再通过vm.$mount('#root')指定el的值。
2.data有2种写法
对象式
函数式 data(){
}
如何选择:组件 data必须使用函数式
3.一个重要的原则:
由vue管理的函数,一定不要写箭头函数,写了箭头函数,this就不再是vue实例了。
enumerable:true, //控制属性值是否可以枚举,默认值是false
writable:true, //控制属性是否可以被修改,默认值是false
configurable:true //控制属性是否可以被删除,默认值是false
let num = 18
let person = {
name:'ws',
sex:'boy',
}
//当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值
Object.defineProperty(person,'age',{
get(){
return num
}
//当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具体值
set(value){
num = value
}
})
事件的基本使用:
使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名:
事件的回调需要配置在methods对象中,最终会在vm上:
methods中配置的函数,不要用箭头函数!否则this指向的就不是vm了:
methods中配置的函数,都是被vue所管理的函数,th的指向是vm 或 组件实例对象
@click= "demo" 和 @click="demo($event)" 效果一致,但后者可以传参
vue中的事件修饰符:
prevent:阻止默认事件(常)
stop:阻正事件冒泡(常)
once:事件只触发一次(常)
capture:使用事件的捕获模式
se1f:只有event.target是当前操作的元素才是触发事件
passive:事件的默认行为立即执行,无需等待事件回调执行完毕
1.vue中常用的按键别名:
回车=>enter
删除=>delete(捕获“删除”和“退格”键)
退出=>esc
空格=>space
换行=>tab(要配合keydown使用)
上=>up
下=>down
左=>left
右=>right
2.vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)
3.系统修饰键(用法特殊):ctrl、alt、shift、meta
(1)配合keyup使用:按下修饰键的同时,再按一下其他键,随后释放其他键,事件才被触发。
(2)配合keydn使用:正常触发事件。
4.也可以使用keycode去指定具体的按键(不推荐)
5.Vue.config.keyCodes.自定义键名=键码,可以去定制按键别名
计算属性:
1.定义:要用的属性不存在,要通过己有属性计算得来。
2.原理:底层借助了Objcet.defineproperty方法提供的getter和setter
3.get函数什么时候执行?
(1)初次读取时会执行一次。
(2)当依賴的数据发生改变时会被再次调用。
4.优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。
5.备注:
1·计算属性最终会出现在vm上,直接读取使用即可。
2·如果计算属性要被修改,必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变
监视属性watch:
1.当被监视的属性变化时,回调函数自动调用,进行相关操作
2.监视的属性必须存在,才能进行监视
3.监视的两种写法:
(1)new vue时传入watch配置
(2)通过vm.$watch监视
深度监视:
(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的回调函数等),最好写成箭头函数,这样this的指向才是 vm 或 组件实例对象。
条件渲染:
1.v-if
写法:
v-if = "表达式"
v-e1se-if = "表达式"
v-else = "表达式"
适用于:切换频率较低的场景。
特点:不展示的DOM元素直接被移除。
注意:v-if可以和:v-else-if、v-else一起使用,但结构不能被“打断”
2.v-show
写法:v-show = "表达式"
适用于:切换频率较高的场景。
特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉
3.备注:使用v-if的时,元素可能无法获取到,而使用v-show一定可以获取到。
v-for指令
用于展示列表数据
语法:v-for = "(item,index) in XXX" :key="yyy"
可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)
1·虚拟DOM中key的作用:
key是虚拟DOM对象的标识,当状态中的数据发生变化时,vue会根据【新数据】生成【新的虚拟DOM】
随后vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较
比较规则:
(1)旧虚拟DOM中找到了与新虚拟DOM相同的key
若虚拟DOM中内容没变,直接使用之前的真实DOM
若虚拟DOM中内容改变,生成新的真实DOM,替换掉页面中之前的真实DOM
(2)旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM后渲染到页面
2.用index作为key可能会引发的问题
(1)若对数据进行:逆序添加、逆序删除等破坏顺序操作会产生没有必要的真实DOM更新(界面效果没问题,但效率低)
(2)如果结构中还包含输入类的DOM:会产生错误DOM更新导致界面有问题。
3.开发中如何选择key
1.最好使用每条数据的唯一标识作为key,比如id、手机号、身份证号、学号等唯一值。
2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,
使用index作为key是没有问题的。