您的位置：首页 > 产品设计 > UI/UE

vue.js的一些知识点

2017-01-04 10:54 344 查看

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>

这样会报错：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航