vue.js使用详解

1.什么是vue.js
vue.js是一款数据驱动型的js框架。何为数据驱动型？html视图层定义模板，vue定义数据。html和vue数据，通过标签id关联。

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

3.使用示例
1)声明式渲染

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
{{message}}
</div>

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

运行结果：

2)条件判断

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app-3">
  <p v-if="seen">Now you see me</p>
</div>

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

运行结果：

3)循环

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app-4">
    <ol>
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
    </ol>
</div>

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

运行结果：

4)客户端交互

vue.js和浏览器可实现双向通信，即浏览器中绑定值改变后，js中会同时改变，反之亦然。

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

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

运行结果：

4.组件
组件可以理解为在js中定义了一个html模板和一个vue.js，前台html可以直接使用这个模板，同时会被vue.js渲染。
需要注意的是，组件必须要有vue.js数据渲染才能显示。
如下例所示：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app-7">
  <ol>
    <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
  </ol>
</div>

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { text: 'Vegetables' },
      { text: 'Cheese' },
      { text: 'Whatever else humans are supposed to eat' }
    ]
  }
})

运行结果：

我们在模板中增加了一个“props”字段，来接收数据，在html页面中将这个字段绑定到vue.js中的数据。
完成数据绑定。

5.使用场景

个人觉得适合数据量大，前端html页面模块重复复杂的情况。