Vue（一）

一、初始Vue

1. 初始Vue

第一步：给Vue准备一个容器：

{{name}}

{{age}}

第二步：创建Vue实例：

// 不允许 vue-devtools 检查代码Vue.config.devtools=false// vue 在启动时不显示生产提示Vue.config.productionTip=false// 初始化一个Vue实例，在创建Vue实例时，需要给Vue传递一个配置选项，该配置选项是一个对象letvm=newVue({// el选项，指定当前Vue实例，操作的容器el:'#app',// data选项，用于存储当前Vue实例管理的数据// data选项里面管理的数据，会被添加到Vue实例身上，这里就是vm身上。// data选项里面管理的数据，其实会被Vue实例身上的_data进行代理；并将代理过后的数据再添加到Vue实例身上，方便直接调用。data:{name:'王瑞',age:20}})

2. Vue的响应式原理

// 代理对象的基本理解：/* let data = {

    name:'兵哥',

    age:18

}

// 因为对象是引用类型，在传递时，传的是地址

let _data = data;

// 操作_data，真正改变的是data，此时就可以将_data当做是data的代理对象。

_data.name = '王瑞'

_data.age = 30

console.log(data); */console.log('-------------------------------');// 如何给对象添加成员letobj={}// 方式1：对象名.属性的方式，给对象添加成员obj.name='吴亦凡'// 方式2：对象名['属性名']的方式，给对象添加成员obj['age']=30// 方式3：通过Object对象的defineProperty方法，给指定的对象添加指定的属性// 这种方式，给对象添加成员，尽管繁琐，但是可以配置更多的功能。// 默认添加的属性是不允许删除的，如果要允许删除，就需要添加configurable配置。// 默认添加的属性是不允许枚举的，所谓枚举指的就是遍历。Object.defineProperty(obj,'sex',{// 属性值value:'男',// 属性允许被删除configurable:true,// 属性允许被枚举enumerable:true})// 遍历出对象的所有属性名称for(letkeyinobj){console.log(key);}// delete关键字，用于删除对象身上的指定成员deleteobj.namedeleteobj.sexconsole.log(obj);console.log('-------------------------------');// 那么Vue的响应式原理，就用到了Object.defineProperty,给代理对象添加属性。// 01.我们先定义一份原始数据，也就是被代理对象。letdata={name:'兵哥',age:18}// 02.再定义一个空的代理对象let_data={}// 03.使用Object.defineProperty给代理对象添加属性Object.defineProperty(_data,'name',{// get方法，用于返回属性的值，当使用到_data对象里面的name属性获取值时，就会执行get方法get(){returndata.name},// set方法，用于设置属性的值，当使用到_data对象里面的name属性并给它赋值时，就会调用set方法set(val){data.name=val// 当监听到数据发生变化时，重新渲染DOMreaderDOM()}})Object.defineProperty(_data,'age',{get(){returndata.age},set(val){data.age=valreaderDOM()}})// 渲染DOM更新的方法functionreaderDOM(){document.getElementById("name").innerHTML=data.namedocument.getElementById("age").innerHTML=data.age}readerDOM()

3. Vue的常用指令

{{name}}

---

{{address}}

---

{{hobby}}

// 实例化一个Vue对象letvm=newVue({el:'#app',// data选项，可以是一个对象，也可以是一个方法，由方法返回一对象。data(){return{name:'兵哥',address:'南京',hobby:'敲代码'}},// methods选项，里面定义的是Vue管理的方法methods:{// 该方法更新name属性值// 注意：在调用方式时，如果没有传递参数，那么事件方法会默认传一个事件对象参数。setName(e){this.name=e.target.value},},})

4. 条件渲染和列表渲染

显示/隐藏v-if