马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
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，请订阅 专辑（ 传送门）（ 不喜欢更要订阅 ）
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2018-8-28 16:49:19
置顶卡
千斤顶
显身卡
发表于 2018-10-9 10:46:15
