Vue.js基础篇

学习Vue.js需要读者有一定的前端基础，否则，可能不太适合你了！

鉴于是基础篇，这里就直接通过在html中引入Vue来说了（适合新手）

首先你需要在本地新建一个html文档，然后引入vue,如下：

<script src="https://unpkg.com/vue/dist/vue.js">

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统：

HTML：

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

JS：

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

在浏览器中你会看到

Hello word!

打开你的浏览器的控制台，并修改 app.message，你将看到上例相应地更新。

绑定 DOM 元素属性：

HTML：

<div id="app-2">
  <span v-bind:title="message">
Hover your mouse over me for a few seconds to see my     dynamically bound title!
  </span>
</div>

JS：

var app2 = new Vue({
  el: '#app-2',
  data: {
message: 'You loaded this page on ' + new Date()
  }
})

在浏览器中你会看到

Hover your mouse over me for a few seconds to see my     dynamically bound title!

元素的显示与隐藏，可通过属性seen来控制：
app3.seen = false/true
例子：

html:

<div id="app-3">
      <p v-if="seen">Now you see me ! </p>
</div>

js:

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

当将data下的seen:true 改为 false 后，Now you see me !会消失

循环

比较常用的v-for, 最常见的列表：

html:

<div id="app-4">
      <ol>
        <li v-for="x in xin">
              {{ x.text }}
           </li>
      </ol>
</div>

js:

var app4 = new Vue({
      el: '#app-4',
      data: {
    xin: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
      }
    })

数据渲染：

1 .Learn JavaScript
2 .Learn Vue
3 .Build something awesome

同样，在控制台输入新的内容，列表内容会实时更新

事件监听 v-on

html:

<div id="app-5">
      <p>{{ message }}</p>
      <button v-on:click="reverseMessage">Reverse Message<button>
</div>

js:

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

Vue 实例

Vue 实例，实则也就是 ViewModel（数据 + 函数），都是通过构造函数 Vue 创建的：

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data,
  created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
  }
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一个实例方法
vm.$watch('a', function (newVal, oldVal) {
  // 这个回调会在 `vm.a` 改变的时候触发
})

链接：https://zhuanlan.zhihu.com/p/23078117

Vue 实例都有自己的生命周期，比如 created, mounted, updated 以及 destroyed。所有方法被 called 的时候，this 都指向所在的 Vue 实例。

Class 和 Style 绑定

v-bind:class 来动态切换 :

 <div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

<div v-bind:class="classObject"></div>

js:

data: {
  classObject: {
active: true,
'text-danger': false
  }
}

绑定内联样式

<div v-bind:style="{ color: activeColor, fontSize: fontSize +     'px' }"></div>
或者直接绑定到 style：

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
color: 'red',
fontSize: '13px'
  }
}

key

当 vue 在更新被 v-for 渲染的列表时候，会使用就地 patch 的策略，而不是根据元素改变的顺序。我们可以提供 key 来做这个排序：

<div v-for="item in items" :key="item.id">
  <!-- content -->
</div>
item 会根据 id 来做排序。

Key 修饰符

通用的有使用 keyCode 的:
<input v-on:keyup.13="submit">

局部注册

var Child = {
  template: '<div>A custom component!</div>'
}
new Vue({

  components: {
    <my-component> 
'my-component': Child
  }
})

使用则像:

<div id="example">
      <my-component></my-component>
</div>

props传递数据

注册子组件

Vue.component('child', {
  // 申明 props
  props: ['message'],
  // 跟 data 一样，可以在 vm (this.message) 和 template 中直接使用
  template: '<span>{{ message }}</span>'
})

传递 props:

<child message="hello!"></child>

动态 props

<div>
      <input v-model="parentMsg">
      <br>
      <child v-bind:my-message="parentMsg"></child>
</div>