Vue框架学习笔记

<div id="app">

</div>

var app = new Vue({
    el:"#app",   // 绑定的元素
    data:{      // 所有数据, 通过模板语法 {{  }} 来渲染元素
        change: '会发生变化的数据',
        bool:true,
        testobj:{
            arg1:"arg",
        }
    },
    computed:{  // 属性计算, 可以通过模板语法来渲染需要复杂逻辑计算的数据 {{}}, 如果和data内数据重复,则以数据优先
        comp:function (){
            // getter
            get: function () {
                return this.firstName + ' ' + this.lastName
                },
            // setter 通过 app.fullName = 'args' 的方式来传参并配置相关
            set: function (newValue) {
                var names = newValue.split(' ')
                this.firstName = names[0]
                this.lastName = names[names.length - 1]
            }
        },
    },
    methods:{   // 方法函数
        func:function(){

        },
        ajaxfunc:function(){
            $.get(url,function(resp){
                app.change = resp       // ajax请求的响应结果应该通过这种方式来渲染,渲染结果是页面中使用该数据的元素会刷新,计算属性和watch的元素也会刷新.
            })
        }
    },
    watch:{     // 数据监听,可以通过各种绑定等方式来监听相关数据,从而根据变动来启用相关代码,官方建议,有些时候对许多数值的监听可能会触发几乎相同的watch方法,这时候可以使用computed属性计算
        change:function(newchange,oldchange){   // 两个参数,新数据 和 旧数据

        }
    },
    filters:{   // 过滤器

    }
})

==================================================================
vue 无法监听并刷新vue对象额外添加的属性(也不能检测已存在属性的删除), 也就是, 在 data 属性之内不存在的数据,如果在methods等属性方法或其他地方通过 vue.attr = "attr"
的方式添加数据的话,vue无法监听并响应, vue只会监听 data内已经存在的数据的变化.
对于已经创建的实例，Vue 不能动态添加根级别的响应式属性
Vue.set(app.testobj, 'arg2', 'attr')        通过类方法set可以对data内的属性进行添加根数据
app.$set(app.testobj, 'arg2', 'attr')       或是通过实例方法$set 来添加嵌套的属性数据

如果需要对当前vue对象的data属性添加多条数据, 官方不让用 Object.assign(app.testobj, object1,object2, ...)的方式,而是:
app.testobj = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})      注意:此处的 Object.assign() 的target参数为空的对象,而不是要更新的属性!!!
------------------------------------------------------------------
Object.assign(target, object1,object2, ...)
Object.assign()方法用于合并对象,相当于Python 字典的 update方法,两者都会更新当前字典,Object.assign 会更新 target ,并且会将更新后的数据返回
例如: newobj = Object.assign({A:1,B:2},{C:3,D:4},{dict:123},{obj:234})      newobj : {{A:1,B:2,C:3,D:4,dict:123,obj:234}

==================================================================
计算属性和方法的区别:
计算属性和方法都能实现模板渲染,但是方法是实时刷新的,每次使用都会重新计算,但是计算属性不会,只有计算属性使用的data数据发生变化的时候,
计算属性才会重新计算,不然的话,就会直接返回上次计算的结果(计算属性会缓存结果).
所以,如果需要的数据是需要实时更新的,那么就使用方法,否则使用计算属性.


==================================================================
在methods里面定义的ajax请求,如果成功响应的数据需要渲染给页面,这个时候不能通过this.change来操作,
而是应该通过 app.change 来操作

==================================================================

==================================================================
表单：
input v-model='data'

v-model
会绑定并监听input的value值的变化，并更新到data 下的相应数据
==================================================================
<template v-if="show == 'display'">
<div key='ifkey'></div>
<label>标题</label>
<input ... >
</template>

<template v-else-if="">
<div key='elifkey'></div>
<label>标题</label>
<input ... >
</template>

<template v-else>
<div key='elsekey'></div>
<label>标题</label>
<input ... >
</template>

v-if  
v-if 可以控制元素是否显示显示,与v-model可以配合使用做输入控制的动画,还可以通过别的方法控制data的数据来控制元素响应

v-if 具有替换重复代码的作用, 如上,如果template元素(或者div等)内存在相同的元素,此处如label元素和input元素,会在if判断不同结果的时候
被复用, 不会重新渲染, 比如 input ,判断切换之前 输入 值 123 ,切换后其value值仍将保持为123 ,因为没有被重新渲染,但是可以通过添加key属性
来声明此元素不同,需要重新渲染, 此处如 div ,key不同,那么切换时会重新 载入 渲染.

------------------------------------------------------------------
<div v-show="bool">YES SHOW {{bool}}</div>
v-show 与 v-if 差不多,用于控制元素是否显示,不同的是,v-show是通过CSS的display属性来控制显示隐藏,在页面开始载入并渲染时就将元素创建;
v-if 则是通过销毁与创建的方式控制元素显示隐藏,如果判断不显示,那么该元素在页面加载时不会创建,直到条件满足,才会即时创建.

==================================================================
<ul>
    <li v-for="item in items" :key="item.id">{{item}}</li>
</ul>
v-for 基本用法,items为data内的可迭代源数据, ***** 并且官方建议,不推荐通过混合使用 v-for v-if 来对列表进行过滤再渲染,而是推荐通过
计算属性的方式,先过滤数据,再遍历获取. v-for="item in computedItems"

遍历对象(字典) 源数据如:   objs:{key1:value1,key2:value2}
v-for="value in objs"               遍历获取value值
v-for="(value,key) in objs"         遍历获取value 和 key 值
v-for="(value,key,index) in objs"   遍历获取value, key, index索引值 
*   用法中 value key index 等参数名随意,但是尽量规范
*   :key 是官方推荐加上的, 现在还没体会到它的高效, 但是尽量提供

v-for 也可以实现重复创建连续整数的元素,类似于 Python for i in range(10)     * 不同的是,v-for 是从 1 开始 到 10 , Python是 0 ~ 9
<div>
  <span v-for="n in 10">{{ n }} </span>         会创建十个span,内容为 1 2 3 4 5 6 7 8 9 10
</div>

v-for 也可以重复创建组件,如下
<template v-for="item in items">
<div>{{item}}</div>
<span>标题</span>
</template>

==================================================================

<div v-bind:class="{ 类明1: 判断条件1,类明2: 判断条件2 }"></div>
v-bind 指令用于绑定并监听元素属性,包括原有属性(id,class,src,style 等等 )或者自定义属性

v-bind:class="cls" 还可以通过传入数据的方式绑定class,例如此处结果为: class="show"
''
data:{
    cls:{
        show:true,
        hide:false,
    }
}
''
或者通过计算属性的方式,官方说这种方式很牛逼
v-bind:class="cls", 此处结果为: class="show hide"
''
computed:{
    cls:function (){
        return {
            show:true,
            hide:true,
        }
    }
}
''
v-bind:class="[judge ? give1:'' ,give2 ,give3]" 通过可容纳表达式的数组传递数据, 此处结果为: class="class2 class3"
''
data:{
    judge:false,
    give1:'class1',
    give2:'class2',
    give3:'class3',
}
''
官方文档提了醒,如果将这种语法放在自定义组件上的话,那么组建内部的所有元素都会共享这个结果,都有这个类属性

v-bind:style="{color:c1, width:w1, height:h1}" 或者 v-bind:style="style"
''
data:{
    c1:'1f2c3f' 或者 'red',
    w1:'120px',
    h1:'150px',
    style:{
        c1:'1f2c3f' 或者 'red',
        w1:'120px',
        h1:'150px',
    }
}
''
==================================================================


<div v-on:click="func"></div>
v-on 指令用于绑定并监听事件

**v-on: 可以缩写成 @ (v-on:click ==> @click) v-bind: 可以缩写成 : (v-bind:href ==> :href)

v-on v-bind 也可以绑定属性,而不仅仅绑定属性值
<div v-on:[active]="func"></div>
<div v-bind:[attr]="data"></div>
如上:总的来说,两个绑定指令可以通过监听data数据或者method方法来分别更新哪种属性为哪种值,注意:[]内的应该是逻辑表达式

修饰符 . (英文的句号)  详细参阅:https://www.cnblogs.com/xiaotanke/p/7160962.html
<form v-on:submit.prevent="onSubmit"></form>
会在发生submit提交的时候进行 preventDefault() 的操作,然后执行 onSubmit 的方法

v-on="也可是表达式"
<div v-on:click="num += 1"></div>
<span>{{num}}</span>

触发方法并传递参数
methods:{
    method:function(arg){
        console.log(arg)
    }
}
<div v-on:click="method('点击方法传参')"></div>

传入事件对象,通过$event 来传递事件作为函数参数
<input type="submit" v-on:click="method(arg1,$event)">
methods:{
    method:function(arg,event){
        if (arg) alert('if 判断语句也可以这么简写')
        event.preventDefault()
        console.log(arg)
    }
}