Vue.js学习

1. 使用JavaScript表达式
   注意Vue实例的数据作用域作为JavaScript被解析。但是有个限制是：每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

   <!-- 流控制也不会生效，请使用三元表达式 -->
   {{ if (ok) { return message } }}

2. 指令
   指令（Directives）是带有v-前缀的特殊特性。指令特性的值预期是单个JavaScript表达式（v-for是个例外）。指令的职责是：当表达式的值改变时，将其产生的连带影响，响应式的作用于DOM。回顾我们在介绍中看到的例子：

   <p v-if="seen">现在你看到我了</p>

   这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。

3. 参数
   一些指令可以接受一个“参数”，在指令名称之后以冒号表示。例如：v-bind指令可以用于响应式的更新HTML特性：

   <a v-bind:href="url">...</a>
   <a v-on:click="dosomething">...</a>

   这里的href是参数，告知v-bind指令将该元素的href特性与表达式url的值绑定。

   v-on用于监听DOM事件。

4. 计算属性&&方法&&侦听属性

   计算属性

   模版内的表达式非常便利，但是设计它们的初衷是用于简单计算的。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，都应该使用计算属性。
   基础例子

   <div id = "example">
       <P>{{message}}</P>
       <P>{{reversedMessage}}</P>
   </div>

   var vm = new Vue({
   	el: '#example',
   	data:{
   	   message:'Hello'
       },
       computed:{
   	   reversedMessage:funcation(){
   		return this.message.split('').reverse().join('')
          }
       }
   })

   方法
   同样的上述效果可以使用方法来实现。

   methods:{
       reversedMessage:{
           return this.message.split('').reverse().join('')
       }
   }

   ⭐⭐注意：二者之间的不同点在于：计算属性是给予他们的响应式依赖进行缓存的，而方法只在响应式依赖发生改变时它们才会重新赋值。

   监听属性

   Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用watch–特别是如果你之前使用过AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的watch回调。

5. 条件渲染
   v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
   v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用。

6. 组建基础

   // 定义一个名为 button-counter 的新组件
   Vue.component('button-counter', {
     data: function () {
       return {
         count: 0
       }
     },
     template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
   })

   上述例子中有一个隐藏点：⭐⭐一个组件的data必须是一个函数。如果没有这个规则，可能就会导致实例之间产生影响。https://cn.vuejs.org/v2/guide/components.html
   通过Prop向子组件传递数据
   Prop是你可以在组件上注册的一些自定义特性。当一个值传递给一个prop的时候，它就变成了那个组件实例的一个属性。比如说：给博文组件传递一个标题，我们可以用一个props选项将其包含在该组件可接受的prop列表中：

   Vue.component('blog-post' , {
   	props: ['title'],
   	template: '<h3>{{ title }}</h3>'
   })

   一个组件可以拥有任意数量的prop，任何值都可以传递给任何prop。

   一个 prop 被注册之后，你就可以像这样把数据作为一个自定义特性传递进来：

   <blog-post title="My journey with Vue"></blog-post>
   <blog-post title="Blogging with Vue"></blog-post>
   <blog-post title="Why Vue is so fun"></blog-post>

7. s