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 声明式的框架
数据双向绑定 数据驱动视图 视图驱动数据
绑定html模板的方法
- el:’#app’
- .$mount(‘#app’)
- 直接写template属性
let vm = new Vue({
// el: '#app',
// template: '<h1>珠峰培训</h1>',
data: {
name: '珠峰',
}
}).$mount('#app');
指令
在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
let a = {a:12,b:13,c:14};
vm.obj = a;
方法1：只是为了触发视图更新，不会给新增元素加上get和set;方法四可以
页面不会显示undefined 页面默认把undefined处理成空字符串
数组
- 数组中只有那些能引起数组变异的方法才能触发视图更新
- 直接通过数组的索引去修改，不会触发视图更新
vm.ary[0] = 10;//不会触发视图更新
vm.ary.splice(0,1,10);//可以触发视图更新
let a = vm.ary.slice();
a[0] = 10;
vm.ary = a;
更新视图：
- 1.处理对象的四种方式在这都可以使用
- 5.数组本身还可以有变异方法可以用
v-for
- 循环这个数组
- 循环产生对应的标签
- val是自定义的变量
<li v-for="val in ary">{{val}}</li>
<li v-for="(val,i) in ary">{{val}}{{`索引是：${i}`}}</li>
事件
<button v-on:click='fn'>点我</button>
简写:<button @click='fn'>简写</button>
let vm = new Vue({
el: '#app',
data: {
// fn(){alert('小仙女');}
},
methods: {
fn(){
alert('v-on');
},
fn2(){
alert('@');
}
}
})