vue 指令
阿新 • • 發佈：2018-05-01
UNC first true body title 圖片 alt size light
v-text和v-html的區別：
v-text :會進行轉譯
v-html：不會進行轉譯
v-html demo :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue入門</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="first">
<div v-html="content"></div>
</div>
<script>
new Vue({
//綁定上面的id el指的是vue實例跟哪個dom節點綁定
el:"#first",
data:{
content:"<h1>願所有努力不被辜負</h1>"
}
})
</script>
</body>
</html>
效果：
v-text demo :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue入門</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="first">
<div v-text="content"></div>
</div>
<script>
new Vue({
//綁定上面的id el指的是vue實例跟哪個dom節點綁定
el:"#first",
data:{
content:"<h1>願所有努力不被辜負</h1>"
}
})
</script>
</body>
</html>
效果：
v-on:給元素綁定click事件，觸發handleClick方法，定義在vue實例的methods
v-on：給元素綁定click事件
v-on:click="handleClick"：觸發handleClick方法
methods: 定義在vue實例的methods被調用
通過this.content 改變實例裏面數據 vue實例尖聽數據的改變 更新模板
this.content="加油 是的"
demo :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue入門</title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> </head> <body> <div id="first"> <div v-on:click="handleClick">{{content}}</div> </div> <script> new Vue({ //綁定上面的id el指的是vue實例跟哪個dom節點綁定 el:"#first", data:{ content:"明天會更好" }, methods: { handleClick: function(){ this.content="加油 是的" } } }) </script> </body> </html>
效果：
2018-05-01 11:59:31
vue 指令