脚本宝典收集整理的这篇文章主要介绍了Vue 2.0 入门系列(1)数据绑定与响应式更新,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
我们从一个基本的输入框开始:
<input type="text" id="input">
如果用 JavaScript 让输入框显示 你好,Vue
呢?实现如下:
<script>
var data = {
message: "你好,Vue"
};
document.querySelector('#input').value = data.message;
</script>
代码说明:
定义一个 data
对象;
使用 js 提供的 querySelector
方法,来选择 id
为 input
的元素,并对 input
元素的 value
进行赋值。
那么,这个例子用 Vue 来实现是怎样的呢?
// html
<input type="text" id="input" v-model="message">
// js
var data = {
message: "你好,Vue"
};
var vm = new Vue({
el: '#input',
data:data
})
我们来详细说明下。
var vm = new Vue();
首先,调用构造函数 Vue
创建一个新的 Vue 实例,命名为 vm
;
el: '#input',
Vue 的实例必须挂载到某个元素上,可以通过 el
属性来设置。在本例中,实例被挂在到了 input
元素上。
var data = {
message: "你好,Vue"
};
data:data
我们定义另一个 data
对象,然后将其传给了 Vue 实例的 data
属性,该属性专门负责管理数据。这样,Vue 会全权代理 data
对象。比如,通过 vm.message
就可以访问 data
对象的 message
属性了。
<input type="text" id="input" v-model="message">
最后,我们使用 Vue 提供的指令 v-model
,该指令通常用于对表单控件的双向绑定。什么是双向绑定?接下来会介绍。
在进一步学习 Vue 之前,首先来安装相应的调试工具:官方地址。
安装之后,要允许其访问文件网址:
这里与 Google Chrome 为例,安装好之后,右上角就会多出一个 Vue 的标记。如果你打开的是一个 Vue 页面,那么该图标就会点亮。
先来看看第一节例子,只做了稍微改动: