vue.js的一些知识点
1、
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="vue.js"></script> </head> <body> <div id="app"> <span>{{count}}</span> <button @click="inc">+</button> </div> <script> var app = new Vue({ // 1. // data () { // return {count: 0} // }, // 2. // data: { // count: 0 // }, // 3. data: function() { return { count: 0 } }, methods: { inc () {this.count++} } }) app.$mount('#app') </script> </body> </html>
上述的data有三种写法，都能够运行，那有什么区别呢？
首先，1是3的语法糖，是新的ES6语法，和3一摸一样。
1和2的区别：引用官网，简而言之，在app = new Vue对象时，没什么区别，因为你app对象不会被复用。但是在组件中，因为可能在多处调用同一组件，所以为了不让多处的组件共享同一data对象，只能返回函数。
使用组件时，大多数可以传入到 Vue 构造器中的选项可以在注册组件时使用，有一个例外： data 必须是函数。 实际上，如果你使用的不是函数，那么 Vue 会在控制台发出警告，告诉你在组件中 data 必须是一个函数。
下面的例子会让所有的组件都同时发生变化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="vue.js"></script> </head> <body> <div id="example-2"> <simple-counter></simple-counter> <simple-counter></simple-counter> <simple-counter></simple-counter> </div> <script> var data = { counter: 0 } Vue.component('simple-counter', { template: '<button v-on:click="counter += 1">{{ counter }}</button>', // data 是一个函数，因此 Vue 不会警告， // 但是我们为每一个组件返回了同一个对象引用 data: function () { return data } }) new Vue({ el: '#example-2' }) </script> </body> </html>
由于这三个组件共享了同一个 data ， 因此增加一个 counter 会影响所有组件！我们可以通过为每个组件返回新的 data 对象来解决这个问题：
data: function () { return { counter: 0 } }
https://cn.vuejs.org/v2/guide/components.html#data-必须是函数
https://segmentfault.com/q/1010000007910818?_ea=1490198
2、
渐进式框架、采用自底向上增量开发（可以查看前面的文章）
核心思想：响应的数据绑定和组合的视图组件
在没有接触 DOM 的情况下更新了应用的状态 - 所有的 DOM 操作都由 Vue 来处理，你写的代码只需要关注基本逻辑。v-on可以实现。
注意每个 Vue 实例都会代理其 data 对象里所有的属性，只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
3、
不仅可以绑定 DOM 文本到数据，也可以绑定 DOM 结构到数据（v-if）。
需要注意的是：v-if不能绑定在所挂载的元素上，比如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue组件</title> </head> <body> <div id="app" title="text" v-if="type"> {{message}} {{text}} </div> <script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script> <script> var mes = { message:"hello"+ new Date(), text:"world" } var app = new Vue({ el:"#app", data:mes, type:true }) </script> </body> </html>
这样会报错：
