阅读vue.js总结（一）
本文只是对我而言，感觉需要注意地方的总结
想系统的学习vue,请参看Vue官网
文章目录
- 1. 指令
- 1.1 v-for比v-if的权重大
- 1.2 v-if与v-show
- 2. 事件修饰符
- 3. Prop
- 3.1 大小写
- 3.2 类型
- 3.2 传递静态或者动态Prop
- 3.2.1 静态赋值
- 3.2.2 动态赋值
- 3.3 非Prop的Attribute
- 3.4 禁用Attribute继承（参看vue官网）
- 3.5 替换/合并已有的Attribute
- 4. 自定义事件
- 5. 单向数据流（参看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: '{{ postTitle }}
'
})
<!-- 在 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来说，在子组件中改变变更这个对象或者数组本身将会影响父组件的状态