使用v-bind:class|style 内容时,value值必须是model类型,即是{{xxx}}类型内容
1.
<my-component v-bind:class="{ active: isActive }"></my-component>
2.
new Vue({
data:{
isActive:true
}
})
一处代码是html使用,在二出出现flume,isActive 必须是data内对象
数组可以对常规js的数组函数检测数据:
- push
- pop
- reverse
- shift
- unshift
- splice
- sort
- filter
- concat
- slice 以上方法不检测数组响应式。但是由于是结构相同可以直接替换原数组达到响应式效果
除以上情况以外,一下两种特殊情况操作数组也不会发生响应式变化
- items[indxe]=xxx
- imtes.length=newLength 针对以上两种情况可以使用Vue.set(arrays,index,newVuel) 和 Array.prototype.splice。 给数组设定新长度,也可以通过splice方法实现响应式
对象新增字段是直接使用obj.newFilde时vue是无法响应式。 只能通过以下语法完成
//method 1
Vue.set(obj,key,vaule);
//method 2 vm.$set 实例方法,它只是全局 Vue.set 的别名:
vm.$set(obj,key,vauel)
同时添加多个字段:
this.obj=Object.assign({},this.obj,{
newFiled:vue,
newFiled2:vue2
.....
})
原有:
- 组件有自己独立作用域
- 降低数组和组件的耦合度
<div id="app">
<button v-on:click="counter+=1">add</button>
</div>
主要用于无参调用方法
<button v-on:click="clickEvnet"></button>
主要支持含有参数调用
<button v-on:click="clickeEvent(param1,param2)"></button>
系统修饰键: 1.ctrl 2.alt 3.shift 4.meta(操作系统键:windows 下 windows键)
使用修饰键时必须是在修饰键按下的状态,即只有按住修饰键时释放其他按键才会触发keyup.key
HTML 特性是不区分大小写的。所以,当使用的不是字符串模板时,camelCase (驼峰式命名) 的 prop 需要转换为相对应的 kebab-case (短横线分隔式命名):
在父子级组件中,数据流是单向,只能通过prop从父级流向子级。如果希望通过prop来定义子级的初始化数据最好使用prop赋值局部变量
js中对象和数组引用是指向同一个内存地址(引用类型),如果在子级中操作prop的对象或者数组可能会破坏父级数据对象
在只想bind和update时触发异常可用这昂处理
Vue.directvie('directive',function(el,binding){
//todosomething
})
注入路由成功,可以通过this.$router 或者$router访问当前路由对象
- 路由导航 通过传入to 熟悉导入到指定路由
<router-link to="path"> name</router-link>
- 路由出口。路由匹配到的组件在这里渲染
<router-view></router-view>
嵌套路由可在模板中渲染
嵌套子路由不能以
/
开头,否则被认为是root目录 官方文档
可以通过$route.push(...) 实现路由效果,同理<router-link to=">
相同路由不同参数需要使用 beforeRouteUpdate 来响应这个变化
注意:如果提供了 path,params 会被忽略
- 路由对象提供name属性,可以通过name路由
<router-link :to="{name:'name',params:{paramName:paramVaue}}"></router-link>
注:这里router-link 标签是:to 和路径不同多一个冒号。配置参数的时候注意如果是非数字需要引号包起来
- 对于嵌套路由使用命名方式路由时,如果选择父级名称路由不会渲染子集路由,如果需要渲染子集路由,则直接:to后面写入子集的路由名称.
即在标签router-view 属性中设置name字段。当需要在同级中展示多个视图且不是嵌套时候,需要命名视图。例如布局页面。默认name='default'。 一个视图使用一个组件渲染,对于多个视图在一个路由中就需要多个组件渲染.代码模板:
new VueRouter({
routes:[
{
path:'',
components:{
default:componentName1,
viewName2:componentName2,
......
}
}
]
})
在组件中使用$route会使组件和路由耦合度高,不利于组件复用 如果路由对象props设置为true,则route.params将设置为组件属性
props 支持三种类型:字符串,对象,函数模式 字符串
props:['id']
对象:
props:{xx:xxx}
函数:
props:(route)=>{}
参数或者查询改变不会触发导航守卫
data:{
field1:'',
....
fieldn:''
}
data(){
return {}
}
data:function(){
return {
}
}
不明白这里为什么是相同元素,没有设定name和id 官方文档
事件修饰符作用
第三种写法即data必须是函数这样写法主要是在组件(component)必须要求,这样做目的为了防止组件共享一个data.必须保障组件是独立