vue的部分标签的简单使用v-on、v-bind、v-once、v-html等
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<!-- v-once 控制视图不响应式更新 -->
<div id="app">
<span v-once>Message: {{ msg }}</span>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
msg: '<span style="color: red">This should be red.</span>'
}
})
</script>
<!-- v-html 控制将返回值作为html处理,而不是字符串 -->
<div id="app-2">
<span v-html="msg">123</span>
</div>
<script>
var app2 = new Vue({
el: '#app-2',
data: {
msg: '<span style="color: red">This should be red.</span>'
}
})
</script>
<!-- v-bind 控制vue的数据作用在HTML标签属性上 -->
<div id="app-3">
<button v-bind:disabled="isButtonDisabled">Button</button>
</div>
<script type="text/javascript">
var app3 = new Vue({
el: '#app-3',
data: {
isButtonDisabled: true
}
})
</script>
<!-- 若包含vue无法解析的格式,则整个div都不会显示
每个绑定都只能包含单个表达式,不能是语句 -->
<div id="app-4">
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">div</div>
<!--
下面的不是表达式
{{ var number = 1 }} //语句
{{ if (ok) { return message } }} -->
</div>
<script type="text/javascript">
var app4 = new Vue({
el: '#app-4',
data: {
number:1,
ok:true,
message:"Hello vue",
id:'aaa'
}
})
</script>
<!-- v-on 控制控件的事件,v-bind 控制控件的属性 -->
<div id="app-5">
<a v-bind:href="url">click here</a>
<button v-on:click="reverseMessage">{{message}}</button>
</div>
<script type="text/javascript">
var app5 = new Vue({
el: '#app-5',
data: {
url: 'http://www.baidu.com',
message: 'this is message'
},
methods: {
reverseMessage: function(){
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
<!-- 修饰符? -->
<!-- <form v-on:submit.prevent="onSubmit">...</form> -->
<!-- 缩写 v-bind缩写为:, v-on缩写为@ -->
<div id="app-6">
<a :href="url">click here</a>
<button @click="reverseMessage">{{message}}</button>
</div>
<script type="text/javascript">
var app6 = new Vue({
el: '#app-6',
data: {
url: 'http://www.baidu.com',
message: 'this is message'
},
methods: {
reverseMessage: function(){
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
<!-- 计算属性computed,注意reversedMessage并不是一个函数,只是一个特别的属性,即无法通过app7.reversedMessage()
来调用但是可以通过app7.reversedMessage来获取,当获取时,会发现并没有输出invoke字符串,这是因为使用了vue的缓存
-->
<div id="app-7">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script type="text/javascript">
var app7 = new Vue({
el: '#app-7',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function () {
console.log('invoke');
return this.message.split('').reverse().join('');
}
}
})
</script>
</body>
</html>