模板语法_插值
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一课</title>
</head>
<body>
<div id="box"><!-- //写法一 -->
{{msg}}
</div>
<div class="div1"><!-- //写法二 -->
{{msg}}
<p v-once="num">{{num}}</p>
<p>{{num}}</p>
<p v-html="texHtml"></p>
<p v-text="msg"></p>
<button v-on:click="show">Button</button>
<img v-bind:src="img"></img>
<button disabled="true" >我是一个按钮</button>
<button v-bind:disabled="buttonState" >我是一个按钮</button>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
// 实体Vue 的作用范围
//el:"#box", //写法一
//写法二:
el:".div1",
data:{ //数据
msg:"来自实体的数据...",
texHtml:"<h1>html</h1>",
num:666,
img:"https://cn.vuejs.org/images/logo.png?_sw-precache=cf23526f451784ff137f161b8fe18d5a",
buttonState:false,
},
methods:{
show:function(){
console.log(" button click");
this.num++;
}
}
})
</script>
</body>
</html>
1> 使用 ：实例化 （ new vue ）
new Vue({
// 实体Vue 的作用范围
//el:"#box", //写法一
//写法二:
el:".div1",
data:{ //数据
msg:"来自实体的数据...",
texHtml:"<h1>html</h1>"
},
});2> 插值
文本：在节点中加入{{数据名称}}
1. 在节点中加入 {{变量名称}}
2.v-text 指令 <p v-text="msg"></p>
html： 指令
1. v-html
花括号（{{}}） 和 冒号 "" 使用的区别：
在节点之间用 {{}}。 例如： <h1>{{变量名称}}</h1>
在节点内用 ""。 例如：<h1 v-html="变量名称">{{变量名称}}</h1>