本文只是对我而言,感觉需要注意地方的总结
想系统的学习vue,请参看Vue官网
文章目录
1. 指令
1.1 v-for比v-if的权重大
所以当两个两个指令同时写在一个标签上时 会先循环然后判断 ,然后不是想要这种效果,最好不要同时使用
v-for 也支持整数 当这个元素为10时 就会循环十次 输出 1,2,3,4,5,6,7,8,9,10
1.2 v-if与v-show
v-show只是把元素隐藏了起来
v-if 是在数据变化的时候才重新新建元素
v-show 不能用在template 与 v-else 的标签里
v-if与v-for 可以
2. 事件修饰符
.passive 顺从的 会自动启用默认事件,即用使用了prevent来阻止默认事件也无效,它的权重高,能提升移动端的性能
@:click.prevent.self 会阻止所有的点击
@:click.self.prevent 只会阻止对元素自身的点击
3. Prop
3.1 大小写
HTML 中的 attribute 名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名:
Vue.component('blog-post', {
// 在 JavaScript 中是 camelCase 的
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})
<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>
重申一次,如果你使用字符串模板,那么这个限制就不存在了。
3.2 类型
props:['title','likes']
当希望有指定类型值的时候
props:{
title:String,
likes:Number
}
3.2 传递静态或者动态Prop
3.2.1 静态赋值
<blog-post title='My journey with Vue'></blog-post>
3.2.2 动态赋值
<blog-post :title='post.title'></blog-post>
上面的是字符类型的数据的静动态赋值
但number、布尔、数组、对象,这些类型的数据不论动态或者静态都需要v-bind来绑定
当传入的为一个布尔值时
<!--- 这是传递true ->
<blog-post is-published></blog-post>
<!-- 即便'false'是静态的,我们仍然需要v-bind来告诉vue -->
<!-- 这是一个js表达式而不是一个字符串-->
<blog-post :is-published="false"></blog-post>
<!-- 用一个变量进行动态赋值-->
<blog-post :is-published="post.isPublished"></blog-post>
传入一个对象的所有property
post:{
id:1,
title:'Hello World!'
}
<blog-post v-bind="post"></blog-post>
等价于
<blog-post v-bind:id="post.id" v-bind:title="post.title"></blog-post>
3.3 非Prop的Attribute
一个非prop的attribute是指向一个组件,但是该组件并没有对应prop定义的attribute
当你加入该属性时,就会自动添加到组件的根元素上
3.4 禁用Attribute继承(参看vue官网)
如果不希望组件的根元素继承attribute,可以在组件中设置inheritAttrs:false与实例的$attrs来使用
但该设置不会影响style和class的绑定
3.5 替换/合并已有的Attribute
对于大多数attribute来说,外部提供的组件的值会替换组件内部设置好的值
但是style与class会智能一些,会把两边的值进行合并
4. 自定义事件
事件名 用短横线的方式 my-event
.navite .sync
5. 单向数据流(参看vue官网)
所有prop都使的其父子prop之间形成一个单向下行绑定:父级prop的更新会向下流动到子组件中,但反过来则不行。
这样会防止从子组件意外变更父级组件的状态,从而导致你的应用的数据流向难以理解
注意在js中对象与数组是通过引用传入的,所以对于一个数组或者对象类型的prop来说,在子组件中改变变更这个对象或者数组本身将会影响父组件的状态