vue学习笔记

常用vue指令

{{theValue}}文本值绑定
v-bind:title="value"：属性值绑定
v-if="value"：条件指令
v-for="item in arr"：循环指令
v-on:click="deal"事件监听指令
v-model="theValue"：双向绑定
v-once：只更新一次
v-html="theHtml" 允许包含html标签元素

声明vue对象

var app=new vue({
el:'#map1'，
data：｛theValue：'aa'},
created() function () {
　　this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
},

mounted(){
},

computed: {
　　reversedMessage: function () {
　　　　return this.message.split('').reverse().join('')
　　}
},
methods: {
　　reversedMessage: function () {
　　　　return this.message.split('').reverse().join('')
　　}
},
watch: {
　　firstName: function (val) {
　　　　this.fullName = val + ' ' + this.lastName
　　},
　　lastName: function (val) {
　　　　this.fullName = this.firstName + ' ' + val
　　},
　　question: function (newQuestion, oldQuestion) {
　　　　this.answer = 'Waiting for you to stop typing...'
　　　　this.debouncedGetAnswer()
　　}
}
})

计算属性

计算属性vs方法: 可以达到同样的效果，但是，计算属性只有当依赖绑定属性更新时执行，方法则会一直执行。
计算属性vs侦听器:可以达到同样的效果，但是，计算属性是依赖于绑定属性更新的，自动执行，写法比监听器(多个对象要监听多次)简单

访问数据属性

app.theValue，app.$data.theValue

变量变化监控
vm.$watch('a', function (newValue, oldValue) {xxxxx})

(当需要在数据变化时执行异步或开销较大的操作时)

生命周期

创建created，挂载mounted，更新updated，销毁destroyed

等于符号

==是值是否相等，===是对象是否相等。

v-bind动态参数
<a v-bind:[attributeName]="url">
<a v-bind:[eventName]="aaa">

事件修饰符
<form v-on:submit.prevent="onSubmit"
.stop
.prevent
.capture
.self
.once
.passive
event.preventDefault() 或 event.stopPropagation()

指令的简写
v-bind，冒号：，v-on，邮箱符号@

注册组件

Vue.component('todo-item', {
    data: function () {
        return {
        count: 0
        }
    } ,
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
})           

class绑定+style绑定
对象语法：<div v-bind:class="classObject"></div>
数组语法：<div v-bind:class="[{ active: isActive }, errorClass]"></div>

对象语法：<div v-bind:style="styleObject"></div>
数组语法：<div v-bind:style="[baseStyles, overridingStyles]"></div>

注意事项

一、数组更新
以下情况，vue不能检测到
1、利用索引设置数组项时
vm.items[indexOfItem] = newValue
2、修改数组长度时
vm.items.length = newLength
解决办法：
问题1：
Vue.set(vm.items, indexOfItem, newValue)
vm.$set(vm.items, indexOfItem, newValue)
vm.items.splice(indexOfItem, 1, newValue)
问题2：
vm.items.splice(newLength)

2、对象属性的添加或删除

Vue 不能检测对象属性的添加或删除
解决办法：
Vue.set(object, propertyName, value)
vm.$set(vm.userProfile, 'age', 27)

添加多个属性：
Object.assign()