Vue JS的简单用法-起步

1 如何安装： 可以下载并引用或使用cdn引用 在构建大型单页应用时推荐采用cpm安装

   具体方式可以参考： http://www.runoob.com/vue2/vue-install.html

2 Vue应用的实例化： 通过构造器进行实例化，格式为：

   var vm = new Vue({

el: '#vue_det',

data: { site: "菜鸟教程", url: "www.runoob.com", alexa: "10000" },

methods: {

details: function() {

 return this.site + " - 学的不仅是技术，更是梦想！";

}

}

 });

 其中el是DOM元素的id，本例中Dom元素对应为：<div id = "vue_det"></div>

 data用于定义属性,可以进行数据绑定

   methods用于定义函数，可以通过return来返回值

   除了数据属性外，vue还有实例属性与方法，例如vm.$data === data；vm.$el === document.getElementById('vue_det')；

3 Vue是数据的双向绑定，其语法为：

   数据绑定： 双大括号，{{…}}   ,例如：

   <div id="app">

     <p>{{ message }}</p>

   </div>

  <script>

  new Vue({

    el: '#app',

    data: {

      message: 'Hello Vue.js!'

    }

  })

  </script>

4  使用v-html可以将文本解析为html内容，例如：

<div id="app">

<div v-html="message"></div>

</div>

<script>

new Vue({

el: '#app',

data: {

message: '<h1>菜鸟教程</h1>'

 }

})

</script>

5   使用v-bind 指令可以绑定DOM的属性,例如v-bind:class,v-bind:id,v-bind:href 等

6   使用v-on 可以绑定DOM的事件，例如： v-on：click="doSomthing"，可以加修饰符来指定事件的方式，例如v-on:submit.prevent="onSubmit"可以在                             submit时调用event.preventDefault()；例如：

<div id="app">

    <p>{{ message }}</p>

    <button v-on:click="reverseMessage">反转字符串</button>

</div>

<script>

new Vue({

  el: '#app',

  data: {

    message: 'Runoob!'

  },

  methods: {

    reverseMessage: function () {

      this.message = this.message.split('').reverse().join('')

    }

  }

})

</script>

7   指令,使用v-开头，例如v-if="seen"；

8       使用v-model进行用户输入的双向绑定；

9       过滤器,使用|符号进行过滤，|前面作为参数，|后面作为函数，例如：

<div id="app">

  {{ message | capitalize }}

</div>

<script>

new Vue({

  el: '#app',

  data: {

    message: 'runoob'

  },

  filters: {

    capitalize: function (value) {

      if (!value) return ''

      value = value.toString()

      return value.charAt(0).toUpperCase() + value.slice(1)

    }

  }

})

</script>

10     缩写： v-bind缩写为： :bind  ; v-on:click缩写为@click

11  其他： 当我们给一个比如 props 中，或者 data 中被观测的对象添加一个新的属性的时候，不能直接添加，必须使用 Vue.set 方法。

    Vue.set 方法用来新增对象的属性。如果要增加属性的对象是响应式的，那该方法可以确保属性被创建后也是响应式的，同时触发视图更新。例如：

           这里本来 food 对象是没有 count 属性的，我们要给其添加 count 属性就必须使用 Vue.set 方法，而不能写成 this.food.count = 1。