Vue 指令（持续更新）
程序员文章站
2022-07-06 19:59:31
...
v-text指令： 设置标签内容（textContent）
默认写法会替换全部内容，使用插值表达式{{}}可以替换指定内容
内部支持写表达式
v-html指令：设置元素的innerHTML
内容中有html结构会被解析为标签
v-text指令无论内容是什么，只会解析为文本
v-on指令：为元素绑定事件
事件名不需要写on,指令可以简写@
绑定方法定义在methods属性中
方法内部通过this 关键字可以访问修改data数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content= "width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Vue 基础 </title>
<!-- 开发环境版本，包含帮助命令行警告（下载Vue）-->
<script src="JS/vue.js" type="text/javascript"></script>
</head>
<body>
<div id = "app">
{{message}}
<h2 v-text="vtext+'拼接'">此文本不生效</h2>
<h2>{{obj.pram1}}拼接</h2>
<ul>
<li>{{list[0]}}</li>
<li>{{list[1]}}</li>
<li>{{list[2]}}</li>
</ul>
<p v-html="vhtml"></p>
<button v-on:click="doClick">点击</button>
<button @dblclick="dodbclicked">双击</button>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"Hello Vue!",
vtext:"V-text",
vhtml:"<a href='https://www.bilibili.com'>哔哩哔哩</a>",
obj:{
pram1:"Pram1",
pram2:"Pram2"
},
list:["one","two","three"]
},
methods:{
doClick:function(){
alert("Click!");
},
dodbclicked:function(){
this.message+="!"
alert("DBClick! "+this.message);
}
}
})
</script>
</body>
</html>
上一篇： Xbunder
下一篇： 用 ' Get '表述人生事件