正文
（4）打鸡儿教你Vue.js
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
flowchart 箭头图标 勿删
模板语法：
<div id="app">
<p>{{ message }}</p>
</div>
html
使用 v-html 指令用于输出 html 代码
v-html
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>dashu</h1>'
}
</script>
<div id="app">
<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
<br><br>
<div v-bind:class="{'class1': use}">
v-bind:class 指令
</div>
</div>
<script>
new Vue({
el: '#app',
data:{
use: false
}
});
</script>
{{ message.split('').reverse().join('') }}
<div id="app">
<pre><a v-bind:href="url"></a></pre>
</div>
<script>
new Vue({
el: '#app',
data: {
url: ''
}
})
</script>
v-on 指令，它用于监听 DOM 事件：
<a v-on:click="doSomething">
.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit"></form>
实现双向数据绑定：
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'dashu!'
}
})
</script>
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定
v-on 监听事件
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转字符串</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'dashu'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
过滤器：
字符串第一个字母转为大写：
<div id="app">
{{ message | capitalize }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'dashu'
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
</script>
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
请点赞！因为你的鼓励是我写作的最大动力！
吹逼交流群： 711613774
