初识vue

Posted 2021-01-18 lia-633

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(‘@‘);

}

}

})