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