挂载点、插值表达式
<!
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>Vue入门</title>
<scriptsrc="./vue.js"></script> <!-- 单闭合时不合法-->
</head>
<body>
<divid="root">{{msg}}</div> //插值表达式
<script>
newVue({//Vue实例
el:"#root",//挂载点(绑定的dom中的元素)
data:{//Vue中的数据
msg:"Hello World"
}
})
</script>
</body>
</html>
//HelloWorld
模板(挂载点中的都是模板)
<!
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>Vue入门</title>
<scriptsrc="./vue.js"></script>
</head>
<body>
<divid="root"></div>
<-- 模板-->
<-- <h1>Hello{{msg}}</h1> -->
<script>
newVue({//Vue实例
el:"#root",//挂载点(绑定的dom中的元素)
template:'<h1>Hello{{msg}}</h1>',//模板
data:{//Vue中的数据
msg:"World"
}
})
</script>
</body>
</html>
//HelloWorld
指令
<!
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>Vue入门</title>
<scriptsrc="./vue.js"></script>
</head>
<body>
<divid="root">
<!-- v-text Vue的指令number元素中显示的变量-->
<h1 v-text="number"></h1>
</div>
<script>
newVue({//Vue实例
el:"#root",//挂载点(绑定的dom中的元素)
template:'',//模板
data:{//Vue中的数据
msg:"world",
number:123
}
})
</script>
</body>
</html>
//123
<divid="root">
<!-- v-html 非转义显示内容 v-text转义显示内容(<h1>123</h1>)-->
<div-html="content"></div>
</div>
<script>
newVue({//Vue实例
el:"#root",//挂载点(绑定的dom中的元素)
template:'',//模板
data:{//Vue中的数据
content:"<h1>123</h1>"
}
})
</script>
//123