Vue３的模板语法－－插值
原创
Vue3的核心思想是数据驱动视图，即页面会随数据的变化而变化。其中的模板语法在此体现得淋漓尽致。
tips:
1.可以直接在事件池中使用this关键字找到数据池中的内容内容进行修改，页面会直接变化；
2.可以给予元素v-once来锁定模板值；
3.可以给予元素v-html来输出html元素内容；
4.可以给予元素v-text来输出文本内容，v-text,v-html会覆盖元素里面的内容
代码实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-----使用Vue3,首先要引入Vue ---这个做法有点类似与jQuery或其他js库的用法----->
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<h3>Vue3</h3>
<div id="lio">
<!--插值表达式，绑定变量-->
<!--{{content}}
{{sky}}
{{num}}-->
<!----v-on:click表示绑定事件---->
<span v-once>
{{get}}
</span>
<div>
{{html}}
</div>
<div v-html="html">
</div>
<br/><br/>
<button v-on:click='a'>button</button>
<br/> <br/>
<button v-on:click='b'>button2</button>
</div>
<br/><br/>
<div class="lancy">
{{myvalue}}
</div>
<script>
Vue.createApp({ /*---Vue的createApp方法，可以放入数据池与事件池，data是数据池，methods是事件池---*/
data:function(){ /* 变量池 */
return{
content:"hello" , /* 自定义的变量 */
sky:"Vue3",
num:0,
get:"一次",
html:"<div>123</div>"
}
},
methods:{ /* 事件池 */
a:function(){
this.get=10
// var _this=this;
//setInterval(function(){
// _this.num++;
// },1000);
//alert(1);
//console.log(this)
//this.content='hi Vue3',
//this.sky="hahaha"
},
b:function(){
alert(2);
}
}
}).mount("#lio");/*---mount（）方法指定挂载元素，只会挂载符合条件的第一个元素--*/
Vue.createApp({
data:function(){
return{
myvalue:321
}
}
}).mount(".lancy");
</script>
</body>
</html>【小结】
本小节简单介绍Vue3模板语法对文本的操作。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
