一、初始Vue

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)}}},})

二、生命周期

1. 小练习

<divid="app"><button@click="showEdit=true">添加学生</button><!-- 展示学生信息的表格 --><table><thead><tr><th>学号</th><th>姓名</th><th>年龄</th><th>性别</th><th>操作</th></tr></thead><tbody><trv-for="(item,index) in students":key="index"><td>{{item.no}}</td><td>{{item.name}}</td><td>{{item.age}}</td><td>{{item.sex}}</td><td><button@click="getOne(index)">修改</button><button@click="del(index)">删除</button></td></tr></tbody></table><!-- 编辑学生信息的窗口 --><divclass="edit"v-show="showEdit"><!-- 关闭按钮 --><divclass="close"@click="close">X</div><divclass="item"><label>学号：</label><inputtype="text"v-model="no"></div><divclass="item"><label>姓名：</label><inputtype="text"v-model="name"></div><divclass="item"><label>年龄：</label><inputtype="text"v-model="age"></div><divclass="item"><label>性别：</label><inputtype="text"v-model="sex"></div><divclass="item"><button@click="add"v-if="updateIndex===-1">添加</button><button@click="update"v-else>修改</button><button@click="clear">取消</button></div></div></div>

newVue({// 指定该Vue实例工作的容器el:'#app',// 定义当前Vue实例管理的数据data:{// 定义一个学生数组students:[{no:'1001',name:'张三',age:20,sex:'男'},{no:'1002',name:'李四',age:22,sex:'女'},{no:'1003',name:'王五',age:24,sex:'男'},{no:'1004',name:'赵六',age:18,sex:'女'}],// 是否显示编辑窗口showEdit:false,// 定义一个学生对象的四个属性no:'',name:'',age:'',sex:'',// 定义一个下标，用于表示修改的学生在数组中的位置updateIndex:-1},// 定义当前Vue实例管理的方法methods:{// 添加方法add(){// 创建一个学生对象letstu={no:this.no,name:this.name,age:this.age,sex:this.sex}// 将学生对象添加到学生数组中this.students.push(stu)// 调用清空数据的方法this.clear()},// 清空表单数据的方法clear(){this.no=''this.name=''this.age=''this.sex=''},// 关闭编辑窗口的方法close(){// 隐藏编辑窗口this.showEdit=false// 编辑窗口关闭时，重新将修改索引改成-1this.updateIndex=-1// 清空表单数据this.clear()},// 删除方法del(index){if(confirm('确定删除吗？')){this.students.splice(index,1)}},// 根据下标从数组中获取对应的学生信息getOne(index){// 获取学生对象在数组中对应的下标this.updateIndex=index// 显示编辑窗口this.showEdit=true// 获取学生letstu=this.students[index]// 在编辑窗口中显示该学生信息this.no=stu.nothis.name=stu.namethis.age=stu.agethis.sex=stu.sex},// 修改方法update(){// 修改数组中，指定位置学生的信息letstu=this.students[this.updateIndex]stu.no=this.nostu.name=this.namestu.age=this.agestu.sex=this.sex}},})

2. Vue的生命周期

<divid="app"><button@click="name+='*';age+=1">修改数据</button><button@click="over">销毁Vue实例</button><h2>{{name}}</h2><h2>{{age}}</h2></div>

letvm=newVue({// el选项可以通过$mount代替// el:'#app',// 如果有template选项，Vue会将template作为模板进行渲染，并将渲染之后的内容挂载到指定的容器中// 如果没有template选项，Vue就会将el里面的所有内容当做模板来渲染，并将渲染之后的内容挂载到指定的容器中/* template:`

    <div>

        <p>{{name}}</p>

            <p>{{age}}</p>

        </div>`, */data:{name:'张三',age:20},methods:{over(){// $destroy()方法，用于销毁当前Vue实例// 注意：销毁当前Vue实例，不是删除这个对象，而且这个对象再也不具备响应式页面的能力了。this.$destroy()}},// 数据初始化之前beforeCreate(){console.log('beforeCreate:',this.name,this.age);},// 数据初始化完成created(){console.log('created:',this.name,this.age);},// 页面挂载之前，此时页面是模板beforeMount(){// 通过$el返回Vue实例使用的根 DOM 元素console.log(this.$el);console.log('beforeMount');},// 页面挂载完成，此时页面已经渲染完成mounted(){console.log(this.$el);console.log('mounted');},// 数据更新之前beforeUpdate(){// 在这个阶段，数据已经发生了变化，但是页面还没有重新渲染console.log('beforeUpdate',this.name,this.age);},// 数据更新完成updated(){// 在这个阶段，页面会重新渲染console.log('updated',this.name,this.age);},// 销毁之前beforeDestroy(){// 我们通常会在这个生命周期函数中做一些收尾的工作// 比如：停掉开启的定时器，初始化一些数据等等。console.log('beforeDestroy');},// 销毁完成destroyed(){console.log('destroyed');console.log(this);},})setTimeout(()=>{// 通过$mount方法，给vm指定一个容器// 这种写法的好处是，可以控制何时挂载页面vm.$mount('#app')},1000);

3. 轮播图

<divid="app"><!-- <button @click="destroy">销毁Vue</button> --><img:src="imgs[index]"><ul><liv-for="(item,i) in imgs":class="i===index?'active':''"></li></ul></div>

newVue({el:'#app',data:{// 定义轮播图图片数组imgs:["http://p1.music.126.net/lrd-pX9Azcv2mP8-YnQ3JA==/109951166362109457.jpg?imageView&quality=89","http://p1.music.126.net/RXFG298sUeqJlpIGoZvB0Q==/109951166362198241.jpg?imageView&quality=89","http://p1.music.126.net/GHcB-WR3T3UhEO5msHXOXg==/109951166362228128.jpg?imageView&quality=89","http://p1.music.126.net/Wd08w_8bojR4DWyK7EEkeQ==/109951166362223634.jpg?imageView&quality=89","http://p1.music.126.net/y3OQm6kP7nPqRcCBkPRSdQ==/109951166362444141.jpg?imageView&quality=89"],// 定义索引index:0,// 定义一个定时器变量timer:null},methods:{// 销毁Vue实例的方法destroy(){// 当前Vue实例一旦销毁，就不再具体响应页面的能力了this.$destroy()}},// 在这个阶段，页面已经好了mounted(){// 开启一个定时器this.timer=setInterval(()=>{if(++this.index>=this.imgs.length)this.index=0},3000);},// 在这个阶段，Vue的实例即将销毁beforeDestroy(){// 清除定时器clearInterval(this.timer)},})

三、计算属性&侦听器&过滤器

1. 绑定样式

<divid="app"><button@click="bg_b=true">显示蓝色背景</button><button@click="c_w=true">显示白色字体</button><!-- :class可以绑定一个对象，对象的属性名是类选择器的名称，属性值返回true，表示添加该选择器。 --><div:class="{bg_b:bg_b,c_w:c_w}">好好学习Vue</div><button@click="arr.push('bg_p')">显示粉色背景</button><button@click="arr.push('c_g')">显示绿色字体</button><!-- :class可以绑定字符串一个数组，数组中的每一个元素就是一个选择器 --><div:class="arr">好好学习Vue</div><!-- :class可以直接绑定一个表示 --><div:class="bg_b?'bg_b':''">好好学习Vue</div><!-- :class也可以通过数组绑定多个表达式 --><div:class="[bg_b?'bg_b':'',c_w?'c_w':'']">好好学习Vue</div><hr><p>背景色：<inputtype="text"v-model="bgc"></p><p>字体色：<inputtype="text"v-model="c"></p><!-- :class是绑定类选择器，:style是绑定内联样式。

:style通常也是绑定一个对象，对象的属性名是原生CSS的属性名，但是要采用小驼峰命名规范。 --><div:style="{backgroundColor:bgc,color:c}">好好学习Vue</div><br><!-- 小练习：实现点谁，谁高亮 --><ul><li@click="activeIndex=index"v-for="(item,index) in list":key="index":class="{active:activeIndex===index}">{{item}}</li></ul></div>

newVue({el:'#app',data(){return{// 是否显示蓝色背景bg_b:false,// 是否显示白色字体c_w:false,// 该数组中，用于存储类选择器的名称arr:[],// 定义背景色bgc:'orange',// 定义字体颜色c:'red',list:['保时捷','玛莎拉蒂','雷克萨斯','吉利'],// 定义一个高亮索引activeIndex:0}},})

2. 计算属性

<divid="app"><p>姓：<inputtype="text"v-model="firstName"></p><p>名：<inputtype="text"v-model="lastName"></p><!-- 通常情况下，我们喜欢插值表达式里面，不要写过多的逻辑代码，而是直接展示结果 --><p>姓名：{{firstName+'.'+lastName}}</p><!-- 插值表达式中可以调用方法，并显示方法的返回结果 --><p>姓名：{{getName()}}</p><!-- 这里调用的是计算属性，计算属性本质上是方法，在模板中当前属性去使用。 --><p>姓名：{{fullName}}</p><p>姓名：<inputtype="text"v-model="fullName2"></p><hr><ul><liv-for="(item,index) in students":key="index">{{item.name}}--{{item.sex}}--{{item.age}}</li><li>平均年龄是：{{avgAge}}</li></ul></div>

newVue({el:'#app',data(){return{firstName:'王',lastName:'瑞',students:[{name:'张三',sex:'男',age:12},{name:'李四',sex:'女',age:13},{name:'王五',sex:'男',age:15}]}},methods:{// 定义一个方法，返回姓名getName(){returnthis.firstName+'.'+this.lastName}},// 计算属性，计算属性本质上其实是方法computed:{// 在这里，我们定义的是方法，只不过这方法在模板中，可以当做属性来使用fullName(){returnthis.firstName+'.'+this.lastName},// 计算属性的简单写法，就是定义一个方法，由该方法返回出去一份结果，所有它是只读的。// 如果要修改计算属性的值，就要使用完整的写法fullName2:{// get方法，返回计算属性的结果get(){returnthis.firstName+'.'+this.lastName},// set方法，修改计算属性的结果，该方法接收一个参数是最新的值set(val){if(val.indexOf('.')!==0){letarr=val.split('.')this.firstName=arr[0]this.lastName=arr[1]}}},// 计算学生的平均年龄avgAge(){return(this.students.reduce((c,s)=>{returnc+s.age},0)/this.students.length).toFixed(2)}}})

3. 数据侦听器

<divid="app"><p>姓名：<inputtype="text"v-model="name"></p><p>年龄：<inputtype="text"v-model="age"></p><hr><p>员工姓名：<inputtype="text"v-model="emp.name"></p><p>员工年龄：<inputtype="text"v-model="emp.age"></p><p>员工汽车名称：<inputtype="text"v-model="emp.car.name"></p><p>员工汽车价格：<inputtype="text"v-model="emp.car.price"></p></div>

newVue({el:'#app',data(){return{name:'王瑞',age:20,// 定义一个对象emp:{name:'张勇杰',age:20,// 员工的汽车对象car:{name:'奔驰',price:'50W'}}}},// 侦听器watch:{// 要侦听哪个属性，就以那个属性的名称为方法名，定义一个方法,// 当属性的值发生变化时，该方法就会执行。// 该方法，有两个参数，第一个参数是新值，第二参数是旧值name(nval,oval){console.log('name属性值发生变化了',nval,oval);},// 侦听emp对象是否发生了变化// 如果要实现深度侦听对象的变化，就需要使用完整的写法，定义一个对象// 在对象中，通过deep属性设置深度监视emp:{// 深度监视deep:true,// 设置监视器，默认执行一次immediate:true,// 通过handler定义监视器的方法handler(nval,oval){console.log('员工信息发生变化了',nval,oval);}}}})

4. 过滤器

<!-- 第一个容器 --><divid="app"><h2>{{goods1.name}}</h2><h4>价格：{{rmb_price}}</h4><h4>价格：{{us_price}}</h4><h4>价格：{{goods1.price | toRMB}}</h4><h4>价格：{{goods1.price | toUS}}</h4><hr><h2>{{goods2.name}}</h2><!-- 过滤器只能在插值表达式 和  v-bind表达式中使用。通过“管道符” | 指定使用具体的过滤器。

原理就是将“管道符”左边的值传给“管道符”右边的方法去处理，并返回处理过后的结果。 --><h4>价格：{{goods2.price | toRMB}}<inputtype="text":value="goods2.price | toRMB"></h4><h4>价格：{{goods2.price | toUS}}<inputtype="text":value="goods2.price | toUS"></h4></div><div>=================================================</div><!-- 第二个容器 --><divid="app2"><h2>{{goods1.name}}</h2><h4>价格：{{goods1.price | toRMB}}</h4><h4>价格：{{goods1.price | toUS}}</h4><h2>{{message}}</h2><h2>{{message | strReverse}}</h2></div>

// 定义过滤器有两种方式：局部过滤器，全局过滤器// 局部过滤器，只是当前Vue实例可以访问// 全局过滤器，所有的Vue实例都可以访问Vue.filter('toRMB',function(val){return'¥'+val.toFixed(2)})Vue.filter('toUS',function(val){return'$'+(val/6.4634).toFixed(2)})Vue.filter('strReverse',function(val){returnval.split('').reverse().join('')})// 该Vue实例操作第一个容器newVue({el:'#app',data(){return{// 商品一goods1:{name:'苹果手机',price:8666,},// 商品二goods2:{name:'小米电视',price:8848}}},computed:{// 定义一个计算属性，返回人民币价格// 计算属性一般用于针对性的计算，假设我们有很多数据要计算，就不太方便了。rmb_price(){return'¥'+this.goods1.price.toFixed(2)},// 定义一个计算属性，返回美金价格us_price(){return'$'+(this.goods1.price/6.4634).toFixed(2)}},// 定义过滤器 (局部过滤器，里面定义的过滤器只是当前Vue实例可以访问)/* filters:{

      // 每个过滤器其实，也是一个方法，该方法接收一个参数。

        // 对参数进行过滤，然后重新返回。

        toRMB(val){

          return '¥'+val.toFixed(2)

        },

        toUS(val){

            return '$'+(val/6.4634).toFixed(2)

        }

    } */})// 该Vue实例操作第二个容器newVue({el:'#app2',data(){return{// 商品一goods1:{name:'娃哈哈奶茶',price:25},message:'欢迎光临本店，所有商品一律8折'}},})