<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="vue_det">
<h1>site : {
{site}}</h1>
<h1>url : {
{url}}</h1>
<h1>Alexa : {
{alexa}}</h1>
</div>
<script type="text/javascript">
var data = {
site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
var vm = new Vue({
el: '#vue_det',
data: data
})
document.write(vm.site === data.site) // true
document.write("<br>")
vm.site = "Runoob"
document.write(data.site + "<br>") // Runoob
</script>
</body>
</html>
第25行代码我一开始错写成vm.data.site = “Runoob”，后来才知道这里有个坑。
注意
var vm = new Vue({
el: ‘#vue_det’,
data: data
})
vm只是Vue这个类的一个实例
{
el: ‘#vue_det’,
data: data
}
这只是传进 Vue()的一个参数，并不是vm本身
以下都是错误的使用
vm.el == ‘vue_det’;
vm.data=={ site: “菜鸟教程”,
url: “www.runoob.com”,
alexa: 10000};
vm.data.site ==‘菜鸟教程’;
通过vm读取数据的正确方式
vm.site = “Runoob”
通过vm获取其他属性
vm.$el == document.getElementById(‘app’) //true
vm.$data === data // true
vm.$data.message ===‘Hello Vue!’ //true
这个$符号代表的就是vm的真实属性了。