1 <div id="app"> 2 3 </div> 4 5 var app = new Vue({ 6 el:"#app", // 绑定的元素 7 data:{ // 所有数据, 通过模板语法 {{ }} 来渲染元素 8 change: '会发生变化的数据', 9 bool:true, 10 testobj:{ 11 arg1:"arg", 12 } 13 }, 14 computed:{ // 属性计算, 可以通过模板语法来渲染需要复杂逻辑计算的数据 {{}}, 如果和data内数据重复,则以数据优先 15 comp:function (){ 16 // getter 17 get: function () { 18 return this.firstName + ' ' + this.lastName 19 }, 20 // setter 通过 app.fullName = 'args' 的方式来传参并配置相关 21 set: function (newValue) { 22 var names = newValue.split(' ') 23 this.firstName = names[0] 24 this.lastName = names[names.length - 1] 25 } 26 }, 27 }, 28 methods:{ // 方法函数 29 func:function(){ 30 31 }, 32 ajaxfunc:function(){ 33 $.get(url,function(resp){ 34 app.change = resp // ajax请求的响应结果应该通过这种方式来渲染,渲染结果是页面中使用该数据的元素会刷新,计算属性和watch的元素也会刷新. 35 }) 36 } 37 }, 38 watch:{ // 数据监听,可以通过各种绑定等方式来监听相关数据,从而根据变动来启用相关代码,官方建议,有些时候对许多数值的监听可能会触发几乎相同的watch方法,这时候可以使用computed属性计算 39 change:function(newchange,oldchange){ // 两个参数,新数据 和 旧数据 40 41 } 42 }, 43 filters:{ // 过滤器 44 45 } 46 }) 47 48 ================================================================== 49 vue 无法监听并刷新vue对象额外添加的属性(也不能检测已存在属性的删除), 也就是, 在 data 属性之内不存在的数据,如果在methods等属性方法或其他地方通过 vue.attr = "attr" 50 的方式添加数据的话,vue无法监听并响应, vue只会监听 data内已经存在的数据的变化. 51 对于已经创建的实例，Vue 不能动态添加根级别的响应式属性 52 Vue.set(app.testobj, 'arg2', 'attr') 通过类方法set可以对data内的属性进行添加根数据 53 app.$set(app.testobj, 'arg2', 'attr') 或是通过实例方法$set 来添加嵌套的属性数据 54 55 如果需要对当前vue对象的data属性添加多条数据, 官方不让用 Object.assign(app.testobj, object1,object2, ...)的方式,而是: 56 app.testobj = Object.assign({}, vm.userProfile, { 57 age: 27, 58 favoriteColor: 'Vue Green' 59 }) 注意:此处的 Object.assign() 的target参数为空的对象,而不是要更新的属性!!! 60 ------------------------------------------------------------------ 61 Object.assign(target, object1,object2, ...) 62 Object.assign()方法用于合并对象,相当于Python 字典的 update方法,两者都会更新当前字典,Object.assign 会更新 target ,并且会将更新后的数据返回 63 例如: 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} 64 65 ================================================================== 66 计算属性和方法的区别: 67 计算属性和方法都能实现模板渲染,但是方法是实时刷新的,每次使用都会重新计算,但是计算属性不会,只有计算属性使用的data数据发生变化的时候, 68 计算属性才会重新计算,不然的话,就会直接返回上次计算的结果(计算属性会缓存结果). 69 所以,如果需要的数据是需要实时更新的,那么就使用方法,否则使用计算属性. 70 71 72 ================================================================== 73 在methods里面定义的ajax请求,如果成功响应的数据需要渲染给页面,这个时候不能通过this.change来操作, 74 而是应该通过 app.change 来操作 75 76 ================================================================== 77 78 ================================================================== 79 表单： 80 input v-model='data' 81 82 v-model 83 会绑定并监听input的value值的变化，并更新到data 下的相应数据 84 ================================================================== 85 <template v-if="show == 'display'"> 86 <div key='ifkey'></div> 87 <label>标题</label> 88 <input ... > 89 </template> 90 91 <template v-else-if=""> 92 <div key='elifkey'></div> 93 <label>标题</label> 94 <input ... > 95 </template> 96 97 <template v-else> 98 <div key='elsekey'></div> 99 <label>标题</label> 100 <input ... > 101 </template> 102 103 v-if 104 v-if 可以控制元素是否显示显示,与v-model可以配合使用做输入控制的动画,还可以通过别的方法控制data的数据来控制元素响应 105 106 v-if 具有替换重复代码的作用, 如上,如果template元素(或者div等)内存在相同的元素,此处如label元素和input元素,会在if判断不同结果的时候 107 被复用, 不会重新渲染, 比如 input ,判断切换之前 输入 值 123 ,切换后其value值仍将保持为123 ,因为没有被重新渲染,但是可以通过添加key属性 108 来声明此元素不同,需要重新渲染, 此处如 div ,key不同,那么切换时会重新 载入 渲染. 109 110 ------------------------------------------------------------------ 111 <div v-show="bool">YES SHOW {{bool}}</div> 112 v-show 与 v-if 差不多,用于控制元素是否显示,不同的是,v-show是通过CSS的display属性来控制显示隐藏,在页面开始载入并渲染时就将元素创建; 113 v-if 则是通过销毁与创建的方式控制元素显示隐藏,如果判断不显示,那么该元素在页面加载时不会创建,直到条件满足,才会即时创建. 114 115 ================================================================== 116 <ul> 117 <li v-for="item in items" :key="item.id">{{item}}</li> 118 </ul> 119 v-for 基本用法,items为data内的可迭代源数据, ***** 并且官方建议,不推荐通过混合使用 v-for v-if 来对列表进行过滤再渲染,而是推荐通过 120 计算属性的方式,先过滤数据,再遍历获取. v-for="item in computedItems" 121 122 遍历对象(字典) 源数据如: objs:{key1:value1,key2:value2} 123 v-for="value in objs" 遍历获取value值 124 v-for="(value,key) in objs" 遍历获取value 和 key 值 125 v-for="(value,key,index) in objs" 遍历获取value, key, index索引值 126 * 用法中 value key index 等参数名随意,但是尽量规范 127 * :key 是官方推荐加上的, 现在还没体会到它的高效, 但是尽量提供 128 129 v-for 也可以实现重复创建连续整数的元素,类似于 Python for i in range(10) * 不同的是,v-for 是从 1 开始 到 10 , Python是 0 ~ 9 130 <div> 131 <span v-for="n in 10">{{ n }} </span> 会创建十个span,内容为 1 2 3 4 5 6 7 8 9 10 132 </div> 133 134 v-for 也可以重复创建组件,如下 135 <template v-for="item in items"> 136 <div>{{item}}</div> 137 <span>标题</span> 138 </template> 139 140 ================================================================== 141 142 <div v-bind:class="{ 类明1: 判断条件1,类明2: 判断条件2 }"></div> 143 v-bind 指令用于绑定并监听元素属性,包括原有属性(id,class,src,style 等等 )或者自定义属性 144 145 v-bind:class="cls" 还可以通过传入数据的方式绑定class,例如此处结果为: class="show" 146 '' 147 data:{ 148 cls:{ 149 show:true, 150 hide:false, 151 } 152 } 153 '' 154 或者通过计算属性的方式,官方说这种方式很牛逼 155 v-bind:class="cls", 此处结果为: class="show hide" 156 '' 157 computed:{ 158 cls:function (){ 159 return { 160 show:true, 161 hide:true, 162 } 163 } 164 } 165 '' 166 v-bind:class="[judge ? give1:'' ,give2 ,give3]" 通过可容纳表达式的数组传递数据, 此处结果为: class="class2 class3" 167 '' 168 data:{ 169 judge:false, 170 give1:'class1', 171 give2:'class2', 172 give3:'class3', 173 } 174 '' 175 官方文档提了醒,如果将这种语法放在自定义组件上的话,那么组建内部的所有元素都会共享这个结果,都有这个类属性 176 177 v-bind:style="{color:c1, w1, height:h1}" 或者 v-bind:style="style" 178 '' 179 data:{ 180 c1:'1f2c3f' 或者 'red', 181 w1:'120px', 182 h1:'150px', 183 style:{ 184 c1:'1f2c3f' 或者 'red', 185 w1:'120px', 186 h1:'150px', 187 } 188 } 189 '' 190 ================================================================== 191 192 193 <div v-on:click="func"></div> 194 v-on 指令用于绑定并监听事件 195 196 **v-on: 可以缩写成 @ (v-on:click ==> @click) v-bind: 可以缩写成 : (v-bind:href ==> :href) 197 198 v-on v-bind 也可以绑定属性,而不仅仅绑定属性值 199 <div v-on:[active]="func"></div> 200 <div v-bind:[attr]="data"></div> 201 如上:总的来说,两个绑定指令可以通过监听data数据或者method方法来分别更新哪种属性为哪种值,注意:[]内的应该是逻辑表达式 202 203 修饰符 . (英文的句号) 详细参阅:https://www.cnblogs.com/xiaotanke/p/7160962.html 204 <form v-on:submit.prevent="onSubmit"></form> 205 会在发生submit提交的时候进行 preventDefault() 的操作,然后执行 onSubmit 的方法 206 207 v-on="也可是表达式" 208 <div v-on:click="num += 1"></div> 209 <span>{{num}}</span> 210 211 触发方法并传递参数 212 methods:{ 213 method:function(arg){ 214 console.log(arg) 215 } 216 } 217 <div v-on:click="method('点击方法传参')"></div> 218 219 传入事件对象,通过$event 来传递事件作为函数参数 220 <input type="submit" v-on:click="method(arg1,$event)"> 221 methods:{ 222 method:function(arg,event){ 223 if (arg) alert('if 判断语句也可以这么简写') 224 event.preventDefault() 225 console.log(arg) 226 } 227 }