vue学习Day08

1.之前的路由规则，当匹配到一个路由的时候，只能在页面的容器中，放置唯一的一个组件

那怎么解决这个问题？

命名视图

假设有header，sidebar, content,footer四个组件

const router=new VueRouter({

routes:[

{path:’/’,components:{

//组件名称：组件对象

’top’:header,

‘left’:sidebar,

‘righter’:content,

‘bottom’:footer

}}

]

})

然后在router-view里给name属性赋值上组件的名字

<router-view name=“top”></router-view>

<router-view name=“left”></router-view>

<router-view name=“right”></router-view>

<router-view name=“bottom”></router-view>

2.watch

表示监听指定数据的改变，键值队 ’键是要监听的数据‘：数据变化时的处理函数

watch:{

‘firstname’:function(newval,oldval){

This.fullname=newval+this.lastname

‘lastname’:function(newval,oldval){

this.fullname=thhis.firstname+newval

}

那这个watch相比于v-model有什么优势？可以监听虚拟的数据，比如url地址的改变

3.computed

默认只有getter的计算属性

computed:{计算属性区域

‘fullname’:function(){

Return this.firstnam+’-’+this.lastname;

}

//这个fullname就是计算属性，在页面中，使用计算属性的时候，永远把它当作普通的属性来使用

也就是在文本框里写v-model=‘fullname’

//只要计算属性的function中，依赖的任何数据发生变化了，则会触发计算属性的重新求值

//计算属性的值，如果第一次计算后，没有发生过变化，则会把第一次的值缓存起来，供后续使用，这就能提高性能

}

4.计算属性的get和post

Get方法表示外界要引用fullname的值

Set表示外界重新为fullname赋值

computed:{

‘fullname’:{

get(){ return this.firstname+’-’+this.lastname }

set(val){

Const parts=val.split(‘-’);

This.firstname=parts[0] || ’’;

This.lastname=parts[1] || ‘’;

}

computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
methods方法表示一个具体的操作，主要书写业务逻辑；
watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体；

vue学习Day08相关推荐

前端Vue学习之路(二)-Vue-router路由
Vue学习之路 (二) Vue-router(基础版) 一.增加静态路由二.动态路由+路由嵌套+404页面三. 编程式导航四.命名路由五.命名视图六.重定向和起别名 1.重定向 2.起别名 ...
前端Vue学习之路(一)-初识Vue
Vue学习之路 (一) 1.引言 2.更换npm国内镜像源 3.用npm下载Vue 4.Vue全家桶 5.使用命令创建项目 5.推荐插件 6.推荐网站 7.学习扩展 1.引言先安装node.js环境 ...
菜鸟Vue学习笔记（三）
菜鸟Vue学习笔记(三) 本周使用了Vue来操作表单,接下来说下Vue中双向绑定表单元素的用法. Vue中双向绑定是使用的v-model,所谓的双向绑定即改变变量的值,表单元素的值也会改变,同样的,改 ...
好程序员Web前端教程分享Vue学习心得
为什么80%的码农都做不了架构师?>>> 好程序员Web前端教程分享Vue学习心得,Vue是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向 ...
Vue学习(一)-邂逅Vuejs
Vue学习(一)- 邂逅Vuejs 零.视频链接一.邂逅Vuejs 1.认识Vuejs 1.1 为什么学习Vuejs 1.2 简单认识一下Vuejs 2.Vuejs安装方式 2.1 CDN引入 2. ...
Vue 学习第八天
Vue 学习第八天 1. 了解了回掉函数的使用,了解了文件的读取, 2.Promise 函数讲解 console.dir(Promise) //Promise 函数讲解 //1.其是一个构造函数,既 ...
Vue 学习第六天学习笔记
Vue 学习第六天学习笔记 1.webpack 使用复习第一步:先建立文件夹. 第二步,用webpack将其初始化,建立管理.npm 的包管理工具管理起来, npm init -y .注意{查 ...
Vue 学习第五天学习笔记
Vue 学习第五天 1. keyup事件 <div id="app"> <input type="text" v-model=" ...
Vue 学习第四天--第一部分 --盲点整理与昨天知识回顾
Vue 学习第四天--第一部分 1.父组件向子组件传值 v-bind:临时变量名="父组件变量名" v-bind:value="fathervalue" 子 ...
Vue 学习之 7.01 学习笔记
Vue 学习之 7.01 学习笔记 1.还是复习前面的那个"品牌案例管理",但是数据不是静态写死哦,而是动态的管理,向数据库发送相关请求实现,因此,小节和昨天所学就是掌握Vu ...

vue学习Day08

vue学习Day08相关推荐

最新文章

热门文章