Vue基础知识学习笔记
前言:
本篇笔记是根据李南江老师视频学习总结的,内容是老师视频讲的+自己理解为主,有些比较简单的就省略了。因为视频是2019年的了,比较久了,所以笔记内容有些用法比较旧,建议大家可以结合官网来学习更好哦!笔记内容是vue2为主,后续会继续学习vue3!(ps:笔记有不足的地方请大家多多指正呀!)
Vue官方文档
一、常用指令
- v-model:在表单控件或组件上双绑,input/textare/select
- v-once:只渲染一次
- v-cloak:数据渲染之后自动显示元素,没绑定前先隐藏,配合[v-cloak]{display:none}使用
- v-text:会覆盖原有内容,不会解析HTML
- v-html:会覆盖原有内容,会解析HTML
- v-if:条件渲染,只有true显示,false不显示不创建(消耗性能)可以直接写表达式。
- v-else:接在v-if后使用,不能单独使用
<p v-if = "true">1</p> <p v-else>2</p>
- v-else-if:在v-if和v-else之间使用
- v-show:条件渲染,只有true显示,false隐藏,无论true或false都创建,适合多次切换,性能高
- v-for:for in 循环
- v-for = “(value,index) in list”
内容 索引 数组/字符/数字对象
对象:“(value,key) in obj” { {key}}-{ {value}} - v-bind:给元素的属性绑定数据,绑定的数据合法js皆可,可省略v-bind,只写:(冒号)若v-bind对class和style绑定,:class = “[‘需绑定的类名’,…]”
- v-on:专门用于给元素绑定监听事件 @click
修饰符
.once:只触发一次回调(@click.once)
.prevent:调用event.preventDefault(),阻止默认行为
.stop:阻止事件冒泡,调用event.stopPropagation()
.self:只有当前元素触发事件,才执行回调函数
.capture:把事件冒泡变成事件捕获
按键码 keycode
自定义:Vue.config.keyCodes.f1 = 112
自定义全局指令(特点:在任何一个vue实例控制区中都可使用)
directive方法接收两个参数:指令名称,对象。指令可以在不同的生命周期阶段执行。
bind:指令被绑定到元素上的时候执行
inserted:绑定指令的元素被添加到父元素上的时候被调用
Vue.directive('自定义指令名称',{
生命周期名称 : function(el){
指令业务逻辑代码
}
});
自定义指令参数
<div id="app">
<!-- <p v-color="'blue'">我是段落</p>-->
<p v-color="curColor">我是段落</p>
</div>
<script>
Vue.directive("color", {
// 这里的el就是被绑定指令的那个元素
bind: function (el, obj) {
// el.style.color = "red";
el.style.color = obj.value;
}
});
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
curColor: 'green'
},
// 专门用于存储监听事件回调函数
methods: {
}
});
</script>
自定义局部指令(只有自定义那个实例可用)
在methods后加
directives: {
// key: 指令名称
// value: 对象
'color': {
bind: function (el, obj) {
el.style.color = obj.value;
}
}
}
二、计算属性
插值语法特点:
可以在{
{}}中编写合法js表达式
split("")分割字符串
reverse()反转字符串
join("")合并字符串
若返回值无变化,则只执行一次。
computed:{
//专门用于定义计算属性的
msg:function(){
let r = "abcde".split("").reverse().join("");
return r;
}
}
<p>{
{
msg}}</p>
三、自定义过滤器
全局(只能在插值和v-bind)一般用于格式化插入的文本数据
Vue.filter("过滤器名称",函数)
<p>{
{
name | formartStr}}</p>
Vue.filter("formartStr",function(value){
value = value.replace(/学院/g,"大学");
return value;
});
let vue = new Vue({
el: '#app',
data: {
name: "广东学院, 广州学院"
}
});
局部
filters: {
// value: 过滤器处理函数
'formartStr': function (value) {
}
}
<p>{
{
name | formartStr}}</p>
filters: {
"formartStr": function (value) {
value = value.replace(/学院/g, "大学");
return value;
}
}
四、动画
过渡动画
1、类名添加
把需要执行动画的元素放到transition组件中,进入动画会通过自动查找.v-enter/.v-enter-active/.v-enter-to类名来实现,离开动画会通过自动查找.v-leave/
.v-leave-active/.v-leave-to类名来实现。需要在上面提到的类名设置需要执行动画的元素设置状态,就可以实现过渡动画。
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
background: red;
}
.v-enter{
opacity: 0;
}
.v-enter-to{
opacity: 1;
}
.v-enter-active{
transition: all 3s;
}
.v-leave{
opacity: 1;
}
.v-leave-to{
opacity: 0;
}
.v-leave-active{
transition: all 3s;
}
</style>
<div id="app">
<button @click="toggle">我是按钮</button>
<transition>
<div class="box" v-show="isShow"></div>
</transition>
</div>
<script>
let vue = new Vue({
el: '#app',
data: {
isShow: false
},
methods: {
toggle(){
this.isShow = !this.isShow;
}
},
});
</script>
transition中只能放一个元素, 多个元素无效
初始动画设置,在transition添加appear属性,默认进入就显示动画。
给多个不同的元素指定不同的动画,在transition添加name
(//查找.one开头的类名)
2、结合钩子函数调用(可以保持动画最终的效果)
v-on:before-enter=“beforeEnter” 进入动画之前 v-on:enter=“enter” 进入动画执行过程中
v-on:after-enter=“afterEnter” 进入动画完成之后
v-on:enter-cancelled=“enterCancelled” 进入动画被取消
v-on:before-leave=“beforeLeave” 离开动画之前
v-on:leave=“leave” 离开动画执行过程中
v-on:after-leave=“afterLeave” 离开动画完成之后
v-on:leave-cancelled=“leaveCancelled” 离开动画被取消
<transition appear