Vue核心
特点
- 采用组件化模式,提高代码复用率、且让代码更好维护
- 声明式编码,让编码人员无需直接操作DOM,提高开发效率
- 使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点
- 想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象
- root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法
- root容器里的代码被称为Vue模板
插值语法例子:
<body>
<div id="root">
<h1>Hello,{
{name}}</h1>
</div>
<script type="text/javascript">
// Vue.config.productionTip = false;
//创建Vue实例
new Vue({
el: '#root', //el用于指定当前Vue实例为那个容器服务,值通常为css选择器字符串
data: {
//data中用于存储数据,数据供el所指定的容器去使用,值暂时先写成一个对象
name: '陈润z'
}
})
</script>
</body>
每个容器一一对应
指令语法例子:v-开头
-
单向绑定(v-bind:)数据只能从data流向页面
-
双向绑定(v-model)数据不仅能从data流向页面,还可以从页面流向data
- 只能用在表单类元素(输入类元素)上
- v-model:value可以简写为v-medel
data与el的2种写法
- el有两种写法
- new vue时候配置el属性
- 先创建vue实例,随后再通过vm.$mount(‘#root’)指定el的值
- data有两种写法
- 对象式
- 函数式
- 目前两种都可以用,学到组件时,data必须使用函数式,否则会报错
- 一定不要写箭头函数,this只需window而不是vue
事件修饰符
鼠标事件:
- prevent:阻止默认事件
- stop:阻止事件冒泡
- once:事件只触发一次
- capture:使用事件的捕获模式
- self:只有event.target是当前操作的元素是才出发事件
- passive:事件的默认行为立即执行,无需等待事件回调执行完毕
键盘事件:
- 回车:enter
- 删除:delete
- 退出:esc
- 空格:space
- 换行:tab
- 上:up
- 下:down
- 左:left
- 右:right
Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case
系统修饰键:ctrl、alt、shift、meta
配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发
配合keydown使用:正常触发事件
vue中允许链式编程
计算属性
- 定义:要用的属性不存在,要通过已有属性计算得来
- 原理:底层借助了Objcet.defineproperty方法提供的getter和setter
- get函数什么时候执行
- 初次读取时会执行一次
- 当依赖的数据发生改变时会被再次调用
- 优势:与methods实现相比,内部有缓存机制(复用)效率更高,调试方便
- 备注:
- 计算属性最终会出现在vm上,直接读取使用即可
- 如果计算属性要被修改,那必须写set函数去响应修改,切set中要引起计算时依赖的数据发生变化
监视属性watch
- 当被监视的属性变化时,回调函数自动调用,进行相关操作
- 监视的属性必须存在,才能进行监视!!!
- 监视的两种写法
- new Vue时传入watch配置
- 通过vm.$watch监视
深度监视
- Vue中的watch默认不监测对象内部值的改变(一层)
- 配置deep:true可以监测对象内部值的改变(多层)
- 备注
- vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以!
- 使用watch时根据的具体结构,决定是否采用深度监视
computed和watch之间的区别:
- computed能完成的功能,watch都可以完成
- watch能完成的功能,computed不一定能完成,例如watch可以进行异步操作
两个细节:
- 所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm或组件实例对象
- 所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等),最好写成箭头函数,这样this的指向才是vm或组件实例对象
Vue本身有自带的监测信息是否改变,但是有一个bug,用如下方法Vue开发者工具无法监测到无法监测到
//可以被监测到
this.persons[0].name = 'xxx'
this.persons[0].age = 50
this.persons[0].sex = '男'
//无法被监测到
this.persons[0]={id:'001',name:'xxx',age:'50',sex:'男'}
Vue监测数据的原理
创建Vue数据时会把变量进行数据代理,Vue给它set get方法,如果不是一开始就创建的,则无法成功代理,也就无法完成响应式操作,一个对象中想用的数据一定要提前配置好.Vue提供了后期添加响应式数据的方法:Vue.set(‘想要给谁添加数据’,‘键’,‘值’) 或者vm.$set(),注意:这个方法只能给data数据里某一个对象里面追加属性,不能直接给data追加属性
Vue无法监测到数组里的的数据,数组对象Vue无法创建set get方法——无法响应式操作
但是在数组中可以调用数组中对应的7个方法,修改完数组后Vue重新编译并在页面展示
- Vue会监视data中所有层次的数据
- 如何监测对象中的数据
- 通过setter实现监视,且要在new Vue时就传入要监测的数据
- 对象中追加的属性,Vue默认不做响应式处理
- 如需给后添加的属性做响应式,请使用如下API
- Vue.set(‘想要给谁添加数据’,‘键’,‘值’)
- vm.$set(‘想要给谁添加数据’,‘键’,‘值’)
- 通过setter实现监视,且要在new Vue时就传入要监测的数据
- 如何监测数组中的数据?
- 通过包裹数组更新元素的方法实现,本质就是做了两件事:
- 通过包裹数组更新元素的方法实现,本质就是做了两件事
- 调用原生对应的方法对数组进行更新(7个)
- 重新解析模板进而更新页面 同上API
- 通过包裹数组更新元素的方法实现,本质就是做了两件事
- 通过包裹数组更新元素的方法实现,本质就是做了两件事:
- 在Vue修改数组中的某个元素一定要用如下方法
- push() pop() shift() unshift() splice() sort() reverse()
- Vue.set() 或 vm.$set()
- 特别注意:Vue.set() 和vm.$set() 不能给vm或vm的 根数据对象添加属性!!! data和data在data一级的对象
绑定样式:
v-bind:class 缩写 :class
- class样式
- 写法:class=“xxx” xxx可以是字符串、对象、数组
- 字符串写法适用于:类名不确定,要动态获取
- 对象写法适用于:要绑定多个样式,个数不确定,名字也不确定
- 数组写法适用于:要绑定多个样式,个数确定,,名字也确定,但不确定用不用
- style样式
- :style="{fontSize:xxx}"其中xxx是动态值
- :style="{a,b}"其中a、b是样式对象 样式对象必须是Css样式里存在的,而且要符合驼峰命名规则
<body>
<div id="root">
<div class="basic" :class="mood" @click="changeMood">{
{name}}</div>
<div class="basic" :style="styleObj">{
{name}}</div>
</div>
<script>
new Vue({
el: '#root',
data: {
name: '陈润喆',
mood: 'normal',
styleObj: {
fontSize: '40px'
}
},
methods: {
changeMood() {
const arr = ['happy', 'sad', 'normal']
const index = Math.floor(Math.random() * 3) //向下取整,取值0 1 2
this.mood = arr[index]
}
},
})
</script>
</body>
条件渲染
v-show v-if
v-if与template的关系
使用template模板时只可以使用v-if,否则会失效
- v-if
- 写法
- v-if=“表达式”
- v-else-if=“表达式”
- v-else=“表达式”
- 适用于:切换频率较低的场景
- 特点:不展示DOM元素直接被移除
- 注意:v-if可以和:v-else-if、v-else一起使用,但要求结构不能被打断
- 写法
- v-show
- 写法:v-show=“表达式”
- 适用于:切换频率较高的场景
- 特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉
- 备注:使用v-if的时,元素可能无法获取到,而使用v-show一定可以获取到
列表渲染
v-for指令
- 用于展示列表数据
- 语法:v-for=“(item,index) in xxx” :key=“yyy”
- 可遍历:数组 对象 字符串 指定次数
<body>
<div id="root">
<h2>人员列表</h2>
<ul>
<li v-for="(p,index) in persons" :key="index">
{
{p.name}}-{
{p.age}}-------{
{index}}
</li>
</ul>
</div>
<script>
new Vue({
el: '#root',
data: {
persons: [
{
id: '001', name: '张三', age: '18' },
{
id: '002', name: '李四', age: '19' },
{
id: '003', name: '王五', age: '20' }
]
}
})
</script>
</body>
用id和用key中index做唯一标识的区别,如果数据是从上面插入时,用数据中的id做唯一标识,向下插入用index。
react、vue中的key有什么作用?(key的内部原理)
- 虚拟DOM中key的作用:
- key是虚拟DOM对象的标识,当状态中的数据发生变化时,Vue会根据【新数据】生成【新的虚拟标识】随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较,比较规则如下:
- 对比规则:
- 旧虚拟DOM中找到了新虚拟DOM相同的key:
- 若虚拟DOM中内容没变,直接使用之前的真实DOM
- 若虚拟DOM中内容变了,则生成新的真实DOM,随后替换掉页面中之前的真实DOM
- 旧虚拟DOM中未找到与新虚拟DOM相同的key
- 创建新的真实DOM,随后渲染到页面
- 旧虚拟DOM中找到了新虚拟DOM相同的key:
- 用index作为key可能会引发的问题
- 若对数据进行更新:逆序添加、逆序删除等破坏
- 会产生没必要的真实DOM更新==>界面效果没问题,但效率低
- 如果结构中还包含输入类的DOM:
- 会产生错误的DOM更新==>界面有问题
- 若对数据进行更新:逆序添加、逆序删除等破坏
- 开发中如何选择key?
- 最好使用每条数据的唯一标识作为key,比如id、手机号、身份证等
- 如果不存在对数据逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,使用index作为key
- 简而言之: 用每条数据的唯一标识就完了
收集表单数据
<body>
<div id="root">
<form action="" @submit.prevent="sub">
<label for="demo">账号</label>
<input type="text" id="demo" v-model="userInfo.account">
<br