3.模板语法
https://cn.vuejs.org/v2/guide/syntax.html
https://www.bilibili.com/video/av20720090/?p=3
<!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>3.模板语法</title>
<script src="../static/vue.js"></script>
</head>
<body>
<div id="app">
<p v-once>
{{msg}}
</p>
<p v-text="msg"></p><!--取代 {{msg}} -->
<p v-html="msg2"></p>
<!--<p title="{{msg}}">{{msg}}</p> {{}}雙大括號不可寫在html屬性中 -->
<p v-bind:title="msg+'....'">{{msg}}</p><!-- {{}}雙大括號不可寫在html屬性中，要用v-bind -->
<p>
<button v-bind:disabled="dis">註冊</button>
</p>
<p>
{{msg+'123'}} <br>
{{dis?'禁用':'啟用'}} <br>
{{ msg.split('').reverse().join('') }} <br>
<!--{{ var a = 1 }} 不能這樣寫 -->
<!--{{ if (ok) { return message } }} 不能這樣寫 -->
</p>
<form action="http://www.google.com" v-on:submit.prevent>
<button>登入</button>
</form>
<form action="http://www.google.com" @submit.prevent><!-- v-on縮寫@ -->
<button>登入</button>
</form>
<p :title="msg+'....'">{{msg}}</p><!-- v-bind縮寫: -->
</div>
<script>
var app=new Vue({
el:'#app',
data:{
msg:'你好!',
msg2:'<b>你好!</b>',
dis:true,
}
})
</script>
</body>
</html>
沒有留言:
張貼留言