简单遍历vue2.0文档（一）

1. 软件架构模式

MVC模式：

• 控制器（Controller）- 负责其他
• 视图（View） - 图形界面设计
• 模型（Model） - 实现应有功能，进行数据管理

MVVM模式：

• 模型（Model）- 数据修改和操作的业务逻辑
• 视图（View）- 将数据模型转化为UI
• 视图模型（ViewModel）- 同步模型和视图数据

2. Vue优点

• 低耦合：视图（View）可以独立于模型变化和修改
• 可重用：可以把一些视图逻辑放在一个 ViewModel 里面，让很多 view 重用这段视图逻辑
• 独立开发：可以专注于业务逻辑和数据的开发

3. 生命周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程，同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

下面介绍四个常用钩子：

• created：在实例创建完成后被立即调用。
• mounted：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
• updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
• destoryed：Vue 实例销毁后调用。

<div id='app'>{{message}}</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
  var app = new Vue({
    el:'#app',
    data:{
      message: 'Hello,Vue!'
    },
    created () {
      alert('created')
    },
    mounted () {
      alert('mounted')
    },
    updated () {
      alert('updated')
    },
    destroyed () {
      alert('destroyed')
    }
  })
</script>
 //初始化data后执行created
 //初始化el后执行mounted，确定后message被渲染
 //app.message = "Hello,World!"后执行updated，确定后Hello,World!被渲染
 //app.$destroy()后执行destroyed

4. 过滤器

<div id='app'>{{message | upMsg}}</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
  var app = new Vue({
    el:'#app',
    data:{
      message: 'Hello,Vue!'
    },
    filters: {
      upMsg:function(value){
        return value.toUpperCase()
      }
    }
  })
</script>

5. 常见指令

• v-text

<div id='app' v-text=message></div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
  var app = new Vue({
    el:'#app',
    data:{
      message: 'Hello,Vue!'
    }
  })
</script>

• v-html

<div id='app' v-html=message></div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
  var app = new Vue({
    el:'#app',
    data:{
      message: '<p>Hello,Vue!</p>'
    }
  })
</script>

• v-bind
  用来绑定任何活的属性。

<style>
  .blue{
    border: 1px solid blue
  }
  .red{
    color: red;
  }
</style>
<div id='app'>
  <p v-bind:class=['red','blue']>{{message}}</p>
  <p :class={red:true,blue:false}>{{message}}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
  var app = new Vue({
    el:'#app',
    data:{
      message: 'Hello,Vue!'
    }
  })
</script>

• v-on
  ·stop：阻止单击事件冒泡
  ·prevent：提交事件不再重载页面
  ·once：事件将只会触发一次

<div id='app'>
  <button v-on:click=plus>加</button>
  <button @click.once=plus>减</button>
  <span>{{num}}</span>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
  var app = new Vue({
    el:'#app',
    data:{
      message: 'Hello,Vue!',
      num:1
    },
    methods: {
      plus:function(){
        this.num +=1
      },
      sub:function(){
        this.num -=1
      }
    }
  })
</script>

• v-cloak
  和CSS一起使用，这个指令保持在元素上直到关联实例结束编译。

<style>
  [v-cloak]{
    color: red
  }
</style>
<div id='app' v-cloak>
  {{message}}
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
  var app = new Vue({
    el:'#app',
    data:{
      message: 'Hello,Vue!',
    },
  })
</script>

• v-if

<div id='app'>
  <p v-if='1+1===3'>{{message1}}</p>
  <p v-else>{{message2}}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
  var app = new Vue({
    el:'#app',
    data:{
      message1: 'Hello,Vue!',
      message2: 'Hello,World!',
    },
  })
</script>

• v-for
  以object为例，默认先遍历value

<div id='app'>
  <li v-for='msg in message'>{{msg}}</li>
  <li v-for='(val,key,index) in message'>{{val}},{{key}},{{index}}</li>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
  var app = new Vue({
    el:'#app',
    data:{
      message: {
        '键1':'值1',
        '键2':'值2'
      }
    },
  })
</script>

• v-show
  v-show 和v-if 不显示元素的区别在于，v-show渲染了元素，设置display为none，v-if直接没渲染

<div id='app'>
  <p v-show=true>{{message}}</p>
  <p v-show=false>{{message}}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
  var app = new Vue({
    el:'#app',
    data:{
      message: 'Hello,Vue!'
    },
  })
</script>

• v-model
  用于在表单类元素上双向绑定事件

<div id='app'>
  <div>
    <input v-model=text>input is {{text}}
  </div>
  <div>
    <select v-model=item>
      <option>选项1</option>
      <option>选项2</option>
      <option>选项3</option>
    </select>
    select is {{item}}
  </div> 
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
  var app = new Vue({
    el:'#app',
    data:{
      text:'',
      item:''
    },
  })
</script>

7. 计算属性

• 计算属性 vs 模板内表达式：计算属性适用于逻辑复杂时，模板内表达式适用于逻辑简单时
• 计算属性 vs methods：计算属性有缓存，在数据变化时执行，方法在触发渲染时执行
• 计算属性 vs 侦听器：计算属性仅用来计算，侦听器用来进行异步操作或者上报数据等变大较大的操作

<div id='app'>
  year: {{plus}}
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
  var app = new Vue({
    el:'#app',
    data:{
      num:2018
    },
    computed: {
      plus:function(){
        return this.num+1
      } 
    }
  })
</script>