VUE 基础入门

一、

1.vue声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM，也就是将模板中的文本数据写进DOM中，使用 {{data}} 的格式写入

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

除了文本插值，还可以这样来绑定元素 attribute，如下：

<div id="app">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

v-bind attribute 被称为指令，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”。
2.条件与循环

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

var app = new Vue({
  el: '#app',
  data: {
    seen: true
  }
})

v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
v-show与v-if的区别
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销
v-if和v-show都可以控制元素的显示隐藏但是有本质区别的，v-if是控制元素的添加与删除，而 v-show只是控制元素的 display属性。
如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。

3.事件绑定

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转消息</button>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

4.双向绑定
把Model绑定到View的同时也将View绑定到Model上，这样就既可以通过更新Model来实现View的自动更新，也可以通过更新View来实现Model数据的更新。所以，当我们用JavaScript代码更新Model时，View就会自动更新，反之，如果用户更新了View，Model的数据也自动被更新了

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

二、Vue的生命周期

Vue的生命周期分为八个阶段
1. beforeCreate（创建前）
2. created (创建后)
3. beforeMount （载入前）
4. mounted （载入后）
5. beforeUpdate （更新前）
6. updated （更新后）
7. beforeDestroy （销毁前）
8. destroyed （销毁后）

Vue第一次页面加载会触发哪几个钩子函数？
beforeCreate 、 created 、 beforeMount 、 mounted
DOM渲染在哪个周期函数中就已经完成？
mounted

beforeCreate
进行初始化事件，this指向创建的实例不能访问到data、computed、watch、methods的方法和数据，常用于初始化非响应变量
created
实例创建完成，数据已经和data属性绑定，此时放在data中的属性值发生改变的同时，视图也会改变，可以初始化ajax请求、访问data、computed、watch、methods的方法和数据，未挂载到DOM，不能访问到ref属性内容为空数组，常用于简单的Ajax请求，页面的初始化
beforeMount
在挂载开始之前被调用，beforeMount之前，会找到对应的template，并编译成render函数
mounted
实例挂载在DOM上，此时可以通过DOM API获取到DOM节点，￥ref属性可以访问，常用于获取VNode信息和操作，Ajax请求
beforeUpdate
响应式数据更新时调用，发生在虚拟DOM打补丁之前，适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器
updated
虚拟DOM重新渲染和打补丁之后调用，组件DOM已经更新，可执行依赖于DOM的操作，避免在这个钩子中操作数据，可能陷入死循环
beforeDestroy
实例销毁之前调用，这一步实例仍然可以使用，this仍然可以获取实例，常用于销毁定时器，解绑全局事件，销毁插件对象等操作
destroyed
实例销毁之后调用，调用后，Vue实例指示的所有东西都会解绑，所有事件监听器都会被移除，所有子实例也会被销毁。
~~

If you’re not satisfied with the life you’re living, don’t just complain. Do something about it.
对于现况的不满，你不能只是抱怨，而是要有勇气作出改变。

~~