002 V Vue实例+数据绑定
本帖最后由 不二如是 于 2018-8-30 10:49 编辑https://xxx.ilovefishc.com/forum/201808/24/170823gj1tj61c4apj6o1e.jpg
上一讲我们介绍了如何启动Vue以及写了第一个程序。
看过上一讲的鱼油，应该觉得Vue的实操很简单，这次来好好科普一下Vue代码必备的东西。
稍微优化一下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《Vue-庖丁解牛》案例演示">
<meta name="author" content="鱼C工作室">
<title>鱼C-Vue</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="myApp">
<input type="text" v-model="name" placeholder="请鱼油输入名字">
<h1>欢迎，{{name}}</h1>
</div>
<script>
var app = new Vue({
// 选项
el:'#myApp',
data:{
name:''
}
})
</script>
</body>
</html>
现在让我们来好好解释解释。
实例
通过构造函数Vue就可以创建一个Vue的根实例，并启动Vue应用：
var app = new Vue({
// 选项
})
变量app就代表了这个Vue实例，事实上，几乎所有的代码都是一个对象，写入Vue实例内部。
接下来必不可少的一项就是el。
el用于指定一个页面中已经存在的DOM元素来挂载Vue实例。
绑定对应div的id即可：
<div id="myApp"></div>
<script>
var app = new Vue({
// 选项
el:'#myApp'
})
</script>
挂载成功后，可以通过app.$el来访问该元素。
Vue提供了很多常用的实例属性和方法，后续用到慢慢再说。
数据
在input标签中：
<input type="text" v-model="name" placeholder="请鱼油输入名字">
有一个v-model的指令，其值对应于我们创建的Vue实例的data选项中的name字段。
这就是数据绑定。
通过Vue实例的data选项，可以声明应用内需要双向绑定的数据。
建议讲所有会用到的数据预先在data内声明，这样有过多数据的时候，不容易找不到。
Vue实例本身也可以访问data内的所有属性，例如：
var app = new Vue({
// 选项
el:'#myApp',
data:{
name:'',
tstName:'鱼C'
}
})
console.log(app.tstName);
除了像上面这样显式声明数据外，还可以指向一个已有的变量。
并且它们只见默认建立了双向绑定，当修改其中任意一个，另一个也会跟着变。
修改：
var newFishc = {
a:"我爱鱼C"
}
var app = new Vue({
// 选项
el:'#myApp',
data:newFishc
})
输出测试：
// 从app指向newFishc中的a
console.log(app.a);
// 修改
app.a = 101;
// 测试是否修改成功。
console.log(newFishc.a);
// 修改原数据，看app调用时是否被修改
newFishc.a = "鱼C工作室";
console.log(app.a);
修改属性，原数据也会随之改变。
反之，修改原数据，Vue属性也会修改。
课后作业
1、创建的变量app可以表示Vue的实例？（T/F）
2、el用于指定什么？
3、修改原数据会对另一调用变量Vue属性产生影响？（T/F）
答案：
**** Hidden Message *****
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif 已学习,谢谢老板 T
vue实例对应的页面中元素
T 6 1.T
2.指定一个页面中已存在的DOM元素来挂载Vue元素
3.T 111111111111 {:5_90:} T
el用于指定一个页面中已经存在的DOM元素来挂载Vue实例
T 1 q
页:
[1]