Vue（1）

第一天

初识Vue

1、 引入Vue  

 

[if !supportLists]2、 [endif]准备一个容器

姓名：{{name}}

年龄：{{age}}

修改姓名

[if !supportLists]3、 [endif]创建一个Vue对象

let vm=new Vue({

el:”#app”, 选定Vue操作的DOM容器

      data:{ 定义当前Vue管理的数据

name:”张三”,

age:20

},

methods:{ 定义当前Vue管理的方法

updateName(){

this.name=”李四”

},

updataAge(){

this.age=33}

}

})

Vue的响应式原理

代理对象：

定义一个源对象obj1，然后let obj2=obj1，obj2就是obj1的代理对象，如果给代理对象进行修改重新赋值，那么源对象也会变

// 定义一份数据

let myData={

name:'lili',

age:23}

将一个数据传递给Vue的data选项，它背后做了两件事情

1、设置Vue实例的_data属性，作为当前数据的代理对象（响应式核心

2、将_data里代理的所有数据，再添加到当前Vue实例身上（为了Vue实例方便调用数据

let vm=new Vue({

data:myData

})

let obj3={}

方式一

obj3.name="张震"

方式二

obj3["age"]=40

方式三

通过object.defineProperty方法给对象添加属性，默认不可被枚举，不可被删除，对对象属性的保护更严格

Object.defineProperty(obj3,"sex",{

value:'男',

enumerable:true,允许枚举遍历

configurable:true允许被删除

})

console.log(obj3);

for (const key in obj3) {

   console.log(key);

}

通过delete可以删除对象身上的属性

delete obj3.name

delete obj3.sex

console.log(obj3);

Vue响应式原理

 1、定义一个源对象

let data={

    name:'happy',

    age:26

}

在页面中显示姓名和年龄

document.querySelector('#name').innerHTML=data.name

document.querySelector('#age').innerHTML=data.age

 2、定义一个代理对象（_data去代理data

let _data={}

3、使用object.defineProperty给_data添加属性

Object.defineProperty( _data,'name',{

get方法返回属性的值（当我们调用name属性获取值时，会调用get方法

    get(){

        return data.name

},

set方法用于设置属性的值（当我们调用name属性设置值时，会调用set方法

        set(val){

         data.name=val

当代理对象监听到数据变化时，会重新渲染页面

      document.querySelector('#name').innerHTML=data.name

    }

})

使用object.defineProperty给_data添加属性

Object.defineProperty(_data,'age',{

get方法返回属性的值（当我们调用name属性获取值时，会调用get方法

      get(){

        return data.age

     },

set方法用于设置属性的值（当我们调用name属性设置值时，会调用set方法

    set(val){

      data.age=val

当代理对象监听到数据变化时，会重新渲染页面

      document.querySelector('#age').innerHTML=data.age

       }

})

Vue的常用指令

1、 v-bind：用于绑定属性，通过v-bind绑定过的属性，可以直接写插值表达式获得属性值

2、v-on：用于绑定事件，通过v-on绑定的事件可以指定Vue实例定义的方法

{{name}}

methods: {

updataName(e) {

获取文本框里面的内容，更新数据

this.name = e.target.value

}

}

3、v-bind:可以用：简写    v-on：可以用@简写

如果事件代码不是很多，可以写在行内，行内不能写this，$event指的是事件对象

{{age}}

 4、通过v-model指令，可以实现对数据的双向绑定，v-model指令是对v-bind：value和v-on：input的简写

            {{job}}

Vue的条件渲染和列表渲染

v-if   v-else-if  v-else-if  v-else

v-if和v-show如何选择：

如果页面需要反复切换显示和隐藏，用v-show。

如果页面中有很多模块需要隐藏，用户可能只对其中一两个模块感兴趣，用v-if，

所有的模块首屏加载时，全部不渲染，当用户选择指定模块后只渲染指定模块。

{{index}}-{{item.name}}-{{item.price}}

 

 

Vue-轮播图