一,Vue核心
1.1 vue简介
- 采用组件化,提高代码复用率
- 声名式编码,无需操作DOM提高开发效率
- 使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点。
原本是新增的东西一股脑的覆盖,现在是有个虚拟的DOM原本有的就给保留,然后插入新的东西
初识Vue:
1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象;
2.root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法;
3.root容器里的代码被称为【Vue模板】;
1.2初识vue
1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象;
2.root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法;
3.root容器里的代码被称为【Vue模板】;
4.Vue实例和容器是一一对应的;
5,真实开发中只有一个Vue实例并且会配合着组件一起使用;
6.{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性;(如果data里面的数据是字符串就可以在大括号里面使用字符串的属性)
7.一旦data中的数据发生改变,那么模板中用到该数据的地方也会自动更新;
[!danger]
一个容器只能对应一个Vue实例
{{}}里面包裹的必须是js表达式
注意区分:js表达式和js代码(语句)
1.表达式:一个表达式会生成一个值,可以放在任何一个需要值的地方:
(1). a
(2). a+b
(3). demo(1)
(4).x === y ? ‘a’ : ‘b’
目的:因为数据是动态的,为了一旦把动态数据交给vue实例,以后vue中的数据发生变化,整个页面的这个地方也一起发生变化
这个root代表的是根,是Vue实例
1.3vue模板语法
1.3.1 插值语法&指令语法
<h1>hello,{{name}}</h1>
<script type="text/javascript">
new Vue({
el: '#root', //el用于指定当前Vue实例为那个容器服务,值通常为css选择器字符串
data: { //data用于存储数据,数据供el所指定的容器使用
name: '哈哈哈'
}
})
</script>
```
` <a href={{ url}}>11111</a>`
这种不能插入url
```vue
<div id="root">
<!-- 插值语法 -->
<h1>hello,{{name}}</h1>
<a v-bind:href="url">11111</a>
</div>
绑定:把表达式执行的结果绑定给href
这里就是把绿色框里面的url当初表达式来执行而不是字符串
v-bind: 可以简写成:
总结
插值语法往往用在标签体里面,指令语法往往用在标签属性,事件等
1.4 vue数据绑定
v-bind 只是单向的数据绑定
v-model双向绑定
<input type="text" v-model:value="name">
[!danger]
v-model只能应用在表单类元素上面
总结:
Vue中有2种数据绑定的方式:
1.单向绑定(v-bind):数据只能从data流向页面。
2.双向绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data。
备注:
1.双向绑定一般都应用在表单类元素上(如: input、select等)
2.v-model:value 可以简写为v-model,因为v-model默认收集的就是value值.。
el和data的两种写法
l/el的两种写法
const v = new Vue({
el: " #root', //第一种写法
data:{
name:"尚硅谷'
})
console.log(v)
v.$mount('#root')//第二种写法*/
灵活使用容器
data
//data的第二种写法:函数式
data:function(){
return{
name:"尚硅谷
}
}
这种function函数是由vue对象来调,但是箭头函数不行
另外可以简写成
data(){
return{
name:"尚硅谷
}
}
1.5MVVM模型
1.M:模型(Model) :对应data中的数据
2.V:视图(View):模板
3.VM:视图模型(ViewModel) : Vue实例对象
[!理解]
view是html中我们设置的模板,model是数据,vm是实现模型和数据绑定的对象
观察发现:
1.data中所有的属性,最后都出现在vm身上。
2.vm身上所有的属性及Vue原型上所有属性,在Vue模板中都可以直接使用。
1.6 数据代理
defineProperty 让number与age产生了关联
我们可以把vue看成别人封装好的工具类,传入的参数是自身的自定义类,该自定义类继承了vue接口,可定义vue接口的属性值,也可以自行定义成员变量,成员属性,成员方法等,这些都可以被vue实例接管
1.7 事件处理
<div id="root">
<h2>欢迎来到{{name}}学习</h2>
<!-- <button v-on:click="showInfo">点我提示信息</button> --><button @click="showInfo1">点我提示信息1</button>
<button @click="showInfo2($event,66)">点我提示信息2</button></div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false l/阻止 vue在启动时生成生产提示。
const vm = new Vue({
el: " #root',
data:{
name:'尚硅谷'}
methods:{
showInfo1(event){ …
showInfo2(event, number)iconsole.log(event,number)
// console.log(event.target.innerText)l / console.log(this)//此处的this是vmll
alert( '同学你好!!')I
F
}})
/script>
1.7.2事件修饰符
1.prevent: P阻止队手件(滑用);
2.stop:阻止事件冒泡(常用);
3.once:事件只触发一次(常用);
4.capture:使用事件的捕获模式;
5.self:只有event.target是当前操作的元素时才触发事件;
6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕;
使用捕获模式,先捕获再冒泡
self:只有event.target是当前操作的元素时才触发事件;
1.7.3. 按键修饰符
- keycode : 操作的是某个 keycode 值的键
- .keyName : 操作的某个按键名的键(少部分)
1.Vue中常用的按键别名:
回车 => enter
删除=>delete(捕获“删除”和“退格”键)退出=>esc
空格=>space
换行=> tab(特殊,必须配合keydown去使那
上=> up
下=> down
左=>left
右=> right
2.Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)
3.系统修饰键(用法特殊): ctr1、alt、shift、meta
(1).配合keyup使用:按下修饰健的同时,再按下其他键,随后释放其他键,事件才被触发。
(2).配合keydown使用:正常触发事件。
4.也可以使用keyCode去指定具体的按键(不推荐)
5.Vue.config.keyCodes.自定义键名=键码,可以去定制按键别名
返回值插值进大括号
1.8 计算属性
1.定义:要用的属性不存在,要通过已有属性计算得来。
2.原理:底层借助了objcet.defineproperty方法提供的getter和setter.
3.get函数什么时候执行?
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。5.备注:
1.计算属性最终会出现在vm上,直接读取使用即可。
2.如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生变化
简写
1.9监视属性
const vm = new Vue({el: " #root',
data:{
isHot:true,},
computed:{ …methods: {…watch:{
isHot:{
immediate:true, //c初始化时让handler调用一下
// handler什么时候调用?当isHot发生改变时。
handler(newValue,oldValue){
console.1og('isHot被修改了" ,newValue,oldvalue}
}
}
}
)
vm.$watch( 'isHot",{
immediate:true,//初始化时让handler调用一下l/ handler什么时候调用?当isHot发生改变时。handler(newValue,oldvalue){
console.log( 'isHot被修改了',newValue,oldValue)}
})
1.9.2深度监视
深度监视:
(1).Vue中的watch默认不监测对象内部值的改变(一层)。
(2).配置deep:true可以监测对象内部值改变(多层)。备注:
(1).Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以!
(2).使用watch时根据数据的具体结构,决定是否采用深度监视
简写
1.10 watch对比computed
computed和lwatch之间的区别:
1.computed能完成的功能,watch都可以完成。
2.watch能完成的功能,computed不一定能完成,例如: watch可以进行异步操作。两个重要的小原则:
1.所被Vue管理的函数==(外面是windows),最好写成普通函数,这样this的指向才是vm或组件实例对象。
⒉.所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数),最好写成箭头函数(外面是vue)==,这样this的指向才是vm或组件实例对象。
箭头函数this等于父级函数this指向,下面的定时器必须用箭头函数,不能用普通函数。
如果定时器中的回调函数使用的是箭头函数,则会往上一级函数中去寻找this
setTimeout的系统调用的所以里面的this是windows
1.11绑定样式
绑定class样式
:class
后面的式子当做表达式使用
<div id="root">
<div class="basic" :class="happy" @click="changeMood">{{name}}</div>
</div>
</body>
<!--准备好一个容器--><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="class0bj">{{name}}</div>
</div>
绑定style样式
1.12条件渲染
v-show
条件为false隐藏
v-if
条件为false直接就没有
v-else-if
v-else
连在一起使用不能被打断
template 不影响结构
1.13列表渲染
遍历数组
<div id="root"><h2>人员列表</h2><ul>
<li v-for="p in persons" :key="p.id">{ip.name}}-{{p.age}}
</li>
</ul></div>
data:{
persons:[
{id: '001" ,name:"张三",age:18},
{id: "002 " ,name:"李四",age: 19},
{id: "003" ,name:'王五',age:20}]
}
每个列表项都会自动分配相应顺序的index代表遍历时的索引值
<div id="root">
<h2>人员列表</h2>
<ul>
<li v-for="(p,index) in persons" :key="index">{{p.name}}-{{p.age}}
</li>
</ul></div>
遍历对象
data里面的一个car对象
car:{
name:'奥迪A8',
price: '70万',
color:'黑色'
}
<ul>
<li v-for=" (value,k) of car" :key="k">
{{k}}-{{value}}
</li>
</ul>
遍历字符串
str : ' hello'
<ul>
<li v-for="(char,index) of str":key="index>
{{a}}-{{b}}
</li>
</u1>
遍历指定次数
1.14key的作用与原理
1。虚拟DOM中key的作用:
key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据【新数据】生成【新的虚拟DoN》,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较,比较规则如下:
2.对比规则:
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key:
o.若虚拟DOM中内容没变,直接使用之前的真实DOM !
@.若虚拟DOM中内容变了,则生成新的真实DOM,随后替换掉页面中之前的真实DOM.
(2).旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM,随后渲染到到页面。
3,用index作为key可能会引发的问题:
1。若对数据进行:逆序添加、逆序删除等破坏顺序操作:
会产生没有必要的真实DOM更新==>界面效果没问题,但效率低。
2.如果结构中还包含输入类的DOM:
会产生错误DOM更新==〉
界面有问题。
4。开发中如何选择key? :
1.最好使用每条数据的唯一标识作为key,比如id、手机号、身份证号、学号等唯一值。2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,
使用index作为key是没有问题的。
1.14 列表渲染
用watch实现
new Vue({
el : " #root',
data:{
keyword: ' ',
persons:[
{id: "001 " ,name:'马冬梅',age: 19,sex :'女'},
{id: '062 " ,name:"周冬雨",age: 20,sex :'女'},
{id: '003" ,name:"周杰伦',age:21,sex:"男"},
{id: "004" ,name:温兆伦',age:22,sex:"男}],
filPerons:[]
},
watch:{keyword:{
immediate:true,
handler(val){
this.filPerons = this.persons.filter((p)=>{
return p.name.indexOf(val) l== -1
})
}}}})