下一篇:Vuejs进阶版
下一篇:Vuejs补充版
目录大纲一
Vue官方文档
一、Vue.js安装
方式一:直接CDN引入
<!-- 开发环境版本,包含了有帮助的命令行警告-->
<script src ="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度,上架产品的时候需要-->
<script src ="https://cdn.jsdelivr.net/npm/vue"></script>
方式二:下载和引入
方式三:NPM安装
二、HelloVuejs初体验
编程范式:声明式编程,优点:数据与界面进行了分离
创建了一个Vue对象时,传入了一些options属性:{}
- {}中包含了el属性:该属性决定了这个Vue对象挂载在哪一个元素上,很明显,以下是挂载到了id为app的元素上
- {}中包含了data属性:该属性中通常会存储一些数据
这些数据可以是我们直接定义出来的,比如下边的
也可能是来自网络,从服务器加载的
<body>
<div id="app">{{message}}</div>
<!--引入Vuejs-->
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',// 用于挂载要管理的元素
data:{
// 定义数据
message:"你好啊!我的家人"
}
})
</script>
</body>
1、Vue列表展示
使用 v-for="item in 列表"
往列表中添加数据
2、案例:计数器实现点击事件
v-on:click
的语法糖写法为:@click
v-on:click="counter++"
监听事件
<div id="app">
<h2>当前计数:{{counter}}</h2>
<button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
counter:0
},
})
</script>
</body>
</html>
使用函数实现:
3、Vue中的MVVM
4、Vue的生命周期
4.1、生命周期:事物从诞生到消亡的整个过程
Vue的生命周期: new Vue()
1 – 9 为挂载流程,10 – 12 为更新流程
- new Vue()
- 初始化:生命周期、事件,但数据代理还未开始
beforeCreate(){}
此时:无法通过vm访问到data中的数据、methods中的方法- 初始化:数据监测、数据代理
created(){}
此时:可以通过vm访问到data中的数据、methods中配置的方法- Vue开始解析模板。生成虚拟DOM(内存中),页面不能显示解析好的内容
beforeMount:{}
此时:- 页面呈现的是未经Vue编译的DOM结构
- 所有对DOM的操作,最终都不奏效
- 将内存中的虚拟DOM转为真实DOM插入页面。
mounted:{}
此时:- 页面中呈现的是经过Vue编译的DOM。
- 对DOM的操作均有效(尽可能避免)。至此初始化过程结束,一般在此进行:开启定时器、发送网络请求、订阅消息、绑定自定义事件、等初始化操作
beforeUpdate(){}
此时:数据是新的,但页面时旧的,即页面尚未和数据保持同步- 根据新数据,生成新的虚拟DOM,随后与旧的虚拟DOM进行比较,最终完成页面更新,即完成了 Model ——> View 的更新
updated(){}
此时:数据是新的,页面也是新的,即页面和数据保持同步beforeDestroy()}
此时:vm中所有的:data、methods、指令等等,都处于可用状态,马上要执行销毁过程,一般在此阶段:关闭定时器、取消订阅消息、解绑自定义事件等收尾操作destroyed(){}
此时Vue彻底消失
4.2、生命周期的八个(四对)
- 补充:GitHub中
Branch——分支
dev——开发中,开发中的版本叫debug版本
tag——稳定版,准备发布的版本叫release
5、钩子事件
定义在Vue类中的函数
const app = new Vue({
el:"#app",
data:obj,
methods:{
add:function (){
console.log('add被执行');
this.counter++;
},
sub:function (){
console.log('sub被执行');
this.counter--;
}
},
// 创建实例之前执行的钩子事件
beforeCreate: function (){},
// 实例创建完成后执行的钩子
created:function (){},
// 将编译完成的HTML挂载到对应虚拟Dom时触发的钩子,此时页面并没有内容
beforeMount:function (){},
// 编译好的HTML挂载到页面完成后执行的钩子,此钩子函数中一般会做一些ajax请求获取数据进行数据初始化
// 注意:mounted在某个实例中只执行一次
mounted:function (){}
6、代码规范:
- 缩进方式,使用两个空格
7、设置模板
设置方式
- 复制script标签的自定义模板
- File – Settings – Editor – Live Templates – Vue – ‘+’ – Live Template – 填写缩写与描述并粘贴自定义模板 – 点击Define勾选HTML – 在文中输入vue回车即可出现模板
三、插值操作【模板语法】
1、插值操作_Mustache语法
mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式
2、插值操作_其他指令
在某些情况下,我们可能不希望界面随意的跟随改变,这个时候,我们就可以使用一个Vue的指令
2.1、v-once
- 该指令后面不需跟任何表达式(比如之前的v-for后面是有跟表达式的)
- 该指令表示元素和组件只渲染一次,不会随着数据的 改变而改变
- 代码如下
响应式:当页面中的数据发生改变时,页面显示的数据会自动改变。
2.2、v-html
2.3、v-text
- v-text作用和Mustache比较相似:都适用于将数据显示在界面中
- 缺点:不灵活,当 {{}} 中有数据时,
v-text
会将该数据覆盖掉
2.4、v-pre
- 不去解析
{{message}}
,只原封不动的展示出来 - v-pre 用于跳过这个元素和它子元素的编译过程,用于显示原本的Mustache语法
- 代码如下:第一个h2元素的内容会被编译解析出来对应的内容,而第二个h2元素中会直接显示{{message}}
2.4、v-cloak
- cloak:斗篷,用在div中
- 效果:当解析到div时,会设置v-cloak为none,使用完毕后就会删除v-cloak,再将 {{}} 中的数据解析出来
- 在某些情况下,我们浏览器会直接显示出未编译的Mustache标签
- 代码如下:
2.5 、v-if
- v-if是条件渲染指令,它根据表达式的真假来删除和插入元素,它的基本语法如下:v-if=“expression”,expression是一个返回bool值的表达式,表达式可以是一个bool属性,也可以是一个返回bool的运算式
四、自定义指令
1、函数式
添加 directives:{}
,但是定义的directives:{}
中的函数切记没有返回值
函数中传入的两个参数,一个是绑定使用所在的HTML标签,另一个参数是绑定的元素
需求:定义一个 v-big 指令,和 v-text 功能类似,但会把绑定的数值放大10倍
2、对象式
需求:定义一个 v-fbind 指令,和 v-bind 功能类似,但可以让其所绑定的 input 元素默认获取焦点
一般自动获取焦点的方法式:
接下来使用对象式解决
3、总结
自定义指令directives
中的this
指的是全局windows
五、绑定属性
单向绑定 v-bind
1、v-bind
- 起因:除了内容需要动态决定之外,某些属性我们也希望动态来绑定
- 作用:动态绑定属性
- 缩写::
- 预期:any (with argument) | Objecr (without argument)
- 参数:attrOrProp (optional)
1.、v-bind语法糖
- 语法糖:其简写方式。在开发中,通常使用语法糖的形式,因为更加简洁
- 简写方式如下:
2、v-bind动态绑定class
2.1、v-bind动态绑定class(方式一:字符串写法)
适用于class样式的类名不确定时,需要动态指定
将class属性的值放在数组中进行调用
2.2、v-bind动态绑定class(方式二:数组语法)
适用于:要绑定的样式个数不确定、名字也不确定
绑定数组:class="classArr"
,在实现的方法中通过调用shift
和push
方法对class样式进行添加
- 数组语法的含义是:class后面跟的是一个数组
- 用法如下
2.3、v-bind动态绑定class(方式三:对象语法)
适用于:要绑定的样式个数确定、名字也确定,但要动态决定用不用
可以将绑定的class名作为布尔值进行判断true
和false
点击事件不需要加()
,绑定类函数需要加()
通过不同的class的布尔值,判断该属性是否被添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind动态绑定class(对象语法)</title>
<style>
.active{
color: red;
}
.line{
text-decoration: underline;
}
</style>
</head>
<body>
<div id="app">
<!-- {}表示的是对象,当Boolean值为true时,表示添加-->
<!-- <h2 v-bind:class="{类名1: boolean, 类名2: boolean}"> {{message}} </h2>-->
<h2 v-bind:class="{active: isActive, line: isLine}"> {{message}} </h2>
// 绑定点击事件
<button v-on:click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
isActive: true,
isLine: false
},
methods: {
btnClick:function (){
// 控制再次点击使得active属性值为false
this.isActive = !this.isActive;
}
}
})
</script>
</body>
</html>
3、v-bind动态绑定style
- 对象绑定均是 key:value 格式,
- v-bind:class=“{类名1: boolean, 类名2: boolean}”> {{message}}
- 但在此处用到的是 key(属性名):value(属性值),
- key表示类名无需加单引号,value加单引号表示字符串,不加单引号表示是变量,需要在 new Vue 中进行定义
3.1、对象语法
3.2、数组语法
4、解绑事件
-
第一种:this.$off()
-
第二种:直接使用钩子函数destroy
2、v-model
双向绑定 v-model
v-model:value="name"
的语法糖简写为:v-model="name"
1、表单绑定 v-model
Vue中使用 v-model 指令来实现表单元素和数据的双向绑定
案例解析:
- 当我们在输入框输入内容时
- 因为 input 中的 v-model 绑定了 message,所以会实时将输入的内容传递给message,message发生改变
- 当message发生改变时,因为上面我们使用Mustache语法,将 message 的值插入到DOM中,所以DOM会发生响应的改变
- 所以,通过v-model 实现了双向的绑定
我们也可以将v-model用于textarea
2、v-model原理
3、v-model结合radio类型
- 制作按钮事件时,一般先做一个 label ,在 label 中放置input,这样可实现点击文字实现点击效果
- radio 按钮:name 相同时实现互斥效果 / 或者有 v-model 属性时,也可实现互斥
- 原理:服务器把 name 作为 key 传到服务器,key 只有一个所以实现互斥
4、v-model结合checkbox类型
5、v-model结合select类型
https://www.cnblogs.com/zhuhukang/p/15411337.html
6、input 中的值绑定
7、v-model修饰符的使用
六、计算属性
1、计算属性
- 原理:底层借助了Object.defineproperty 方法提供的 getter 和 setter。
- 我们知道,在模板中可以直接通过插值语法显示一些data中的数据
- 但是在某些情况下,我们可能需要对数据进行一些转换后再显示,或者需要将多个数据结合起来进行显示
- 比如我们有 firstName和lastName两个变量,我们需要显示完整的名称fullName
- 但是如果多个地方都需要显示完整的名称,我们就需要写多个 {{firstName}} {{lastName}}
2、计算属性setter和getter
2.1、set
- 计算属性一般没有set方法,如果计算属性要被修改,那必须写set 函数去响应修改,且 set 中要引起计算时依赖的数据发生改变。
- 当没有可以set方法时,可以看成是只读属性(不常用)
2.2、get
- get函数什么是会后执行
- 初次读取时会执行一次
- 当依赖的数据发生改变时会被再次调用
- 在调用计算属性的时候会使用get中的返回值作为计算属性
- 一般省略写成以下形式
fullName: function (){
return 'abc'
}
3、计算属性和methods的对比
- 总结:多使用计算属性,而不是methods方法函数
- 效率:计算属性 > methods
- 与 methods 实现相比,内部有缓存机制(复用),效率更高,调试方便
4、计算属性的简写
直接上图解释:
案例:求书籍总价的三种方式:https://www.cnblogs.com/zhuhukang/p/15368384.html
七、监视属性
通过监测新值与旧值的变化来确定接下来需要做的事情
1、监视属性watch
- 当被监视的属性变化时,回调函数自动调用,进行相关操作
- 监视的属性必须存在,才能进行监视!
- 监视的两种写法:
-
new Vue 时传入 watch配置
-
通过vm.$watch监视
-
2、深度监视
-
在data中定义如下属性,其中isHot是一层属性,numbers是多层级属性()numbers中有a,b,
-
Vue中的watch默认不监测对象内部值的改变(一层)
-
配置
deep:true
可以监测对象内部值改变(多层)
-
Vue自身可以监测对象内部值的改变,但Vue提供的watcch默认不可以!
-
使用watch时根据数据的具体结构,决定是否采用深度监视
3、监视的简写
-
使用前提:当不需要初始化调用immediate和深度监视deep的时候
-
在watch中的正常写法和简写
-
第二种简写
4、watch和computed对比
我们以姓名为案例:
computed的写法:
watch 的写法
因此,computed计算属性是无法开启异步任务的,当需求是要开启异步任务比如延迟触发时,就需要用到watch监听属性
5、监视属性的原理
案例:对数据进行列表模糊查询
watch 实现
<body>
<div id="app">
<h2>列表过滤</h2>
<!-- 搜集用户的输入 -->
<input type="text" placeholder="请输入搜索关键字" v-model="keyWord">
<ul>
<li v-for="(p,index) of filPersons" :key="index">
{{p.name}}-{{p.age}}-{{p.sex}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
keyWord:"",
// 源数据
persons:[
{id:001,name:"马冬梅",age:19,sex:"女"},
{id:003,name:"周杰伦",age:20,sex:"男"},
{id:004,name:"温兆伦",age:21,sex:"男"},
{id:002,name:"周冬雨",age:22,sex:"女"},
],
// 过滤后的数据
filPersons:[]
},
watch:{
keyWord:{
immediate:true,
handler(newVal){
this.filPersons = this.persons.filter((p)=>{
// 拿到persons中的每一个对象p,return p.name中是否包含newVal
return p.name.indexOf(newVal) !== -1
})
}
}
}
});
</script>
</body>
computed实现
<body>
<div id="app">
<h2>列表过滤</h2>
<!-- 搜集用户的输入 -->
<input type="text" placeholder="请输入搜索关键字" v-model="keyWord">
<ul>
<li v-for="(p,index) of filPersons" :key="index">
{{p.name}}-{{p.age}}-{{p.sex}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
keyWord:"",
// 源数据
persons:[
{id:001,name:"马冬梅",age:19,sex:"女"},
{id:003,name:"周杰伦",age:20,sex:"男"},
{id:004,name:"温兆伦",age:21,sex:"男"},
{id:002,name:"周冬雨",age:22,sex:"女"},
],
},
// 计算属性实现
computed:{
filPersons(){
return this.persons.filter((p)=>{
// 拿到persons中的每一个对象p,return p.name中是否包含newVal
return p.name.indexOf(this.keyWord) !== -1
})
}
}
});
</script>
</body>
八、ES6补充
1、块级作用域 - let 和 var
- 我们可以将 let 看成更完美的 var
- 案例:点击按钮打印点击的是第几个按钮
const btns = document.getElementsByTagName('button');
for (let i = 0;i<btns.length;i++){
btns[i].addEventListener('click',function (){
console.log('第'+i+'个按钮被点击')
})
}
ES5中只有函数 function 有作用域,而 if 和 for 都没有作用域
2、const的使用
- 使用const修饰的标识符不会被再次赋值,可以使用const来保证数据的安全性
- 在ES6开发中,有限使用const,只有需要改变某一个标识符的时候才使用let
- const注意
- 注意一:一旦给const修饰的标识符被赋值之后,不能修改
const a = 20; a = 30; // 错误:不可以修改
- 注意二:在使用const定义标识符,必须进行赋值
const name; // 错误: const修饰的标识符必须赋值
- 注意三:常量的含义是指向的对象不能修改,但是可以改变对象内部的属性
const obj = { name:'Kobe', age : 18 } obj.age = 40; // 当const标识对象时,对象内部的属性是可以改变的
3、对象增强写法
- ES6 中,对对象字面量进行了很多增强
- 属性初始化简写和方法的简写
九、事件处理
1、v-on基础
- 作用:绑定事件监听器
- 缩写:@
- 预期:Function | Inline Statement | Object
- 参数:event
2、v-on参数
- 情况一:如果该方法不需要额外参数,那么方法后的 () 可以不添加
- 但是注意:如果方法本身中有一个参数,那么方法后的()可以不添加
- 情况二:如果需要同时传入某个参数,同时需要even时,可以通过 $even 传入事件
3、事件修饰符
- 在某些情况下,我们拿到event的目的可能是进行一些事件处理
- Vue提供了修饰符来帮助我们方便的处理一些事件:
- .stop 阻止默认事件【常用】,调用event.stopPropagation(),修饰于内块
- .prevent ,阻止默认事件【常用】,等同于调用event.preventDefault()
- .{keyCode | keyAlias} 只当事件是从特定键触发时才会触发回调
- .native 监听组件根元素的原生事件
- .once 只触发一次【常用】
- .capture,使用事件的捕获模式,实现先捕获后冒泡,捕获的元素先执行
- .self,只有 event.target 是当前操作的元素时才触发事件
- .passive,事件的默认行为立即执行,无需等待事件回调执行完毕【一般使用在移动端开发中】
4、键盘事件
键盘上每个键都有自己的名字和编码
- @keyup.键盘别名:键盘触发事件
- @keydown.tab:Tab键按下触发
- 键盘的同时按下才触发
十、条件判断
1、v-if、v-else-if、v-else
Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件
1.1、简单的案例演示
1.2、v-if的原理
- v-if 后面的条件为 false 时,对应的元素以及其子元素不会渲染
- 也就是根本没有不会有对应的标签出现在DOM中
2、条件渲染案例
2.1、用户在登录时,可以切换用户的账号登录还是邮箱地址登录
2.2、案例中存在的问题
- 问题:在有输入内容的情况下,切换了类型,我们会发现文字依然显示之前输入的内容
- 原因:因为 Vue 在进行 DOM 渲染时,处于性能考虑,会尽可能的复用已经存在的元素,而不是重新创建新的元素
- 解决:为了解决出现类似重复利用的问题,可以给对应的 input 添加 key ,并且我们需要保证 key 的不同
3、v-show 与 v-if,均是决定一个元素是否渲染
-
v-if :根据表达值的真假,切换元素的显示和隐藏(操纵dom元素),当条件为 false 时,包含 v-if 指令的元素,根本就不会在DOM中
-
v-show :当条件为 false 时,v-show 只是给我们的元素添加了一个行内样式:display : none
开发中我们如何选择呢?
- 当需要在显示与隐藏之间切换很频繁时,使用 v-show
- 当只有一次切换时,通过使用 v-if
template
只能配合v-if
使用,template
在页面渲染的时候会自动消失,而现实template
内的内容
十一、循环遍历
1、v-for遍历数组
- 使用场景:当我们有一组数据需要进行渲染时
- 格式:
v-for = "(item,index) in items" :key="index"
其中 的index代表在原数组的索引值
2、v-for遍历对象
- 1、在遍历对象的过程中,如果只是获取一个值,那么获取到的是value
- 2、获取key和value方式:
v-for="(value,key) in info
- 3、获取key、value和index:
v-for="(value,key,index) in info
3、key 作用与原理[面试集锦]
案例:index作为key,新增数据在旧数据之前添加,
.unshift()
逆序添加【顺序添加两者绑定无区别】
3.1、index作为key[不绑定key值时,一般Vue默认index作为key]
3.2、id 作为key[效率高]
3.3、总结
react、Vue 中的 key 有什么作用(key的内部原理)
4、数组中哪些方法是响应式的——监测数组更新
阶段案例
案例一:点击列表中的哪一项,那么该项文字变为红色
案例二:图书购物车
十二、JavaScript高阶函数的使用
1、过滤器 filter 函数
注意:filter 中的回调函数有一个要求:必须返回一个 boolean 值
- 返回值为 true 时,函数内部会自动将这次回调的 n 加入到新的数组中
- 当返回 false 时,函数内部会过滤掉这次的 n
2、map 函数的使用
使用情况:对数组中的所有元素都进行变化时
3、reduce函数
作用: 对数组中所有的内容进行汇总
var num = [1,2,3,4,5];
var res = num.reduce(function(total,num){
return total+num;
//return total + Math.round(num);//对数组元素四舍五入并计算总和
},0);
console.log(res);//15
//num.reduce((total,num) => total += num, 0);
//没有初始值initialValue(即上面例子中的0),当数组为0时会抛出异常提示reduce函数没有初始值,所以为兼容性一般加上initialValue
4、案例:对nums数组中的小于100的每一项乘以二并取和【使用高阶函数实现 】
箭头函数写法:
点击跳转:下一篇:Vuejs进阶版