首次引入vue.min.js，代码如下
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="js/api.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var data = ['1', '2', '3', '4']
var vm = new Vue({
el: '#App',
data() {
return {
data: data
}
},
mounted() {
this.a()
},
methods: {
a() {
console.log(this.data)
}
}
})
</script>
body部分代码如下
<body>
<div id="content">
<li v-for='item in data' v-cloak> {{item}} </li>
</div>
</body>
运行结果
渲染失败了，为什么？？？
原来错误是因为全局div的id为’content’，而el里面的是’#App’,改后代码如下：
el: '#content'
这样就成功了。
- 最后上面出现的v-cloak指令官网解释为：
- 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
1273
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
