Vue.js简介

• Vue.js是一款轻量级前端框架，具有响应式编程和组件化的特点

Vue.js的导入

• 从官网获取Vue.js

  https://cn.vuejs.org/
  

• 可以使用cdn在线导入

  <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/2.5.6/vue.min.js"></script>
  

  在线导入时可以指定VueJs的版本

实例及选项

实例

• Vue.js是面向实例的。类似于Java的面向对象，Vue.js可以将DOM对象定义为一个Vue实例，基本的格式为：

  var vm = new Vue({
      options
  })
  

  其中，options是对Vue实例的具体细节定义，即选项

选项

• 在定义了一个Vue实例之后，一般会有如下常用选项：

  选项	作用
  el	用于指定实例所对应的DOM元素，一般使用CSS选择器
  data	用于定义实例中所使用的数据，可实现响应式绑定
  methods	用于定义实例中所使用的方法
  computed	用于定义实例中所使用的方法，类似methods选项
  components	用于定义实例中所使用的模板

  el选项

  • 用于指定实例所对应的DOM元素，用法实例如下

    var vm = new Vue({
        el : '#app'
    })
    

    如果所使用的CSS选择器选择了不止一个DOM元素，例如使用类选择器，那么只会作用于第一个符合条件的DOM元素

  data选项

  • 用于定义实例中所使用的数据，用法实例如下

    var vm = new Vue({
        el : '#app',
        data : {
            message : 'hello world'
        }
    });
    

  • 在页面中可以使用双花括号来调用data中的数据来进行输出，如。data中的数据是响应式的，即数据发生变化，对应的输出也就会发生变化。(数据绑定)

  • 实现的效果：

    你的输入为：

  methods选项

  • 用于定义实例中所使用的指令，用法实例如下

    var vm = new Vue({
        el : '#app',
        methods : {
            demo : function(){
                alert('测试方法绑定')
            }
        }
    });
    

  • 页面中的绑定:

    <div id="app">
        <button v-on:click='demo'>
            测试方法
        </button>
    </div>
    

  • 最终效果如下：

    测试方法

    computed选项

  • 类似methods选项的用法，区别在于methods是需要实际调用才会去执行的，而computed是在渲染结束之后直接调用。上一个例子中如果使用computed来定义demo方法的话，在button按钮加载结束之后会调用此方法，但再次点击是不会触发的，除非其渲染发生改变。因此，一般的方法绑定还是选择methods选项。

  components选项

  • Vue.js可以定义模板来进行输出，用法如下

    var vm = new Vue({
        el : '#app',
        components : {
            'info' : {
                template : '<h1>Vue定义的模板</h1>'
            }
        }
            
    })
    

  • 使用模板输出时，HTML中更为简单，而且可以复用

    <div id='app'>
        <info></info>
    </div>
    

  • 最终效果如下

  • 关于components选项的用法更多细节会在以后提到

生命周期与钩子函数

• Vue实例从开始创建到渲染到最后的销毁的过程，可以使用钩子函数对其进行监控

• 对生命周期的定义，Vue2.0版本以后做出了较大的改动，如下：

  1.x.x	2.0+	描述
  init	beforeCreated	组件的实例被创建，组件的属性计算之前
  created	created	实例已创建完成后
  beforeCompile	beforeMount	挂载开始之前
  compiled	mounted	模板挂载之后
  ready	mounted	模板挂载之后
  —	beforeUpdated	组件更新之前
  —	updated	组件更新之后
  —	activated	组件被激活(for keep-alive)时
  —	deactivated	组件被移除时
  attached	—	组件插入DOM时
  detached	—	组件移除DOM时
  beforeDestroy	beforeDestroy	组件销毁前
  destroyed	destroyed	组件销毁后

• 调用生命周期钩子函数的方法：

  var vm = new Vue({
      el : '#app',
      created : function(){
          console.log('vm is created!')
      },
      mounted : function(){
          console.log('vm is mounted!')
      }
  })