VueDay04模板语法
Vue中一些基本的模板语法：
1.v-once:一次性插入，不再修改
2.插入HTML内容：v-html="htmlTxt"
3.绑定动态属性，全写v-bind:id="idname"
4.三元运算符:{{isVip?"欢迎VIP用户回来":"普通用户请充值"}}
5.事件的绑定:v-on:click,省略的写法是@click
6.注意：
/* 你的站点上动态渲染的任意 HTML 可能会非常危险，
因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，
绝不要对用户提供的内容使用插值。 */
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#login{
background: skyblue;
}
#register{
background: pink;
}
</style>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<!-- v-once:一次性插入，不再修改 -->
<h1 v-once>{{msg}}</h1>
<h1>{{htmlTxt}}</h1>
<!-- 插入HTML内容 -->
<h1 v-html="htmlTxt"></h1>
<!-- 修改属性的内容 -->
<!-- 绑定动态属性，全写v-bind:id="idname" -->
<div :id="idname">
<h1>登录</h1>
</div>
<!-- 模板语言的表达式应用 -->
<div>
{{firstname+lastname}}
</div>
<!-- 三元运算符 -->
<div>
{{isVip?"欢迎VIP用户回来":"普通用户请充值"}}
</div>
<!-- 事件的绑定 -->
<button v-on:click="changeBg">改变背景</button>
<!--@:click省略的写法 -->
<!-- <button @click="changeBg">改变背景</button> -->
</div>
<script type="text/javascript">
var app =new Vue({
el:"#app",
data:{
msg:"hello Vue",
htmlTxt:"<span>hellow</span>",
idname:"login",
firstname:"张",
lastname:"三",
isVip:true
},
methods:{
changeBg:function(){
document.body.style.background="skyblue"
}
}
})
/* 你的站点上动态渲染的任意 HTML 可能会非常危险，
因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，
绝不要对用户提供的内容使用插值。 */
</script>
</body>
</html>
