一、Vue基础指令
-
插值表达式 {{msg}} 直接读取data中的数据
-
v-cloak 用法:直接在标签上加v-cloak属在css中设置[v-cloak]{ display: none;}
-
V-text 用法:v-text=“msg” 读取data中的msg属性的值,会覆盖标签里面的内容,不会渲染标签,还是以字符串的形式渲染出来
-
V-html 用法:v-html=“msg2” 读取data中的msg2属性的值,会覆盖标签里面的内容,渲染会msg2中的标签
-
V-bind 用法v-bind:title=“myTitle” 读取data中的mytitle 并设置title=”myTitle”,可省略v-bind 直接写为:title
-
V-on 用法 v-on:click=“go” 读取methods 中的go方法 可简写为@click=“go” 可以在click后面加上
事件修饰符 用法 @click.prevent=“go” 如下
.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身(比如不是子元素)触发时触发回调
.once 事件只触发一次
键盘修饰符: 用法和事件修饰符一样(可以自定义键盘修饰符)
.enter .tab .delete(捕获“删除”和”退格“键).esc .space .up .down .left .right -
V-model 用法 v-model=“result” 使用 v-model 指令,可以实现 表单元素和 Model 中数据的双向数据绑定 且只能用在input(radio, text, address, email…) select checkbox textarea 这一类的表单元素中
-
v-bind:class简写为:class 注意在使用的时候 双引号里面的必须是字符 串,否者为变量,会到data中去寻找;
用法① :class="[‘red’, ‘thin’]" 数组中使用
用法② :class="[‘red’, ‘thin’, isactive? ‘active’:’’]" 使用三元表达式 isactive 不加引号是变量
用法③ :class="[‘red’, ‘thin’, {‘active’: isactive}]" 数组中套对象
用法④ :class="{red:true, italic:true, active:true, thin:true}" 直接使用对象 或者直接使用变量,在data中定义这个变量的值为这个对象
用法⑤ :class="‘red’" 一个的时候直接在双引号内部加单引号 作为字符 串 -
V-bind:style 简写为:style 使用方法与class大致一致
用法① :style="{color: ‘red’, ‘font-size’: ‘40px’}" 对象的形式书写
用法② :style=“h1StyleObj” 变量的方式data: { h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' } }
用法③
:class="[h1StyleObj,h1StyleObj2]"
引用多个对象 -
V-for
用法①v-for="(item,i) in list"
item是每一项中的数据 i为索引 list是data中的数据(普通数组)
实例:<p v-for="(item,i) in list">
索引值是:{{i}}----每一项是:{{item}}
用法② v-for="(item,i) in list" item是每一项中的数据 i为索引 list是data中的数据(对象数组)
实例:<p v-for="(item,i) in list">id:{{item.id}}-----name:{{item.name}}---索引为:{{i}}</p> data:{ list:[ {id: 1, name: 'zs'}, {id: 2, name: 'ls'}, {id: 3, name: 'ww'}, {id: 4, name: 'zl'} ] }
用法③ v-for 循环对象
实例:<p v-for="(value,key,i) in user">键是:{{key}}---值是:{{value}}-----索引为:{{i}}</p> data:{ user:{ id:1, name:'zs', age:18 } }
用法④ 迭代数字用法:
<p v-for="count in 10">这是第 {{ count }} 次循环</p>
注意:v-for 循环的时候,key 属性只能使用 number或者string -->
key 在使用的时候,必须使用 v-bind 属性绑定的形式,指定 key 的值
在组件中,使用v-for循环的时候,或者在一些特殊情况中,如果 v-for 有问题,必须 在使用 v-for 的同时,指定 唯一的 字符串/数字 类型 :key 值
例如:复选框选择的时候,如果不设置key,新添加一组的时候,会导致勾选之后有bug(√的不是之前√的) -
v-if和v-else 用法: v-if=“flag” v-else=“flag”
如果flag为true则执行前面的,否则执行v-else中的 -
v-if与v-show 用法: v-if=“flag” v-show=“flag”
- 一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变 v-if 较好。
- v-if 的特点:每次都会重新删除或创建元素
- v-show 的特点: 每次不会重新进行DOM的删除和创建操作,只是切换了元素的 display:none 样式
- 可以直接后面传入布尔类型值或者表达式
- vue中提供的标签
component(组件占位符,用来展示组件), template(组件模板), transition(单个动画), transitionGroup(多个动画)
二、Vue中的方法
-
可以在方法后面直接传递参数
用法: @click.prevent=“del(item.id)”
这里可以传递事件源参数 $event 在methods可以用形参来接收这个事件源参数e -
过滤器
Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示 |
html中: {{item.ctime | dataFormat(‘yyyy-mm-dd’)}}
上面的dataFormat为过滤器名称
js中定义过滤器:
全局过滤器的定义:
Vue.filter(‘过滤器名称’, function(data[,msg]){ })
函数中第一个参数 data 是管道符前面的数据 已经被规定死了
在html的过滤器名称后面可以传参数,传递的参数可以在function的形参中接收,msg为形参 'yyyy-mm-dd’为实参 (参数可以传递多个)
函数的返回值(return)将会在html中渲染私有(局部)过滤器的定义:
filters: 同为new Vue({ }) 里面的参数,与data,methods同级
私有过滤器中可以定义多个,
用法:
filters:{
dataFormat:function(data[,msg]){ },
dataFormat2:function(data[,msg]){ }
}过滤器调用的时候,采用的是就近原则,如果私有过滤器和全局过滤器 名称一致了,这时候 优先调用私有过滤器.
在一个位置可以使用多个过滤器 过滤器从前往后执行,执行完第一个过滤器,把返回值作为第二个过滤器的data
实例:{{ dt | dateFormat | dataFormate2}} -
自定义键盘修饰符
Vue.config.keyCodes.f2 = 113 113位键盘码值 -
自定义指令
自定义全局指令Vue.directive() 与过滤器相同
参数1 : 指令的名称,注意,在定义的时候,指令的名称前面,不需要加 v- 前缀,
参数2 : 是一个对象,这个对象身上,有一些指令相关的函数,这些函数可以在特定的阶段, 执行相关的操作
常用钩子函数有:
bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind:只调用一次,指令与元素解绑时调用。
用法:Vue.directive('focus', { bind: function (el) { el.focus() (不会触发) }, inserted: function (el) { el.focus() }, updated: function (el) { } })
注意:
- 和样式相关的操作,一般都可以在 bind 执行 和JS行为有关的操作,最好在 inserted 中去执行,防止 JS行为不生效 元素还在内存没有渲染到dom树中时,就可以设置属性了,但是事件在内存中执行了,在dom中就看不见,需要在插入dom树中后才能执行 例如focus
bind:function(el,binding){}
- el 是指令所绑定的元素,可以用来直接操作 DOM
- binding 一个对象,包含以下属性:
name:指令名,不包括 v- 前缀。
value:指令的绑定值,例如:v-my-directive=“1 + 1” 中,绑定值为 2。
oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression:字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中,表达式为 “1 + 1”。
arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 “foo”。
modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。
自定义私有指令 : 与过滤器一致
directives:{
'fontweight':function (el, binding) {
el.style.fontWeight=binding.value
},
'fontsize':{
bind:function (el, binding) {
el.style.fontSize = binding.value + 'px'
}
}
}
注意: 如果在bind 和 update中触发行为,可以省略对象,直接后面接处理函数 如上述的 fontweight;
指令名称如果驼峰命名 fontWeight 则需要在html中书写成v-font-weight
-
生命周期函数
①beforeCreate 刚初始化了一个Vue空的实例对象,这时候,对象身上,只有默认的一些生命周期函数和默认的时间,其它的东西都未创建
注意: 在beforeCreate生命周期函数执行的生活,data和methods中的 数据还没有被初始化
②created 在created中,data和methods都已经被初始化好了!如果要调用methods的方法或者操作data中的数据,最早,只能在created中操作
③beforeMount 此函数执行的时候,模板已经在内存中编译好了,但是尚未挂载到页面中去,此时,页面还是旧的
④mounted 将内存中编译好的模板真实 的替换到浏览器的页面中去,整个vue实例化完毕,组件脱离创建阶段,进入到运行阶段
⑤beforeUpdate 页面中显示的数据还是旧的,但是data中的数据已经更新了
⑥updated data与页面已经同步,都是最新的
⑦beforeDestory Vue实例已经从运行阶段,进入到了销毁阶段,实例上的data和methods过滤器,指令都处于可用状态,还没有真正的校徽
⑧destroyed 全部销毁 -
vue-resource的使用
① 请求方式的用法get(url,[config]) head(url,[config]) delete(url,[config])
jsonp(url, [config]) post(url, [body], [config])
put(url,[body], [config]) patch(url, [body], [config])② 用法post get jsonp
this.$http.get('url').then(function (result) {
// 通过 result.body 拿到服务器返回的成功的数据
// console.log(result.body)
})
this.$http.post('url', {数据}, { emulateJSON: true }).then(result => {
})
手动发起的 Post 请求,默认没有表单格式,所以,有的服务器处理不了
通过 post 方法的第三个参数, { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式
第一个参数: 要请求的URL地址
第二个参数: 要提交给服务器的数据 ,要以对象形式提交给服务器 { name: this.name }
第三个参数: 是一个配置对象,要以哪种表单数据类型提交过去
this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result =>
})
③ 请求数据注意事项
在methods中定义的方法需要调用,可用在生命周期函数created中调用,beforeCreate中,data与methods还没有初始化,不能调用.
④ 全局配置数据接口的根域名
用法: Vue.http.options.root = ‘http://vue.studyit.io/’;
如果我们通过全局配置了,请求的数据接口 根域名,则 ,在每次单独发起 http 请求的时候,请求的 url 路径,应该以相对路径开头,前面不能带 /
⑤全局启用 emulateJSON 选项
用法: Vue.http.options.emulateJSON = true;
- Vue中的动画
①vue中的过度类名实现动画
用法: 在css中定义如下 单个动画的标签用transtion包裹
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(150px);
}
.v-enter-active,
.v-leave-active{
transition: all 0.8s ease;
}
html中:
<input type="button" value="toggle" @click="flag=!flag">
<transition> <h3 v-if="flag">这是一个H3</h3> </transition>
vue实例的data中定义 flag=false
点击按钮,使flag的值发生改变
1)v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。
2)v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。
3)v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。
4)v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。
5)v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。
6)v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除。
②. 自定义-v前缀
用法: 在transition标签中添加name属性
<transition name="my"> <h6 v-if="flag2">这是一个H6</h6></transition>
此时,在css中的v-enter就可以更改为my-enter
③. 使用第三方animate.css
用法: 在transition中添加enter-active-class和leave-active-class属性
class值是动画的名字,可以在animate中查看动画名
<transition enter-active-class="animated bounceIn"
leave-active-class="animated bounceOut"
:duration="{ enter: 100, leave: 400 }>
<h3 v-if="flag">这是一个H3</h3>
</transition>
必须带上animated这个class类名 需要写在上述位置或在动画元素身上 加上class类名 animated
:duration="{ enter: 200, leave: 400 }" 来分别设置 入场的时长 和 离场 的时长;只设置一个值表示进场出场时间都是 :duration=" 200"
④. 钩子函数实现半场动画
在html中定义事件以及事件的处理函数名
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter">
<div class="ball" v-show="flag"></div>
</transition>
在js的methods中写出对应的处理函数
methods: {
beforeEnter(el){
el.style.transform="translate(0,0)";
},
enter(el,done){
el.offsetWidth;
el.style.transform="translate(150px,450px)";
el.style.transition='all 1s ease';
done()
},
afterEnter(el){
this.flag=!this.flag
}
}
- done 为第三个处理函数,必须得在第二个处理函数结束之后立即调用done()方法. 如果不调用,第三个处理函数有延时,过一会才调用.
- 必须在动画的过程中设置el.offsetWidth 等属性,这个属性会通知浏览器重新计算元素的宽度,这样,会造成浏览器重绘.
- 每次执行动画,小球都会冲beforeEnter开始执行,每次小球结束在结束位置隐藏,每次开始执行,beforeEnter执行,瞬间到起始位置.
- 当有相同标签名的元素切换时,需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们,否则 Vue 为了效率只会替换相同标签内部的内容。即使在技术上没有必要,给在 组件中的多个元素设置 key 是一个更好的选择。
<transition>
<button v-if="isEditing" key="save">
Save
</button>
<button v-else key="edit">
Edit
</button>
</transition>
⑤ transition-group 实现列表动画
在实现列表过渡的时候,如果需要过渡的元素,是通过 v-for 循环渲染出来的,不能使用 transition 包裹,需要使用 transitionGroup
.v-move {
transition: all 0.6s ease;
}
.v-leave-active{
position: absolute;
}
- 如果要实现离开的动画的时候,下方元素向上缓慢飘上去,需要加上上述属性.固定用法;
- 加上absolute的时候,会使落下的时候,宽度变小,需要设置元素的宽度,如果要为 v-for 循环创建的元素设置动画,必须为每一个 元素 设置 :key 属性;
<transition-group appear tag="ul"> <li v-for="(item,index) in list" :key="item.id" @click="del(index)"> {{item.id}} --- {{item.name}} </li> </transition-group>
appear 可以使列表出现的时候缓慢上升,tag可以指定渲染的元素名字
- 组件的学习
1)组件的定义
a.使用 Vue.extend 配合 Vue.component 方法:
2)components定义私有组件var login = Vue.extend({ template: '<h1>hello world</h1>' }); Vue.component('login', login); b.直接使用 Vue.component 方法: Vue.component('register', { template: '<h1>hello world</h1>' }); c.将模板字符串,定义到script标签中 <script id="tmpl" type="x-template"> <div><a href="#">登录</a> | <a href="#">注册 </a></div> </script> 同时,需要使用 Vue.component 来定义组件: Vue.component('account', { template: '#tmpl' }); d.组件的名称如果在定义的时候使用驼峰命名法,在调用的时候要用-分开
a.与filters directives 相同
b.用法:components: { // 定义实例内部私有组件的 login: { template: '#tmpl2' } }
3)组件中的data与methods
a. 组件中的data必须是函数,切数据是函数的返回值,并且返回值必须是对象,data中的数据的使用方法与实例中的data用法一样
b. 如果返回值是一个变量,在多次请求数据的时候,会相互影响数据,而返回值为对象,则相当于新每次都新创建了一个对象,都指向一个新的对象的地址,不相互影响
4)组件的切换
用法:
Vue提供了 component ,来展示对应名称的组件
此处的comName遵循Vue语法 comName为变量 会在实例的data中查找这个变量,如果需要直接使用组件名称需要加单引号
切换动画 可以直接包裹在transition中 与普通动画一致. 可以设置mode属性 ‘out-in’ 先出去,然后再做进入的动画
5)父组件向子组件传值
a. 默认的子组件中,无法访问到父组件中的data和methods中的方法
b. 父组件,可以在引用子组件的时候, 通过 属性绑定(v-bind:) 的形式, 把 需要传递给 子组件的数据,以属性绑定的形式,传递到子组件内部,供子组件使用;
例如:v-bind:parentmsg=“msg” 把父组件data中的msg的值传递给了parentmsg属性中
c. 需要在子组件中定义props:[]素组中定义parentmsg
props:[‘parentmsg ’]
d. 然后再通过vue的语法在html中访问parentmsg
e.props中的数据不建议更改,更改会报错
f. 子组件中的data数据可读可写
6)父组件向子组件传事件和方法
a. 需通过事件绑定(v-on:)的形式.把需要传递给子组件的方法,以事件属性的形式传递给子组件内部,供子组件使用;
例如:v-on:func=“show” 把父组件methods中的show方法传递给了func属性中
b. 然后在子组件中,this指的是当前这个组件的实例对象 component Vue提供了一个
e
m
i
t
(
)
方
法
通
过
t
h
i
s
.
e
m
i
t
(
)
进
行
调
用
emit()方法 通过this.emit()进行调用
emit()方法通过this.emit()进行调用emit()第一个参数为父组件传递的事件属性的名称(func) 后面的参数为数据,可以传递多个
用法: this.
e
m
i
t
(
′
f
u
n
c
′
,
123
)
c
.
在
子
组
件
中
调
用
子
组
件
的
方
法
,
子
组
件
方
法
中
的
t
h
i
s
.
emit('func',123) c. 在子组件中调用子组件的方法,子组件方法中的 this.
emit(′func′,123)c.在子组件中调用子组件的方法,子组件方法中的this.emit(‘func’)方法同时触发父组件的show方法,从而实现父组件向子组件传事件和方法
7)子组件向父组件传递数据方法
a. 父组件向子组件传递方法的时候,在this.
e
m
i
t
(
)
中
可
以
传
递
参
数
,
后
面
的
参
数
可
以
用
t
h
i
s
访
问
到
子
组
件
的
d
a
t
a
数
据
和
m
e
t
h
o
d
s
b
.
在
子
组
件
中
的
方
法
:
t
h
i
s
.
emit()中可以传递参数,后面的参数可以用this访问到子组件的data数据和methods b. 在子组件中的方法: this.
emit()中可以传递参数,后面的参数可以用this访问到子组件的data数据和methodsb.在子组件中的方法:this.emit(‘func’,this.sonshow)
sonshow 为methods中的函数名
this.$emit(‘func’,this.sonshow,this.name)
this.name 是data中的name属性
c. 通过上述方法完成了子组件向父组件传递数据和方法
8)使用ref获取DOM元素和组件引用
在html中 元素或者组件上设置ref属性
<h1 ref="myh1">这是一个大大的H1</h1>
可以通过this.$refs.myh1 获取到当前元素
组件中
<login ref="mylogin"></login>
也可以通过this.$refs.mylogin 获取到当前组件,并且可以访问组件中的data和方法
- 路由的学习 vue-router
1)路由的基本使用
a.在html中引用vue-router包
b.js中:var router=new VueRouter({ })
创建一个路由对象, 当 导入 vue-router 包之后,在 window 全局对象中,就有了一个 路由的构造函数,叫做 VueRouter;
c.组件模板对象(component):
var login = {
template: '<h1>登录组件</h1>'
}
var register = {
template: '<h1>注册组件</h1>'
}
d.在 new 路由对象的时候,可以为 构造函数,传递一个配置对象 routes routes是一个数组 里面都是路由规则对象
路由规则对象中必须有两个属性
属性1: 是 path, 表示监听 哪个路由链接地址;
属性2: 是 component, 表示,如果 路由是前面匹配到的 path ,则展示 component 属性对应的那个组件
component 的属性值,必须是一个 组件的模板对 象, 不能是 组件的引用名称
routes:[
{ path: '/', redirect: '/login' }, //用alias:’/’也可以解决
{ path: '/login', component: login, alias:'/' },
{ path: '/register', component: register },
{path:'*',component:login}
]
上述中 redirect是重定向 重定向到’login’
alias指别名 可以使用/就是/login
解决了跳转到没有定义到的地址的情况
vue中的路由是基于hash来跳转的 a标签使用需要加#(锚点)
e. 在Vue实例中挂载router(与data同级):
将路由规则对象,注册到 vm 实例上,用来监听 URL 地址的变化
router: routerObj
f. 在导入vue-router包之后,html地址栏会自动多#/,在html结构中需要放容易 router-view 标签 是一个占位符
2)router-link的使用
用法:登录
router-link默认渲染为一个a 标签 属性to中放去的地址,里面不需要加#
3)路由高亮的两种方法
①. 给.router-link-active这个类名添加css属性
②. 在new路由对象的时候,配置routes的同时,配置likActiveClass
linkActiveClass:‘myactive’
在css中就可以使用myactive这个类名来设置了
4)路由传递参数的两种方式
html中:
①<router-link to="/login?id=10&name=zs">登录</router-link>
②<router-link to="/register/10">注册</router-link>
{ path: '/login', component: login },
{ path: '/register/:id', component: register }
// 可以在组件中,通过this.$route.query.id 得到id的值
var login = {
template:'<h1>登录{{$route.query.id}}{{ $route.query.name }}
</h1>',
data(){
return {
msg: '123'
}
},
created(){ // 组件的生命周期钩子函数
console.log(this.$route.query.id)
}
}
组件的模板template中也可以通过{{$route.query.id}}访问到值,前面this就可以省略了,也可以在组件中,通过this.$route.query.id 得到id的值
通过params得到第②中方式传递的值,必须在定义路由的时候,定义为 /:id 这种形式,表示’/’后面传递的是一个参数,其它用法与query相同;
5)路由嵌套
路由规则对象中,除了path和component属性外,还可以传入一个children,children也是一个数组,里面也是路由规则对象,用法与routes相同;html中 如下访问:
{
path: '/account',
component: account,
children: [
{ path: 'login', component: login },
{ path: 'register', component: register }
]
}
使用 children 属性,实现子路由,同时,子路由的 path 前面, 不要带 / ,否则永远以根路径开始请求,这样不方便我们用户 去理解URL地址
<router-link to="/account/login">登录</router-link>
<router-link to="/account/register">注册</router-link>
6)命名视图
用法:
html中:给router-view 添加name属性,router-view则会在路由规则对象中,查找name为对应名字的组件,name中的是字符串,不是变量
<router-view></router-view>
<div class="container">
<router-view name="left"></router-view>
<router-view name="main"></router-view>
</div>
//js的路由规则对象中:
routes:[
{path:'/',components: {
default:header,
left:leftBox,
main:mainBox,
}
}
]
//这样可以使router-view中展现对应的组件
7)watch属性(与data,methods同级)
watch属性可以监视data中指定数据的变化,当数据发生改变的时候,就会触发这个watch里面相应的处理函数;
函数中有两个参数,第一个是新的data值,第二个为旧的data值;
用法:
watch:{
firstname:function(newval,oldval){
console.log(‘数据改变了’)
}
}
//watch监听路由地址的改变: $route.path 可以获取到路由参数,只需要在watch中监听这个数据,就可以监听到路由地址的改变,前面不带this.
watch:{
'$route.path':function (newVal,oldVal) {
console.log(newVal+'----'+oldVal);
if(newVal==='/login'){
console.log('欢迎进入登录页面')
}else if(newVal==='/register'){
console.log('欢迎进入注册页面')
}
}
}
8)computed
在 computed 中,可以定义一些 属性,这些属性,叫做 【计算属性】
注意1: 计算属性,在引用的时候,一定不要加 () 去调用,直接把它 当作 普通 属性去使用就好了;
注意2: 只要 计算属性,这个 function 内部,所用到的 任何 data 中的数据发送了变化,就会 立即重新计算 这个 计算属性 的值
注意3: 计算属性的求值结果,会被缓存起来,方便下次直接 使用; 如果 计算属性方法中,所以来的任何数据,都没有发生 过变化,则,不会重新对 计算属性求值;
注意4: 能用computed则用computed;监听路由 必须使用watch;