标签:class 方式 空字符串 方法 none 添加 one 直接 temp
vue全家桶:vue-router vuex vue-cli
mvc:model view controller
数据双向绑定
mvvm:model view view-model
两种设计理念来规划网站:
优雅降级 (graceful degradation) : 一开始就构建站点的完整功能,然后针对浏览器测试和修复
渐进增强 (progressive enhancement) : 一开始只构建站点的最少特性,然后不断的针对浏览器追加功能
兼容不了IE8,原因:Object.defineProperty()
let obj = {}; let temp = {}; Object.defineProperty(obj,‘name‘,{ // value: ‘小仙女‘,//给对应属性的 属性值 // writable:true, //该属性是否可以改写,true代表可以改写 默认:false // enumberable:true, //该属性是否可以枚举,true代表可以枚举 默认:false get(){ // console.log(123);//当外界使用obj.name时就会触发该函数 return temp.name; }, //上边是简写ES6的方式 正常get:function get(){} set(val){ //当外界给name设置值的时候才会触发 // console.log(val); // obj.name = val; temp.name = val; } }) //参数1:要操作的对象 //参数2:要操作对象的属性名 //参数3:是个对象
数据双向绑定 数据驱动视图 视图驱动数据
在vue中指的是元素以v-开头的
行内属性
指令后面跟的都是变量,这里的变量是用引号包起来的
v-text
相当于小胡子语法<h2 v-text="name"></h2>
v-html
把变量对应的字符串渲染成DOM结构v-once
只渲染一次v-pre
提升编译速度 性能优化时用的指令 操作没有指令的html元素v-cloak
解决网速慢时显示小胡子的问题;需要配合css使用
视图驱动数据v-model
用input标签和textarea标签上
对于vue中的数据来说,改变数据 触发视图更新 看该数据有没有
get
和set
只有那些有get和set的属性,并且这些属性需要用到页面上,才能触发视图更新
- 1.没有get和set方法:更新视图处理办法:找一个无关变量,并且该无关变量在视图中使用(可以用display:none隐藏),更新无关变量让其重新渲染视图
- 2.直接新创建一个对象,用整个创建的对象整个替代原对象(不建议)
- 3.把需要的属性都直接写在data中
- 4.使用vue自带的方法:
vm.$set(vm.obj,‘c‘,12);
;参数1:要添加属性所属的对象;参数2:要添加的属性名;参数3:属性值;这种方法会把value中所有的属性 不管有多少层;都会加上get和set
方法1:只是为了触发视图更新,不会给新增元素加上get和set;方法四可以
页面不会显示undefined 页面默认把undefined处理成空字符串
更新视图:
<button v-on:click=‘fn‘>点我</button>
简写:<button @click=‘fn‘>简写</button>
标签:class 方式 空字符串 方法 none 添加 one 直接 temp
原文地址:https://www.cnblogs.com/Lia-633/p/9916973.html