vue学习笔记

数据绑定

文本绑定：<div>{{value}}</div>
属性绑定：v-bind:title="value" 简写  :title="value"
双向绑定：<input v-model="value">
style绑定： 样式名不用单引号，变量不用单引号，单位要单引号
    1、对象语法：<div :style="{color: value1,fontSize: value2 + 'px' }"></div>    <div :style="{width:value+'px'}">
               直接绑定到一个样式对象通常更好，这会让模板更清晰。<div :style="Object"></div>
    2、数组语法：<div :style="[value1, value2]"></div>
class绑定：
    1、属性语法：<div :class="className1"></div>   
    2、对象语法：<div :class="{className1: isTrueOrFalse,className2: isTrueOrFalse}"></div>
    3、数组语法：<div :class="[className1, className2]"></div>
    4、对象和数组一起用：<div :class="[{className1:isTrueOrFalse}, className1]"></div>
    <div :class="isEchartShow==true?'botton_panel_show':'botton_panel_hide'"> 等同于 <div :class="{botton_panel_show:isEchartShow,botton_panel_hide:!isEchartShow}">

 

 

常用vue指令

<div>{{Value}}</div> 文本值绑定
v-bind:title="value" 属性值绑定
v-if="value==true" 条件指令
v-for="item in arr" 循环指令 <li v-for="(item,key) in arr">
v-on:click="deal" 事件监听指令
v-model="Value" 双向绑定
v-once  只更新一次
v-html="value"  允许包含html标签元素

 

 

指令的简写

v-bind  简写   冒号：

v-on   简写   邮箱符号@

 

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()

 

注册组件

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()