马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2018-8-30 17:15 编辑
上一讲我们搞定了生命周期，本次来学习两个很使用的功能。
在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="myA">{{book}}</div>
<script>
var app = new Vue({
el:"#myA",
data:{
book:"《零基础入门学习Web开发》(Vue)"
}
})
</script>
</body>
</html>
大括号里的内容会被替换为data中book的值。
只要一修改book的值，大括号里的内容会被实时替换。
稍微复杂一点，例如实时显式当前的时间，每秒更新一下。
代码：<div id="myA">{{time}}</div>
<script>
var app = new Vue({
el: "#myA",
data: {
time: new Date()
},
mounted: function(){
// 声明一个变量指向Vue实例this，保证作用域一致
var _this = this;
// 1s修改一次的定时器
this.timer = setInterval(function () {
// 每1s修改一次数据
_this.time = new Date();
}, 1000);
},
beforeDestroy: function () {
if (this.timer) {
// 在Vue实例销毁前，清除定时器
clearInterval(this.timer);
}
}
})
</script>
"2018-08-30T09:06:21.214Z"是浏览器默认的时间格式。
而不是我们日常看到的格式化时间（2018-08-30 17:06:33）。
有多种方法转换，Vue的过滤器（filter）或计算属性（computed）也可以实现，后续来弄。
如果有的时候想输出HTML，而不是将数据解释后的文本，那么可以使用v-html：<div id="myA">
<span v-html="link"></span>
</div>
<script>
var app = new Vue({
el:"#myA",
data:{
link:'<a href="ilovefishc.com">鱼C主页</a>'
}
})
</script>
link的内容会被渲染为一个具有点击功能的a元素。
Vue只支持单个表达式，不支持语句和流控制。
在表达式中，不能使用用户自定义的全局变量，只能使用Vue白名单内的全局变量，就像上面的Date。
示范：<!--这是语句，不是表达式-->
{{var book = "《零基础入门学习Web开发》(Vue)"}}
<!--不能使用流控制，要使用三元运算-->
{{if(ok} return msg}
课后作业
1、"{{}}"是最基本的插值方式？（T/F）
2、"2018-08-30T09:06:21.214Z"是什么时间？
3、表达式中可以使用流控制？（T/F）
答案：
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢Vue，请订阅 专辑（ 传送门）（ 不喜欢更要订阅 ）
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2018-8-30 16:46:22
置顶卡
千斤顶
显身卡
发表于 2018-10-9 11:28:30
发表于 2018-11-26 23:16:43