阅读vue.js总结（一）

本文只是对我而言，感觉需要注意地方的总结
想系统的学习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来说，在子组件中改变变更这个对象或者数组本身将会影响父组件的状态