Vue基础———模板语法
1.基础模板
Vue是一个模板 刚刚接触的时候他可能会让你感觉十分难受 下面是一个最基本的vue模板
<body>
<div id="msg">{
{
msg}}</div>
</body>
<script src="js/vue.js"></script>
<script>
var newDiv = new Vue({
//el获取的是元素
el: "#msg",
//是你要添加到模板的数据
data: {
msg: "hello word",
},
});
</script>
2.数据填充
1、v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
2、v-html指令用于将HTML片段填充到标签中，但是可能有安全问题
3、v-pre用于显示原始信息
<body>
<div id="app">
<div>{
{
msg}}</div>
<div v-text='msg'></div>
<div v-html='msg1'></div>
<div v-pre>{
{
msg}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
1、v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
2、v-html指令用于将HTML片段填充到标签中，但是可能有安全问题
3、v-pre用于显示原始信息
4.v-once的应用场景：如果显示的信息后续不需要再修改，你们可以使用v-once，这样可以提高性能。
*/
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue',
msg1: 'HTML
'
}
});
</script>
运行结果如下图：
3.双向数据的绑定（重点）
1.什么是双向数据绑定
答：当数据发生变化的时候，视图也就发生变化
当视图发生变化的时候，数据也会跟着同步变化
2.双向绑定的使用场景
答：v-model是一个指令，限制在 、