002 V Vue实例+数据绑定

不二如是 · 发表于 2018-8-28 16:49:19

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2018-8-30 10:49 编辑

登录/注册后可看大图

上一讲我们介绍了如何启动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）

答案：

游客，如果您要查看本帖隐藏内容请回复

如果有收获，别忘了评分

：

登录/注册后可看大图

这位鱼油，如果喜欢Vue，请订阅专辑（传送门）（不喜欢更要订阅

）

登录/注册后可看大图

差点夹不住屁 · 发表于 2018-10-9 10:46:15

已学习,谢谢老板

Ruide · 发表于 2020-4-7 17:58:52

T
vue实例对应的页面中元素
T

一笙彤 · 发表于 2020-6-9 23:03:07

suweixuan1998 · 发表于 2020-6-23 10:54:01

1.T
2.指定一个页面中已存在的DOM元素来挂载Vue元素
3.T

kmq116 · 发表于 2020-7-19 22:40:17

111111111111

tg123 · 发表于 2020-9-16 19:58:16

以梦喂马 · 发表于 2021-3-28 20:59:20

T
el用于指定一个页面中已经存在的DOM元素来挂载Vue实例
T

HanYanShuang · 发表于 2022-1-6 14:50:35

jack6666 · 发表于 2022-10-24 19:59:07

账号		自动登录	找回密码
密码			立即注册

[庖丁解牛] 002 V Vue实例+数据绑定

马上注册，结交更多好友，享用更多功能^_^

本帖被以下淘专辑推荐: