Vue学习
- 数据要写在data:{}中
- v-model="":双向绑定
- .lazy:延迟
- .trim:去除两端空格
- .number:自动识别为数字
- 用于input、textarea、select
- v-show/if="":有输入才显示
- v-for="":可以通过console直接push数据
- v-bind:绑定href、src、class(v-bind可省略)
v-model和v-bind区别 - v-on:绑定事件
- 方法定义在Vue的methods中
- v-on可:简略写出@
- 控制流指令:v-if=“role == ‘admin’”
- 计算属性:computed:{ss:function(){},
- 组件:定义了组件之后一定要new Vue({el:’#app’})
- 全局及局部组件
new Vue({
el:'#app',
components:{
'alert':{
template:'<button @click="onClick">text</button>',
methods:{
onClick:function(){
alert('yo')
}
}}}})
- 创建组件
- data里面是function
- 函数中要用的变量应该在return中就声明,并且用的时候要加上this.
- 组件通信
- 父子通信:props:[‘attr’]
- 子父通信:this.$emit(‘函数名’,{参数})
- 任意组件通信:一个例子
- template里面的东西必须包含在一个div内
- var event=new Vue()作为两者之间的桥梁
- event.$on( event, callback )
监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。 - event.$emit( event, […args] )
触发当前实例上的事件。附加参数都会传给监听器回调。 - mounted:function(){}:在该组件初始化完成的一瞬间就开始执行function内
- 在mounted内先保存this:var me=this
- 过滤器filter:官方说明
- Vue.filter(‘filter_name’,function(val,xx){return}
- {{val|filter_name(‘传入xx的参数’)}}
- filter_name后面可带多个参数
- 自定义指令directive:
- Vue.directive(‘dir_name’,function(el,binding){}) el、binding含义
- 当position定位fixed之后只能通过top/left等定位position的四个状态
- @click=“”中不仅可以绑定函数,还可以直接是表达式
- 修饰符和传参:
- .true:通过binding.warning获取,===‘true’
- .bottom.left:通过binding.modifiers获取然后迭代
var position=binding.modifiers;
for(var key in position)
{
if(position[key]{
el.**style[key]**='10px';
}
}
- 混合mixins:封装不同组件里面的相同
var base={methods:{},data:function{return{}},}
mixins[base],
- 插槽slots
Vue Router
- route & routes & router
- router-link &router-view(隐藏和渲染)这两个是成对出现的!!!
- 命名路由:
- $route.params.name
- $route.query.age
- 子路由:children:[{path:‘more’,component:{template:``}],在父路由的template中加上<router-link to=“more” append>和router-view
- 手动访问路由:this.router.push({name:‘routename’,(params:{name:’’}) 注意:params只能用name来引入路由,所以此处换成path:’/'错误!
- 命名视图:有多个router-view时
- 给router-view加上name属性标识
,components(pl.){
sidebar:{
component:{
template:``
}
},
}
-
导航钩子:(applied in 权限管理)
- router.beforeEach(function(to,from,next){})
- to.path=’’
- next(’’)导航到某处,不填则无影响
- router.afterEach(function(to,from){})
-
路由匹配:登陆实例
- 元数据meta:{xxx:true}meta的用法
- to.matched:to路径的所有匹配组成的数组
- to.matched.some(function(item){return item.meta.xxx?
- 注意在此处不要给每个都加相同的meta,ortherwise陷入无限循环!!