Vue常见用法
1、花括号
{{}} 两个大花括号直接显示data内容
2、v-html
<div v-html="message"></div> message可以显示html标签内容
3、v-bind
<div v-bind:class="{'class1': use}"> use为true则使用class1类
<div v-bind:id="'list-' + id">添加id</div> 添加id
4、v-if
<p v-if="seen">现在你看到我了</p > seen为true则显示内容
<pre><a v-bind:href="url">菜鸟教程</a ></pre> url为链接
5、v-on:click
<a v-on:click="doSomething"> 点击事件
其中doSomething应该写在vue的methods上
6、v-model
<input v-model="message"> 双向绑定
只能用在 input、select、text、checkbox、radio 等表单控件元素上
7、过滤器 {{ message | capitalize }} capitalize需要写在vue的filters上
例:filters: {
capitalize: function (value) { //value即是message值
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
8、缩写
<a v-bind:href="url"></a >
<!-- 缩写 -->
<a :href="url"></a >
<!-- 完整语法 -->
<a v-on:click="doSomething"></a >
<!-- 缩写 -->
<a @click="doSomething"></a >
9、v-for
<li v-for="site in sites"> sites是个数组或对象(for有参和无参)
{{ site.name }}
</li>
10、vue的computed:用于处理一些复杂逻辑,用法和methods一样定义方法
11、vue的监听属性watch:只要data改变就会调用里面的方法
// $watch 是一个实例方法
vm.$watch('kilometers', function (newValue, oldValue) {
// 这个回调将在 vm.kilometers 改变后调用
document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + ",修改后值为: " + newValue;
}) //kilometers是data的一个属性
12、v-bind:style
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
13、
vue常用模板
<script type = "text/javascript">
var vm = new Vue({
el: ‘#app,
data: { /数据
kilometers : 0,
},
methods: { //方法
//封装方法
reversedMessage2: function () {
return this.message.split('').reverse().join('')
}
//事件处理
//初始化
},
computed :{ //计算
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
},
watch : { //监听属性 kilometers改变则调用方法
kilometers:function(val) {
this.kilometers = val;
this.meters = this.kilometers * 1000
}
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
},
});
// $watch 是一个实例方法
vm.$watch('kilometers', function (newValue, oldValue) { //监听属性
// 这个回调将在 vm.kilometers 改变后调用
document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + ",修改后值为: " + newValue;
})
</script>
```