1. 初始化vue

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

<divid="app"><!-- 在页面中，通过插值表达式可以直接使用Vue管理的数据。

注意：Vue管理的数据是响应式的，所谓响应式，指的是，当前数据发生改变是，会重新渲染页面。 --><h2>{{name}}</h2><h2>{{age}}</h2></div>

第二步：创建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的常用指令

<divid="app"><!-- 在页面中直接显示data里面的数据，可以通过插值表达式 --><h2>{{name}}</h2><!-- 如何让html元素的属性绑定Vue实例管理的数据，通过v-bind:指令。 --><!-- 如何让html元素的事件绑定Vue实例管理的方法，通过v-on:指令。 --><!-- 注意：这里在调用方法时，不能加上()，此时它才会将事件对象作为方法的第一个参数，传给该方法。 --><inputtype="text"v-bind:value="name"v-on:input="setName"><hr><h2>{{address}}</h2><!-- v-bind:的简写是: --><!-- v-on:的简写是@ --><!-- 注意：如果方法的逻辑处理比较简单，可以直接将代码写在行内；这里的$event返回的就是事件对象。 --><inputtype="text":value="address"@input="address=$event.target.value"><hr><h2>{{hobby}}</h2><!-- v-model指令，用于实现对数据的双向绑定，所谓双向绑定，

指的是：数据发生变化重新渲染页面，页面数据发生变化更新回数据。 --><inputtype="text"v-model="hobby"></div>

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

4.条件渲染和列表渲染

<divid="app"><!-- 按钮注册点击事件，因为处理的逻辑比较简单，直接将代码写在行内 --><buttonv-on:click="isShow=!isShow">显示/隐藏</button><!-- v-if指令用于条件渲染，表达式返回true，显示元素；否则不显示元素。 --><divclass="box"v-if="isShow">v-if</div><!-- v-show指令也是用于条件渲染，表达式返回true，显示元素；否则不显示元素。 --><divclass="box"v-show="isShow">v-show</div><!-- 注意：v-if的表达式返回false，会生成对应的元素。

v-show的表达式返回true，元素正常生成，通过display样式去控制显示和隐藏。

所以，如果元素需要反复切换显示和隐藏使用v-show；如果只是页面加载是判断是否显示使用v-if。 --><hr><!-- v-if，v-else-if，v-else可以组成多重判断结构。注意：中间不能有断层。 --><h2v-if="score>=90">优秀</h2><h2v-else-if="score>=80">良好</h2><h2v-else-if="score>=70">中等</h2><h2v-else-if="score>=60">合格</h2><h2v-else>差</h2><hr><ul><!-- v-for指令，用于循环列表。

语法：v-for="(每一项,索引) in 数组"，渲染列表时，为了提高渲染性能，

通常都要绑定一个key。key一定要是唯一值。 --><liv-for="(item,index) in goodses"v-bind:key="index">{{item.id}}---{{item.name}}---{{item.price}}<buttonv-on:click="delGoods(index)">删除</button></li></ul></div>

newVue({el:'#app',data:{// 该属性，用于表示是否显示isShow:true,// 定义一个成绩score:88,// 定义一个数组goodses:[{id:1001,name:'乐事薯片',price:'8元'},{id:1002,name:'百事可乐',price:'3元'},{id:1003,name:'元祖月饼',price:'10元'},{id:1004,name:'德芙巧克力',price:'29元'}]},methods:{// 删除商品的方法，将商品的下标通过方法传进来delGoods(index){if(confirm('是否确定删除')){// 再根据数组的下标删除对应的数据this.goodses.splice(index,1)}}},})