HOME
↑
NAVIGATION

每天学点Vue（1）-- 双向数据绑定

0.简单说一下对Vue的理解

使用的是MVVM设计模式。M-Model,V-View,VM-ViewModel

  • Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；(.js文件)
  • View 代表UI 组件，它负责将数据模型转化成UI 展现出来;(.html文件)
  • ViewModel 是一个同步View 和 Model的对象(vue.js文件)

V和M之间无联系，使用VM将两者联系起来，实现双向交互，即改变V或者M，另一项随之改变，或者说，同步。

因此，写代码时候不用考虑DOM和数据状态的同步问题的操作，解决了DOM性能差和数据状态难同步这两大痛点。

一个简单例子

View 层 - HTML 代码

<\div id="app">
{{ message }}
<\/div>

Model 层 - JavaScript 代码

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

1.v-model双向数据绑定

View 层 - HTML 代码

<\div id="example-1">
<\div>{{ message }}<\/div>
<\input v-model = "message">
<\/div>

Model 层 - JavaScript 代码

var vm = new Vue({
el:"#example-1",
data:{
message:"hello,world!"
}
});

这里的话，在input里写东西，div中的message也会随之改变

如果不想让它改变，就把div行写为
<\div v-once>{{ message }}<\/div>

这是vue2.0的写法，如果是1.0的版本，则写为{{ * message }}

结合一点简单的表达式

View 层 - HTML 代码

<\div>{{message.split("")}}<\/div>//[ "h", "e", "l", "l", "o", ",", "w", "o", "r", "l", "d", "!" ]
<\div>{{message.split("").reverse()}}<\/div>//[ "!", "d", "l", "r", "o", "w", ",", "o", "l", "l", "e", "h" ]
<\div>{{message.split("").reverse().join("")}}<\/div>//!dlrow,olleh

Model 层 - JavaScript 代码

var vm = new Vue({
el:"#example-1",
data:{
message:"hello,world!"
}
});

注意！使用split直接会把字符串转变为字符串数组

由于在数组中，所以每一项的字符串，都要用""包裹起来，以逗号隔开，再在最外面加上[]