做企业网站的人才,如何建设网站脱颖而出,邯郸网站建设推荐驰捷网络公司,推广营销appvue2 简介第一天第二天 第三天第四天第五天 第六天第七天第八天 第九天 网课链接#xff08;半个月拿下#xff09; 简介 需要提前会的东西 中文文档链接点下面 vue.js 要会查文档用API
第一天
清除提示1 再文档中下载开发版本浏览器安装vue devtools插件 打开允许访问URL… vue2 简介第一天第二天 第三天第四天第五天 第六天第七天第八天 第九天 网课链接半个月拿下 简介 需要提前会的东西 中文文档链接点下面 vue.js 要会查文档用API
第一天
清除提示1 再文档中下载开发版本浏览器安装vue devtools插件 打开允许访问URL 浏览器链接位置
……///…… 这个直接在浏览器中安装的拓展在后续学习中时不时出现问题建议直接从网盘下载工具 网盘链接如下
链接: https://pan.baidu.com/s/1ev2zbUIghU_Eo264_ArPWw?pwd4dzp 提取码: 4dzp 复制这段内容后打开百度网盘手机App操作更方便哦……///……
清除提示2 直接写入下面代码如果没有清除直接回vue.js文档改为txt格式用快捷键ctrl f 查找productionTip,把true改为false,再把文件后缀改回去
script typetext/javascriptVue.config.productionTip false //以阻止 vue 在启动时生成生产提示。/scripthello小案例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript typetext/javascript srcvue.js/script
/head
body!-- 准备好一个容器 --div idrooth1hello,{{name}}/h1/divscript typetext/javascriptVue.config.productionTip false //以阻止 vue 在启动时生成生产提示。//创建vue实例const x new Vue({el:#root, //el用于指定当前vue实例为哪个容器服务data:{ //data用于存储数据数据供el所指定容器使用name:你好}})/script
/body
/html分析
body!-- 准备好一个容器 --div idrooth1hello,{{name.toUpperCase()}},{{address}}/h1/divscript typetext/javascriptVue.config.productionTip false //以阻止 vue 在启动时生成生产提示。//创建vue实例const x new Vue({el:#root, //el用于指定当前vue实例为哪个容器服务data:{ //data用于存储数据数据供el所指定容器使用name:你好,address:长沙}})/script
/body第二天
模板语法
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript typetext/javascript srcvue.js/script
/head
body!-- 准备好一个容器 --div idrooth1插值语法/h1h3你好{{name}}/h3hr/h1指令语法/h1a v-bind:hrefschool.url.toUpperCase() xhello点我学习vue{{school.name}}/aa :hrefschool.url xhello快去学习{{school.name}}/a/div
/bodyscript typetext/javascriptVue.config.productionTip false //以阻止 vue 在启动时生成生产提示。new Vue({el:#root,data:{name:jack,school:{name:哈哈,url:http://www.atguigu.com}}})/script/html数据绑定
body!-- 准备好一个容器 --div idroot!-- 简写 --单向数据绑定input typetext :valuenamebr/双向数据绑定input typetext v-modelnamebr//div
/bodyscript typetext/javascriptVue.config.productionTip false //以阻止 vue 在启动时生成生产提示。new Vue({el:#root, //el用于指定当前vue实例为哪个容器服务data:{ //data用于存储数据数据供el所指定容器使用name:你好}})/script
el与data的两种写法 学到组件data必须使用函数式
bodydiv idrooth1你好{{name}}/h1/div
/bodyscript typetext/javascriptVue.config.productionTip false //以阻止 vue 在启动时生成生产提示。//el两种写法/* 第一种new Vue({el:#root, //el用于指定当前vue实例为哪个容器服务data:{ //data用于存储数据数据供el所指定容器使用name:你好}}) *//* 第二种const v new Vue({data:{name:哈哈}})console.log(v)v.$mount(#root) //挂载 *///data两种写法new Vue({el:#root,//第一种写法对象式/* data:{ //data用于存储数据数据供el所指定容器使用name:你好} *///第二种函数式data:function(){return{name:哈哈}}})/script
第三天
object.defineProperty方法 script typetext/javascriptlet number 18let person {name:张三,sex:男,}Object.defineProperty(person,age,{/* value:18,enumerable:true, //控制属性是否可以枚举writable:true, //控制属性是否可以被修改configurable:true //控制属性是否可以被删除*/ get(){console.log(有人读取了age属性了)return number},set(value){console.log(有人修改了age属性且值是,value)number value}})/script数据代理
script typetext/javascriptlet obj {x:100}let obj2 {y:200}Object.defineProperty(obj2,x,{get(){return obj.x},set(value){obj.x value}})/scriptvue中的数据代理 div idrooth2学校名称{{name}}/h2h2学校地址{{address}}/h2
/div
/bodyscript typetext/javascript
Vue.config.productionTip false
const vm new Vue({el:#root,data:{name:尚硅谷,address:长沙,}
})
/script事件处理 div idrooth2欢迎来到{{name}}学习/h2button v-on:clickshowInfo点我提示信息/button
/div
/bodyscript typetext/javascriptVue.config.productionTip falseconst vm new Vue({el:#root,data:{name:尚硅谷},methods: {showInfo(event){// console.log(this)//此处this是vmalert(同学你好)}},})
/scriptdiv idrooth2欢迎来到{{name}}学习/h2!-- button v-on:clickshowInfo点我提示信息/button --button clickshowInfo1点我提示信息1/buttonbutton clickshowInfo2(66,$event)点我提示信息2(传参)/button
/div
/bodyscript typetext/javascriptVue.config.productionTip falseconst vm new Vue({el:#root,data:{name:尚硅谷},methods: {showInfo1(event){// console.log(this)//此处this是vmalert(同学你好)},showInfo2(number,a){console.log(number,a)}}})
/script事件修饰符 div idrooth2欢迎来到{{name}}学习/h2a hrefhttp://www/atguigu.com click.preventshoowInfo点我提示信息/a!-- 阻止事件冒泡 --div classdemo1 clickshowInfobutton click.stopshowInfo点我提示信息/button/div
/div
/bodyscript typetext/javascriptnew Vue({el:#root,data:{name:尚硅谷},methods: {showInfo(e){e.stopPropagation()alert(同学你好!)}},})
/script
键盘事件
div idrooth2欢迎来到{{name}}学习/h2input typetext placeholder按下回车提示输入 keyup.caps-lockshowInfo/div
/bodyscript typetext/javascriptVue.config.productionTip falsenew Vue({el:#root,data:{name:尚硅谷},methods: {showInfo(e){console.log(e.target.value)}},})
/script计算属性
!-- 准备好一个容器 --
div idroot姓: input typetext v-modelfirstNamebrbr名: input typetext v-modellastNamebrbr!-- 拼接姓名实现张-三联动 --!-- 第一种实现:使用插值语法(字符串的slice方法,左闭右开截取字符串) ,麻烦--姓名: span{{firstName.slice(0,3)}}-{{lastName}}/spanbrbr!-- 第二种实现:使用methods,每次用到都会调用一次,而计算属性只调用第一次就欧了--姓名: span{{fullName()}}/spanbrbr姓名: span{{fullName()}}/spanbrbr姓名: span{{fullName()}}/spanbrbr姓名: span{{fullName()}}/spanbrbr姓名: span{{fullName()}}/span
/divscriptconst vm new Vue({el: #root,data: {firstName: 张,lastName: 三},methods: {fullName() {console.log(调用)return this.firstName - this.lastName;}}})
/script
!-- 准备好一个容器 --
div idroot姓: input typetext v-modelfirstNamebrbr名: input typetext v-modellastNamebrbr!-- 拼接姓名实现张-三联动 --!-- 使用计算属性,只调用一次,非常奈斯,节省内存 --姓名: span{{fullName}}/spanbrbr姓名: span{{fullName}}/spanbrbr姓名: span{{fullName}}/spanbrbr姓名: span{{fullName}}/spanbrbr姓名: span{{fullName}}/spanbrbr姓名: span{{fullName}}/span
/divscriptconst vm new Vue({el: #root,data: {firstName: 张,lastName: 三},computed: {//计算属性里面的属性要写成对象的形式,每个对象里面都有getter和setter//这个fullName实际上就是firstName和lastName经过一番计算得到的玩意儿,直接给到vm身上fullName: {//get有什么用?当有人读取fullName时,get调用,返回值作为fullName的值//get什么时候调用? 1.初次读取fullName 2.get里用到的数据发生了改变get() {console.log(fullName被读了);// console.log(this);//此处的this是vmreturn this.firstName - this.lastName;},//set什么时候调用? fullName被手动修改时调用//这里边呢有个连锁反应,我手动修改vm.fullName导致firstName和lastName被修改,Vue模板重新解析//页面刷新,firstName和lastName的修改又导致get被重新执行(依赖的数据变了),返回新的fullName//计算属性计算属性,就是一直在计算,所以要想改fullName,必须改它依赖的值set(val) {let arr val.split(-);this.firstName arr[0]; this.lastName arr[1];}}}})
/script
简写 只考虑读取不考虑修改时可使用
!-- 准备好一个容器 --
div idroot姓: input typetext v-modelfirstNamebrbr名: input typetext v-modellastNamebrbr!-- 拼接姓名实现张-三联动 --!-- 使用计算属性,只调用一次,非常奈斯,节省内存 --姓名: span{{fullName}}/span
/divscriptconst vm new Vue({el: #root,data: {firstName: 张,lastName: 三},computed: {fullName() {console.log(fullName被读了);return this.firstName - this.lastName;}}})
/script
天气案例
div idroot!-- 实现点击按钮切换天气 --!-- 写法1:利用插值语法和三元表达式 --h2今天天气很{{isHot ? 炎热: 寒冷}}/h2!-- 写法2:利用计算属性 --h2今天天气很{{info}}/h2!-- 绑定事件的时候xxxyyy yyy可以写一些简单的语句,但是最好别这么干--!-- button clickisHot !isHot切换天气/button--button clickchange点击切换天气/button
/div
scriptnew Vue({el: #root,data: {isHot: true},methods: {change() {this.isHot !this.isHot;}},computed: {info() {//注意这里的isHot要加thisreturn this.isHot ? 炎热 : 寒冷;}},})
/script
监视属性
div idroot!-- 实现点击按钮切换天气 --!-- 写法1:利用插值语法和三元表达式 --h2今天天气很{{isHot ? 炎热: 寒冷}}/h2!-- 写法2:利用计算属性 --h2今天天气很{{info}}/h2!-- 绑定事件的时候xxxyyy yyy可以写一些简单的语句,但是最好别这么干--!-- button clickisHot !isHot切换天气/button--button clickchange点击切换天气/button
/div
scriptnew Vue({el: #root,data: {isHot: true},methods: {change() {this.isHot !this.isHot;}},computed: {info() {//注意这里的isHot要加thisreturn this.isHot ? 炎热 : 寒冷;}},watch: {isHot: {immediate: true, //初始化时先调用一次handler //当isHot被修改时调用handler函数handler(newVal, oldVal) {console.log(isHot被修改了, 改之前是 oldVal, 改之后是 newVal);}},//watch不只可以监视data中的属性,还可以监视计算属性info: {immediate: true, //初始化时先调用一次handler //当isHot被修改时调用handler函数handler(newVal, oldVal) {console.log(info被修改了, 改之前是 oldVal, 改之后是 newVal);}}}})
/script
通过vm.$watch监视
const vm new Vue({el: #root,data: {isHot: true},methods: {change() {this.isHot !this.isHot;}},computed: {info() {//注意这里的isHot要加thisreturn this.isHot ? 炎热 : 寒冷;}}
})vm.$watch(isHot, {immediate: true, //初始化时先调用一次handler //当isHot被修改时调用handler函数handler(newVal, oldVal) {console.log(isHot被修改了, 改之前是 oldVal, 改之后是 newVal);}})vm.$watch(info, {immediate: true, //初始化时先调用一次handler //当isHot被修改时调用handler函数handler(newVal, oldVal) {console.log(info被修改了, 改之前是 oldVal, 改之后是 newVal);}})
深度监视 !-- 准备一个容器 --div idrooth3a的值是:{{numbers.a}}/h3button clicknumbers.a点我实现a1/buttonh3b的值是:{{numbers.b}}/h3button clicknumbers.b点我实现b1/buttonh3我tm就非要强制让number变/h3button clicknumbers {a:666, b:999}点我改变numbers/button/divscriptconst vm new Vue({el: #root,data: {isHot: true,numbers: {a: 1,b: 2}},watch: {//监视多级结构中某个属性的变化,使用引号包起来(之前不加引号都是简写形式)numbers.a: {handler() {console.log(a被改变了);}},//如果下面这么写,即使ab变了也不会执行handler,因为这么写意思是监视numbers这个属性//而这个属性值是一个对象,只要numbers对象的地址不变就不变除非像上面div写的暴力方法numbers: {handler() {console.log(numbers改变了);}},//但是如果加个deep,就可以监视多级结构中某个属性的变化,ab变了numbers也变numbers: {deep: true,handler() {console.log(numbers改变了);}},}})/script
简写 //复杂形式vm.$watch(isHot, {//当isHot被修改时调用handler函数handler(newVal, oldVal) {console.log(isHot被修改了, 改之前是 oldVal, 改之后是 newVal);}})//简写形式vm.$watch(isHot,function (newVaule,oldVaule) {console.log(newVaule,oldVaule);})
计算属性对比监视属性 计算
const vm new Vue({el: #root,data: {firstName: 张,lastName: 三},computed: {fullName() {console.log(fullName被读了);return this.firstName - this.lastName;}}
})监视 const vm new Vue({el: #root,data: {firstName: 张,lastName: 三,fullName: 张-三},watch: {firstName: {handler(newVal, oldVal) {this.fullName newVal - this.lastName;}},lastName: {handler(newVal, oldVal) {this.fullName this.firstName - newVal;}},}})
computed能完成的功能watch都可以完成
第四天
绑定class样式
div idroot!-- 1. 绑定class样式--字符串写法适用于样式的类名不确定需要动态指定--div classbasic :classmood clickchangeMood{{name}}/div!-- 2. 绑定class样式--数组写法适用于要绑定的样式个数不确定名字也不确定--div classbasic :classclassArr clickremoveStyle3{{name}}/divbr!-- 3. 绑定class样式--对象写法适用于要绑定的样式个数确定名字也确定要动态决定用不用--div classbasic :classclassObj{{name}}/divbrbutton clickuseStyle1点击添加样式1/buttonbutton clickuseStyle2点击添加样式2/button/div
scriptconst vm new Vue({el: #root,data: {name: zzy,mood: normal,classArr: [style1, style2, style3],classObj: {style1: false,style2: false}},methods: {changeMood() {// this.mood happy;//点击实现随机切换样式const arr [happy, sad, normal];const index Math.floor(Math.random() * 3); //获取0-3之间的整数不包括3this.mood arr[index];},//点击去掉style3样式removeStyle3() {this.classArr.pop();},//点击添加样式1useStyle1() {this.classObj.style1 true;// this.classObj.style2 true;},//点击添加样式2useStyle2() {// this.classObj.style1 true;this.classObj.style2 true;}}})
/script
绑定style样式
!-- 绑定style样式--对象写法--
div classbasic :classclassArr :stylestyleObj {{name}}/divbr
!-- 绑定style样式--数组写法非常不常用--
div classbasic :classclassArr :style[styleObj,styleObj2] {{name}}/div
script
new Vue({el:#root,data: {name: zzy,styleObj:{//驼峰命名法fontSize:50px,color:red},styleObj2:{//驼峰命名法backgroundColor:green}}
})
/script
条件渲染
body!-- 准备好一个容器 --
div idroot!-- 1.v-showfalse 相当于display:none --h2 v-showfalse我的名字叫{{name}}/h2h2 v-show1 3我的名字叫{{name}}/h2!-- 等价于h2 styledisplay: none;我的名字叫{{name}}/h2 --!-- 2.v-iffalse 彻底删除标签了 --h2 v-iffalse我的名字叫{{name}}/h2h2 v-if1 3我的名字叫{{name}}/h2!-- 实现功能随着n递增展示不同的div --h2当前n的值是{{n}}/h2button v-on:clickn点击n1/button!-- 这里的v-if,v-else-if,v-else和基础js里的一样儿 --div v-ifn 1Angular/divdiv v-else-ifn 2React/divdiv v-else-ifn 3Vue/divdiv v-else哈哈/div!-- v-if和template的配合使用(v-show不行)template不会影响页面结构页面运行后会自动去掉但是可以配合v-if控制多个元素整体显示而且不会影响css拿节点--template v-ifn 1div哈哈1/divdiv哈哈2/divdiv哈哈3/div/template/divscriptconst vm new Vue({el: #root,data: {name: zzy,n: 0}})
/script
列表渲染 !-- 准备好一个容器 --div idrootulli v-for(p,index) in persons :keyp.id!-- 遍历数组的话index是索引值p是数组每个元素 --{{p.name}}----{{p.age}}----{{index}}/lili v-for(p,index) of games :keyindex!-- 遍历对象的话index就是属性名p是属性值 --{{p}}---{{index}}/lili v-for(p,index) of str :keyindex!-- 遍历字符串的话index就是索引值p是每个字符 --{{p}}---{{index}}/lili v-for(p,index) of 5 :keyindex!-- 遍历指定次数的话index就是索引值p是从1开始数 --{{p}}---{{index}}/li/ul/div
//下面同上
key作用和原理 !-- 准备好一个容器 --div idrooth1人员列表/h1button clickadd点击添加老刘/buttonulli v-for(p,index) in persons :keyp.id!-- 遍历数组的话index是索引值p是数组每个元素 --{{p.name}}----{{p.age}}----{{index}}input typetext/li/ul/divscriptconst vm new Vue({el: #root,data: {persons: [{ id: 001, name: 张三, age: 23 },{ id: 002, name: 李四, age: 18 },{ id: 003, name: 王五, age: 10 }]},methods: {add() {const p { id: 004, name: 老刘, age: 90 };this.persons.unshift(p);}},})/script 列表过滤
!-- 准备好一个容器 --
div idrooth1人员列表/h1input typetext placeholder请输入关键字 v-modelkeyword keyup.entersearch ulli v-for(p,index) in newPersons :keyp.id{{p.name}}----{{p.age}}----{{p.sex}}/li/ul
/divscriptconst vm new Vue({el: #root,data: {keyword: ,persons: [{ id: 001, name: 冯万宁儿, age: 23, sex: 男 },{ id: 002, name: 屁及万儿, age: 18, sex: 男 },{ id: 003, name: 及丽热巴, age: 10, sex: 女 },{ id: 004, name: 冯小刚儿, age: 60, sex: 男 }],newPersons: []},methods: {search() {this.newPersons this.persons.filter((ele, index) {const arr ele.name.split(); //先把每个对象的name分割为数组//数组里是不包含空字符串的所以这样如果keyword是筛不出来东西的const flag arr.includes(this.keyword); //判断数组中是否包含当前vue中的keywordreturn flag; //筛选出来包含keyword的对象,组成一个新数组})}},})
/script用watch瑕疵实现 !-- 准备好一个容器 --
div idrooth1人员列表/h1!-- input typetext placeholder请输入关键字 v-modelkeyword keyup.entersearch --input typetext placeholder请输入关键字 v-modelkeywordulli v-for(p,index) in newPersons :keyp.id{{p.name}}----{{p.age}}----{{p.sex}}/li/ul
/divscriptconst vm new Vue({el: #root,data: {keyword: ,persons: [{ id: 001, name: 冯万宁儿, age: 23, sex: 男 },{ id: 002, name: 屁及万儿, age: 18, sex: 男 },{ id: 003, name: 及丽热巴, age: 10, sex: 女 },{ id: 004, name: 冯小刚儿, age: 60, sex: 男 }],newPersons: []},watch: {keyword: {//页面上来由于newPersons是空不会显示数据想要让页面初始化就显示所有人就要加个immediate: true//这样就可以让handler函数初始化时先调用一次由于开始keyword// 而字符串里都包含空字符串就可以先筛选出来初始化所有人物信息immediate: true,handler(newVal, oldVal) {this.newPersons this.persons.filter((ele) {//判断keyword变化后的新值在不在每个对象的name中,并返回一个新的数组return ele.name.includes(newVal);//有个点要注意字符串里面是有空字符串的});}}}})
/script
用computed完美实现
!-- 准备好一个容器 --
div idrooth1人员列表/h1!-- input typetext placeholder请输入关键字 v-modelkeyword keyup.entersearch --input typetext placeholder请输入关键字 v-modelkeywordulli v-for(p,index) in newPersons :keyp.id{{p.name}}----{{p.age}}----{{p.sex}}/li/ul
/divscriptconst vm new Vue({el: #root,data: {keyword: ,persons: [{ id: 001, name: 冯万宁儿, age: 23, sex: 男 },{ id: 002, name: 屁及万儿, age: 18, sex: 男 },{ id: 003, name: 及丽热巴, age: 10, sex: 女 },{ id: 004, name: 冯小刚儿, age: 60, sex: 男 }],//newPersons: []},computed: {newPersons: {get() {return this.persons.filter((ele) {return ele.name.includes(this.keyword);})}}}})
/script列表排序
!-- 准备好一个容器 --
div idrooth1人员列表/h1input typetext placeholder请输入关键字 v-modelkeywordbutton clicksortType 0原顺序/buttonbutton clicksortType 1年龄降序/buttonbutton clicksortType 2年龄升序/buttonulli v-for(p,index) in newPersons :keyp.id{{p.name}}----{{p.age}}----{{p.sex}}/li/ul
/divscriptconst vm new Vue({el: #root,data: {sortType: 0, //0原顺序1年龄降序2年龄升序keyword: ,persons: [{ id: 001, name: 冯万宁儿, age: 23, sex: 男 },{ id: 002, name: 屁及万儿, age: 18, sex: 男 },{ id: 003, name: 及丽热巴, age: 10, sex: 女 },{ id: 004, name: 冯小刚儿, age: 60, sex: 男 }],},computed: {newPersons() {//先过滤再排序const arr this.persons.filter((p) {return p.name.indexOf(this.keyword) ! -1})// 或者if(this.sortType)if (this.sortType ! 0) {arr.sort((a, b) this.sortType 1 ? b.age - a.age : a.age - b.age)}return arr}}})
/script
更新时的问题
!-- 准备好一个容器 --
div idrooth1人员列表/h1button clickupdateNing更新冯万宁儿/buttonulli v-for(p,index) in persons :keyp.id{{p.name}}----{{p.age}}----{{p.sex}}/li/ul
/divscriptconst vm new Vue({el: #root,data: {persons: [{ id: 001, name: 冯万宁儿, age: 23, sex: 男 },{ id: 002, name: 屁及万儿, age: 18, sex: 男 },{ id: 003, name: 及丽热巴, age: 10, sex: 女 },{ id: 004, name: 冯小刚儿, age: 60, sex: 男 }],},methods: {updateNing() {// this.persons[0].name 冯千宁儿; //奏效// this.persons[0].age 66; //奏效// this.persons[0].sex 女; //奏效this.persons[0] { id: 001, name: 冯千宁儿, age: 66, sex: 女 };//上面这么写也奏效数据实际上已经改了但是Vue监测不到所以没更新到页面为啥捏}}})
/script监测数据的原理 let data {name: zzy,age: 18}//创建一个监视的实例对象用来监视data中数据的变化const obs new Observer(data);const vm {};vm._data obs;//创建一个类似vm._data的构造函数function Observer(obj) {//1.创建一个数组接收传入对象的属性名let arr Object.keys(obj); //[name,age]//2.遍历属性名让Observer实例对data中的每个数据进行数据代理arr.forEach((k) {Object.defineProperty(this, k, {get() {//有人想读实例中的属性值我就把data中对应的属性值拿过来return obj[k];},set(val) {//有人想改实例中的属性值我就把data中对应的属性值更改数据代理console.log(${k}被改了,我要重新解析模板,生成虚拟DOM,开始diff算法);obj[k] val;}})})}
案例Vue.set()使用
div idrooth2我的名字{{name}}/h2h2我的年龄{{age}}/h2h3 v-ifsex我的性别{{sex}}/h3button clickaddmySex点击添加我的性别/buttonhrh2她的名字{{girlfriend.name}}/h2button clickaddherSex点击添加性别,属性值为女/buttonh2 v-ifgirlfriend.sex她的性别{{girlfriend.sex}}/h2 !-- undefined不显示也不报错 --h2她的年龄对外{{girlfriend.age.fakeAge}}真实{{girlfriend.age.realAge}}/h2h2朋友们/h2ulli v-forp in girlfriend.friends :keyp.id{{p.name}}----{{p.age}}/li/ul
/div
scriptconst vm new Vue({el: #root,data: {name: zzy,age: 18,girlfriend: {name: ht,// sex: 女,age: {realAge: 23,fakeAge: 18}}},methods: {addherSex() {// Vue.set(this.girlfriend, sex, 女);this.$set(this.girlfriend, sex, 女); //vm.$set(vm.girlfriend, sex, 女);},addmySex() {Vue.set(this, sex, 男);}},})
/script
说实话我没听懂……所以我又听了一遍
Vue监测数组
div idrooth2我的名字{{name}}/h2h2我的年龄{{age}}/h2hrh2她的名字{{girlfriend.name}}/h2button clickaddHobby点击替换跳的爱好/buttonh2爱好/h2ulli v-for(h,index) in girlfriend.hobby :keyindex{{h}}/li/ul
/div
scriptconst vm new Vue({el: #root,data: {name: zzy,age: 18,girlfriend: {name: ht,hobby: [唱, 跳, rap]}},methods: {addHobby() {//除了那7个方法外set方法也可以改变数组实现响应式Vue.set(this.girlfriend.hobby, 1, 打游戏);}},})
/script
案例
div idrootbutton clickaddSex添加一个性别属性默认为女/buttonbutton clickaddHeight添加一个身高属性默认为170/buttonbrbutton clickgirlfriend.age.realAge--年龄-1/buttonbutton clickaddFriend在列表前加一个朋友/buttonbrbutton clickupdateFriend修改第一个朋友的名字为张三/buttonbutton clickaddHobby添加一个爱好/buttonbrbutton clickupdateHobby修改第一个爱好为散步/buttonbutton clickremoveHobby过滤掉爱好中的跳/buttonh2名字{{girlfriend.name}}/h2h2年龄对外{{girlfriend.age.fakeAge}}真实{{girlfriend.age.realAge}}/h2h2 v-ifgirlfriend.sex性别{{girlfriend.sex}}/h2h2 v-ifgirlfriend.height身高{{girlfriend.height}}/h2h2朋友们/h2ulli v-forp in girlfriend.friends :keyp.id{{p.name}}----{{p.age}}/li/ulh2爱好/h2ulli v-for(h,index) in girlfriend.hobby :keyindex{{h}}/li/ul
/div
scriptconst vm new Vue({el: #root,data: {name: zzy,age: 18,girlfriend: {name: ht,// sex: 女,age: {realAge: 23,fakeAge: 18},friends: [{ id: 001, name: jack, age: 10 },{ id: 002, name: rose, age: 8 },],hobby: [唱, 跳, rap]}},methods: {addSex() {Vue.set(this.girlfriend, sex, 女);},addHeight() {this.$set(this.girlfriend, height, 170);},addFriend() {this.girlfriend.friends.unshift({ id: 003, name: alice, age: 5 }); //有效写法},updateFriend() {this.girlfriend.friends[0].name 张三;},addHobby() {this.girlfriend.hobby.push(打游戏);},updateHobby() {// this.girlfriend.hobby[0] 散步; //无效写法// this.girlfriend.hobby.splice(0, 1, 散步); //有效写法Vue.set(this.girlfriend.hobby, 0, 散步); //有效写法},removeHobby() {// 变更方法顾名思义会变更调用了这些方法的原始数组。相比之下也有非变更方法// 例如 filter()、concat() 和 slice()。它们不会变更原始数组而总是返回一个新数组。// 当使用非变更方法时可以用新数组替换旧数组this.girlfriend.hobby this.girlfriend.hobby.filter((ele) {return ele ! 跳;})}},})
/script
**代码参考与——DantinZhang **
第五天
收集表单数据 !-- 准备好一个容器 --div idrootform v-on:submit.preventdemo!-- v-model.trim去掉收集的首尾空格 --账号input typetext v-model.trimuserInfo.account brbr密码input typepassword v-modeluserInfo.passwordbrbr!--下面是 双向绑定修饰符收集到的必须是数字类型Vue内部做了数据转换 --年龄input typenumber v-model.numberuserInfo.age!-- v-model.number经常和typenumber一起用 --brbr性别男input typeradio namesex valuemale v-modeluserInfo.sex女input typeradio namesex valuefemale v-modeluserInfo.sexbrbr爱好抽烟input typecheckbox valuesmoke v-modeluserInfo.hobby喝酒input typecheckbox valuedrink v-modeluserInfo.hobby跳舞input typecheckbox valuedance v-modeluserInfo.hobbybrbr玩哪个游戏select v-modeluserInfo.gameoption valuesaibo赛博朋克2077/optionoption valueditie地铁离去/optionoption valuedipingxian地平线4/optionoption valuenfsmw极品飞车21热度/optionoption valuedabiaoge荒野大镖客2/option/selectbrbr!-- v-model.lazy可以实现不用实时收集输入框焦点离开了再收集 --其他信息 textarea v-model.lazyuserInfo.other/textareabrbrinput typecheckbox v-modeluserInfo.agree阅读并接受a hrefhttp://www.baidu.com用户协议/abutton提交/button/form/divscriptconst vm new Vue({el: #root,data: {userInfo: {account: ,password: ,age: ,sex: female,//hobby的数据类型影响着多选框收集到的数据类型hobby: [],game: nf smw,other: ,agree: ,},},methods: {demo() {// console.log(JSON.stringify(this._data)); //一般不建议直接访问_data,建议用个对象包住数据console.log(JSON.stringify(this.userInfo)); //只是这么写的话所有双向绑定都要加userInfo前缀}},})/script
v-model的三个修饰符 v-model.lazy实现不用实时收集输入框失去焦点再收集 v-model.number输入的字符串收集为数字Vue内部做了数据转换经常和typenumber一起用 v-model.trim收集时去掉输入的首尾空格
过滤器格式化时间戳 dayjs !-- 准备一个容器 --div idhelloh1当前时间是:{{time}}/h1!-- 计算属性实现 --h1当前时间是:{{formatTime}}/h1!-- 方法实现 --h1当前时间是:{{getformatTime()}}/h1!-- 过滤器实现 time传给timeFormater然后返回值替换整个部分--h1当前时间是:{{time | timeFormater}}/h1!-- 过滤器实现(传参)--h1当前时间是:{{time | timeFormater(YYYY——MM——DD)}}/h1!-- 过滤器的串联,一层一层往后传后面的接受的是前面的返回值--h1当前时间是:{{time | timeFormater(YYYY——MM——DD) | mySlice}}/h1!-- 下面这个打开控制台看元素节点就明白了 --h3 :xname | mySliceDJ/h3 /divscript// 全局过滤器Vue.filter(mySlice, function (val) {return val.slice(0, 4);})const vm new Vue({el: #hello,data: {time: 1660472948789,name: zhangziying},computed: {formatTime: {get() {return dayjs(this.time).format(YYYY年MM月DD日 HH:mm:ss);}}},methods: {getformatTime() {return dayjs(this.time).format(YYYY年MM月DD日 HH:mm:ss);}},// 局部过滤器filters: {//第一个参数是管道符 | 前边那玩意儿//第二个参数str来个默认值如果传了str就给不传就用默认值timeFormater(val, str YYYY年MM月DD日 HH:mm:ss) {// console.log(val);return dayjs(this.time).format(str);},mySlice(val) {//这里的val是上一个过滤器的返回值return val.slice(0, 4);}}})/script
内置指令
v-bind : 单向绑定解析表达式, 可简写为 :xxx
v-model : 双向数据绑定
v-for : 遍历数组/对象/字符串
v-on : 绑定事件监听, 可简写为
v-if : 条件渲染动态控制节点是否存存在
v-else : 条件渲染动态控制节点是否存存在
v-show : 条件渲染 (动态控制节点是否展示)v-text指令
1.作用向其所在的节点中渲染文本内容。
2.与插值语法的区别v-text会替换掉节点中的所有内容{{xx}}则不会v-html指令
作用向指定节点中渲染包含html结构的内容。
与插值语法的区别
1v-html会替换掉节点中所有的内容{{xx}}则不会,这点和v-text一样。
2v-html可以识别html结构这点和v-text区别v-text不能渲染标签。严重注意v-html有安全性问题
1在网站上动态渲染任意HTML是非常危险的容易导致XSS攻击。
2一定要在可信的内容上使用v-html永不要用在用户提交的内容上v-cloak指令没有值
1本质是一个特殊属性Vue实例创建完毕并接管容器后会删掉v-cloak属性。
2使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题先隐藏标签然后Vue渲染完了之后删除v-cloak那么就能显示渲染完之后的页面了v-once指令
1v-once所在节点在初次动态渲染后就视为静态内容了也就是只读一次。
2以后数据的改变不会引起v-once所在结构的更新可以用于优化性能。v-pre指令
1跳过其所在节点的编译过程。
2可利用它跳过没有使用指令语法、没有使用插值语法的节点会加快编译。
cookie 批量编辑器 自定义指令 函数式 !-- 准备一个容器 --div idhelloh1当前n值是span v-textn/span/h1h1放大十倍后的n值是span v-bign/span/h1button clickn点我n1/button/divscriptconst vm new Vue({el: #hello,data: {n: 1},directives: {//一、函数式// 需求1定义一个v-big指令和v-text功能类似但会把绑定的数值放大10倍。//第一个参数是指令所在的标签第二个参数是一个存着指令值的对象big(element, binding) {//big函数何时会被调用 //1.指令与元素成功绑定时(一上来没放入页面之前) 2.指令所在的模板被重新解析时console.log(我被调用了);element.innerText binding.value * 10;},}})/script
对象式 !-- 准备一个容器 --div idhelloh1当前n值是span v-textn/span/h1button clickn点我n1/button!-- 在输入框中显示n的值动态变化 --input v-fbind:valuen/divscriptconst vm new Vue({el: #hello,data: {n: 1},directives: {// 需求2定义一个v-fbind指令和v-bind功能类似但可以让其所绑定的input元素默认获取焦点。//函数无法实现该需求// fbind(element, binding) {// element.innerText binding.value * 10;// //下面这个focus必须在放到页面之后才调用// element.focus(); //不奏效因为big函数调用时还没放入页面// }//二、对象式fbind: {// 指令与元素成功绑定时(一上来没放入页面之前)bind(element, binding) {element.value binding.value;},// 指令所在元素被插入页面时inserted(element, binding) {element.focus();},// 指令所在的模板被重新解析时update(element, binding) {element.value binding.value;}}}})/script生命周期 script typetext/javascriptnew Vue({el:#root,data:{a:false,opacity:1},methods: {},mounted() {console.log(mounted,this)setInterval((){this.opacity -0.01if(this.opacity0) this.opacity 1},16)},})/script
生命周期图示
八个钩子 !-- 准备一个容器 --div idhelloh1欢迎来到{{n}}年代/h1button clickadd点击n1/button/divscriptconst vm new Vue({el: #hello,data: {n: 1},methods: {add() {this.n;}},beforeCreate() {console.log(beforeCreate);console.log(this);// debugger;},created() {console.log(created);},beforeMount() {console.log(beforeMount);},mounted() {console.log(mounted);},beforeUpdate() {console.log(beforeUpdate);},updated() {console.log(updated);},beforeDestroy() {console.log(beforeDestroy);},destryed() {console.log(destryed);}})/script 案例
!-- 准备一个容器 --
div idhelloh1 :style{opacity: opacity}欢迎来到2024/h1button clickstop点击停止闪烁/button
/divscriptconst vm new Vue({el: #hello,data: {opacity: 1},methods: {stop() {// clearInterval(this.timer); vm自杀可以这么写他杀需要写在beforeDestroy中this.$destroy(); //vm自杀}},//挂载意思就是放在页面上//挂载函数,Vue完成模板的解析并把*初始的(只调用一次)*真实DOM放入页面后(完成挂载)调用mountedmounted() {this.timer setInterval(() {console.log(计时器调用);this.opacity - 0.01;if (this.opacity 0) this.opacity 1; //js里玩儿小数一般碰不到0 }, 16)},beforeDestroy() {console.log(vm即将被销毁);// 为什么vm的后事需要写在这里是因为vm很有可能是被别人干掉的clearInterval(this.timer);},})//通过外部的定时器实现(不推荐)// setInterval(() {// vm.opacity - 0.01;// if (vm.opacity 0) vm.opacity 1; //js里玩儿小数一般碰不到0// }, 16);
/script
第六天
使用组件
div idroothello/hellohrh1{{msg}}/h1school/schoolhrstudent/student/divdiv idroot2hello/hello/divscript typetext/javascript//创建school组件const school Vue.extend({template:divh2学校名称{{schoolName}}/h2h2学校地址{{address}}/h2button clickshowName点我提示校名/button/div,data(){return{schoolName:尚硅谷,address:长沙}},methods: {showName(){alert(this.schoolName)}},})//创建student组件const student Vue.extend({template:divh2学生姓名{{studentName}}/h2h2学生年龄{{age}}/h2/div ,data(){return{studentName:张三,age:18}}})const hello Vue.extend({template:divh2你好啊/h2/div,data(){return{name:Tom}}})//全局注册组件Vue.component(hello,hello)//创建vmnew Vue({el:#root,//注册组件局部注册components:{school,student}})new Vue({el:#root2,})
/script注意点 组件的嵌套 div idrootapp/app/divscript typetext/javascript//定义student组件const student Vue.extend({name:student,template:divh2学生姓名{{name}}/h2h2学生年龄{{age}}/h2/div ,data(){return{name:张三,age:18}}})//定义school组件const school Vue.extend({name:school,template:divh2学校名称:{{name}}/h2h2学校地址{{address}}/h2student/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:divhello/helloschool/school/div,components:{school,hello}})//创建vmnew Vue({el:#root,//注册组件局部components:{app}})/scriptVueComponent
div idroothello/helloschool/school/divscript typetext/javascript//定义student组件//定义school组件const school Vue.extend({name:school,template:divh2学校名称:{{name}}/h2h2学校地址{{address}}/h2button clickshowName点我提示学校名/button/div,data(){return{name:尚硅谷,address:北京}},methods: {showName(){// alert(this.name)console.log(showName,this)}},})const test Vue.extend({template:spanhahahaha/span,})//定义hello组件const hello Vue.extend({template:divh2{{msg}}/h2test/test/div,data(){return{msg:你好}},components:{test}})// console.log(,school)
// console.log(#,hello)//定义app组件//创建vmnew Vue({el:#root,//注册组件局部components:{school,hello}})/script重要的内置关系
div idroot/divscript typetext/javascript//定义一个构造函数function Demo(){this.a 1this.b 1}//创建一个Demo的实例对象const d new Demo()console.log(Demo.prototype)//显示原型属性console.log(d._proto_)//隐式原型属性console.log(Demo.prototype d._proto_)//程序员通过显示原型属性对象追加一个x属性值为99Demo.prototype.x 99console.log(,d)/script单文件组件 School.vue
templatediv classdemoh2学校名称{{schoolName}}/h2h2学校地址{{address}}/h2button clickshowName点我提示校名/button/div
/templatescript
//组件交互相关代码数据、方法等等
//Vue.extend可省略
export default {name:School,data(){return{schoolName:尚硅谷,address:长沙}}, methods: {showName(){alert(this.schoolName)}},
}// export default school 默认暴露
/scriptstyle
/* 组件样式 */
.demo{background-color:pink;
}
/styleapp.vue v 回车 调出架子
templatedivSchool/School/div
/templatescript//引入组件import School from ./School.vueexport default {name:App,components:{School}}
/scriptstyle/stylemain.js
import App from ./App.vuenew Vue({el:#root,template:App/App,components:{App},
})index.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idroot!-- App/App --/div!-- script typetext/javascript src../vue.js/scriptscript typetext/javascript src./main.js/script --
/body
/htmlVue脚手架 是Vue官方提供的标准化开发工具 开发文档 建议先安装node.js 教程 vue安装步骤
npm install -g vue/clivue一定要记得目录别待会找不到
vue create name
选好用2还是3 再按指示操作
npm run serve单词别写错了 emmmmNetwork: unavailable怎么解决…… 等大佬救我…… 解决了这个IP号填错了每个wifi有对应的号点开wifi进入属性看ipv4复制就行 本地存储也跟着解决了加油加油
然后复制链接回车 停止工程可以按两次ctrl c (报错可能是权限问题命令提示符用管理员身份进)
进入文件 调出终端快捷键ctrl ~
├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png
│ │── component: 存放组件
│ │ └── HelloWorld.vue
│ │── App.vue: 汇总所有组件
│ │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
├── package-lock.json包版本控制文件index.html
!DOCTYPE html
html langheadmeta charsetutf-8!-- 针对IE浏览器的一个特殊配置含义是让IE浏览器以最高的渲染级别渲染页面 --meta http-equivX-UA-Compatible contentIEedge!-- 开启移动端的理想视口 --meta nameviewport contentwidthdevice-width,initial-scale1.0 !-- 配置页签图标 -- --link relicon href% BASE_URL %favicon.ico!-- 配置网页标题 --title% htmlWebpackPlugin.options.title %/title/headbody!-- 当浏览器不支持js时noscript中元素就会被渲染 --noscriptstrongWere sorry but % htmlWebpackPlugin.options.title % doesnt work properly without JavaScript enabled. Please enable it to continue./strong/noscript!-- 容器 --div idapp/div!-- built files will be auto injected --/body
/html
main.js
//入口文件
//引入Vue
import Vue from vue
//引入App组件,它是所有组件的父组件
import App from ./App.vue
//关闭vue的生产提示
Vue.config.productionTip false
//创建Vue实例对象---vm
new Vue({render: h h(App),
}).$mount(#app)
render函数 扮演了vue中解析template模板的那块儿代码
ref属性 被用来给元素或子组件注册引用信息id的替代者 应用在html标签上获取的是真实DOM元素应用在组件标签上是组件实例对象vc 使用方式 1、打标识
…或 2、获取this.$refs.xxx templatedivh1 v-textmsg reftitle/h1button clickshowDom refbtn点我输出上方的DOM元素/buttonMySchool111 refschool idschool/MySchool111/div
/templatescript
// 如果组件没写名字那么就用的import后面起的名字
import MySchool111 from ./compoments/MySchool.vue;export default {name: Appppp, //这里如果写名字开发者工具里看的就是这个名字components: {MySchool111},data() {return {msg: 从蓬莱写到仙台哥们儿代码信手拈来}},methods: {showDom() {// console.log(document.getElementById(title)); //这种写法拿不到组件console.log(this.$refs.title); //拿到h1真实DOM元素标签console.log(this.$refs.btn); //拿到button真实DOM元素标签console.log(this.$refs.school); //拿到组件的实例MySchool的vc//如果这么写拿到的是组件template中的内容相当于给根的div加了个idschoolconsole.log(document.getElementById(school));}},
}
/script
props配置 让组件接收外部传过来的数据。 props这个配置项就类似微信转账App那边的标签里传过来这边得接一下子
templatediv!-- 加个单项数据绑定引号里面就不是字符串了就是表达式了 --Student name李四 sex女 :age20/StudentStudent name王五 sex男 :age20 1 /!-- Student namezzy sex男 age20 / --/div
/template
简单接收
props: [name, age, sex]
接收的同时对数据进行类型限制
props: {name: String,age: Number,sex: String
}
接收时同时对数据进行类型校验默认值指定必要性限制
props: {name: {type: String, //name的类型是字符串required: true //name是必须填的},age: {type: Number, //age的类型时数值default: 99 //age可以不填不填就是99},sex: {type: String, //sex的类型是字符串required: true //sex是必须填的}}
Student.vue
templatedivh1{{ msg }}/h1h2学生名称{{ name }}/h2h2学生性别{{ sex }}/h2!-- 实现年龄1 要加v-bind把引号里的东西变成js表达式否则是字符串1--!-- h2学生年龄{{ age*11 }}/h2 强制类型转换一下--h2学生年龄age{{ age 1 }}/h2h2学生年龄myAge{{ myAge 1 }}/h2button clickupdateAge尝试修改收到的年龄/button/div
/templatescript
export default {name: Student,data() {return {msg: 从蓬莱写到仙台哥们儿代码信手拈来,//想要修改age就要用一个新的变量myAge来接收传进来的值//然后页面显示myAge就能实现修改props里的东西是只读的myAge: this.age// name: zzy,// age: 18,// sex: 男}},methods: {updateAge() {// this.age; //会报错但是能改但是不建议改this.myAge;}},//props这个配置项就类似微信转账App那边的标签里传过来这边得接一下子//props中的内容优先级最高先接这边的数据放vc里再去读data若有重复不会覆盖props: [name, age, sex]
}
/script mixin(混入) 功能可以把多个组件共用的配置提取成一个混入对象
Student.vue
templatedivh2 clickshowName学生姓名{{name}}/h2h2学生性别{{sex}}/h2/div
/templatescriptimport {hunhe,hunhe2}from ../mixin
export default {name:Student,data(){return{name:张三,sex:男}}, mixins:[hunhe,hunhe2]
}
/scriptstyle/styleSchool.vue
templatediv h2 clickshowName学校名称{{name}}/h2h2学校地址{{address}}/h2!-- button clickshowName点我提示校名/button --/div
/templatescript
//组件交互相关代码数据、方法等等
//Vue.extend可省略
import {hunhe,hunhe2}from ../mixin
export default {name:School,data(){return{name:尚硅谷,address:长沙}}, mixins:[hunhe,hunhe2]
}// export default school 默认暴露
/scriptstyle/stylemixin.js
export const hunhe {methods: {showName(){alert(this.name)}},mounted() {console.log(你好)},
}
export const hunhe2 {data(){return{x:100,y:200}}
}插件 功能用于增强Vue 本质包含install方法的一个对象install的第一个参数是Vue第二个以后的参数是插件使用者传递的数据。 使用插件Vue.use()
//在main.js中引入插件并起个名儿
import plugins from ./plugins;
//使用插件,要在new Vue之前使用
Vue.use(plugins, 1, 2, 3); 定义插件可以在另一个js中配置插件然后通过import引入到main.js中
const plusobj {install(Vue, x, y, z) {console.log(Vue); //第一个参数是Vue构造函数console.log(x, y, z); //后面的参数是使用者传进来的东西123//1.定义一个全局过滤器Vue.filter(mySlice, function (val) {return val.slice(0, 4); //返回值别忘了});//2.定义一个全局自定义指令,元素默认获取焦点Vue.directive(fbind, {bind(el, binding) {el.value binding.value;},inserted(el) {el.focus();},update(el, binding) {el.value binding.value;}})//3.定义一个全局混合,不用引入就能给所有的vm和vcVue.mixin({data() {return {x: 1,y: 2}}})//4.给Vue的原型对象添加实例方法vm和vc都能用Vue.prototype.hello () { alert(hello!) }}
}export default plusobj;
scoped样式 作用让样式在局部生效防止冲突。 写法
指定使用 less写法
备注 查看webpack所有版本 当前项目文件目录npm view webpack versions 安装less版本7当前项目文件目录npm i less-loader7
第七天
TodoList案例 app.vue
templatediv idrootdiv classtodo-containerdiv classtodo-wrapMyHeader :addTodoaddTodo/MyList :todostodos :checkTodocheckTodo :deleteTododeleteTodo/MyFooter :todostodos :checkAllTodocheckAllTodo :clearAllTodoclearAllTodo//div/div/div
/templatescriptimport MyHeader from ./components/MyHeaderimport MyList from ./components/MyListimport MyFooter from ./components/MyFooter.vueexport default {name:App,components:{MyHeader,MyList,MyFooter},data() {return {//由于todos是MyHeader组件和MyFooter组件都在使用所以放在App中状态提升todos:[{id:001,title:抽烟,done:true},{id:002,title:喝酒,done:false},{id:003,title:开车,done:true}]}},methods: {//添加一个todoaddTodo(todoObj){this.todos.unshift(todoObj)},//勾选or取消勾选一个todocheckTodo(id){this.todos.forEach((todo){if(todo.id id) todo.done !todo.done})},//删除一个tododeleteTodo(id){this.todos this.todos.filter( todo todo.id ! id )},//全选or取消全选checkAllTodo(done){this.todos.forEach((todo){todo.done done})},//清除所有已经完成的todoclearAllTodo(){this.todos this.todos.filter((todo){return !todo.done})}}}
/scriptstyle/*base*/body {background: #fff;}.btn {display: inline-block;padding: 4px 12px;margin-bottom: 0;font-size: 14px;line-height: 20px;text-align: center;vertical-align: middle;cursor: pointer;box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);border-radius: 4px;}.btn-danger {color: #fff;background-color: #da4f49;border: 1px solid #bd362f;}.btn-danger:hover {color: #fff;background-color: #bd362f;}.btn:focus {outline: none;}.todo-container {width: 600px;margin: 0 auto;}.todo-container .todo-wrap {padding: 10px;border: 1px solid #ddd;border-radius: 5px;}
/style
MyFooter.vue
templatediv classtodo-footer v-showtotallabel!-- input typecheckbox :checkedisAll changecheckAll/ --input typecheckbox v-modelisAll//labelspanspan已完成{{doneTotal}}/span / 全部{{total}}/spanbutton classbtn btn-danger clickclearAll清除已完成任务/button/div
/templatescriptexport default {name:MyFooter,props:[todos,checkAllTodo,clearAllTodo],computed: {//总数total(){return this.todos.length},//已完成数doneTotal(){//此处使用reduce方法做条件统计/* const x this.todos.reduce((pre,current){console.log(,pre,current)return pre (current.done ? 1 : 0)},0) *///简写return this.todos.reduce((pre,todo) pre (todo.done ? 1 : 0) ,0)},//控制全选框isAll:{//全选框是否勾选get(){return this.doneTotal this.total this.total 0},//isAll被修改时set被调用set(value){this.checkAllTodo(value)}}},methods: {/* checkAll(e){this.checkAllTodo(e.target.checked)} *///清空所有已完成clearAll(){this.clearAllTodo()}},}
/scriptstyle scoped/*footer*/.todo-footer {height: 40px;line-height: 40px;padding-left: 6px;margin-top: 5px;}.todo-footer label {display: inline-block;margin-right: 20px;cursor: pointer;}.todo-footer label input {position: relative;top: -1px;vertical-align: middle;margin-right: 5px;}.todo-footer button {float: right;margin-top: 5px;}
/styleMyHeader.vue
templatediv classtodo-headerinput typetext placeholder请输入你的任务名称按回车键确认 v-modeltitle keyup.enteradd//div
/templatescriptimport {nanoid} from nanoidexport default {name:MyHeader,//接收从App传递过来的addTodoprops:[addTodo],data() {return {//收集用户输入的titletitle:}},methods: {add(){//校验数据if(!this.title.trim()) return alert(输入不能为空)//将用户的输入包装成一个todo对象const todoObj {id:nanoid(),title:this.title,done:false}//通知App组件去添加一个todo对象this.addTodo(todoObj)//清空输入this.title }},}
/scriptstyle scoped/*header*/.todo-header input {width: 560px;height: 28px;font-size: 14px;border: 1px solid #ccc;border-radius: 4px;padding: 4px 7px;}.todo-header input:focus {outline: none;border-color: rgba(82, 168, 236, 0.8);box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);}
/styleMyItem.vue
templatelilabelinput typecheckbox :checkedtodo.done changehandleCheck(todo.id)/!-- 如下代码也能实现功能但是不太推荐因为有点违反原则因为修改了props --!-- input typecheckbox v-modeltodo.done/ --span{{todo.title}}/span/labelbutton classbtn btn-danger clickhandleDelete(todo.id)删除/button/li
/templatescriptexport default {name:MyItem,//声明接收todo、checkTodo、deleteTodoprops:[todo,checkTodo,deleteTodo],methods: {//勾选or取消勾选handleCheck(id){//通知App组件将对应的todo对象的done值取反this.checkTodo(id)},//删除handleDelete(id){if(confirm(确定删除吗)){//通知App组件将对应的todo对象删除this.deleteTodo(id)}}},}
/scriptstyle scoped/*item*/li {list-style: none;height: 36px;line-height: 36px;padding: 0 5px;border-bottom: 1px solid #ddd;}li label {float: left;cursor: pointer;}li label li input {vertical-align: middle;margin-right: 6px;position: relative;top: -1px;}li button {float: right;display: none;margin-top: 3px;}li:before {content: initial;}li:last-child {border-bottom: none;}li:hover{background-color: #ddd;}li:hover button{display: block;}
/styleMyList.vue
templateul classtodo-mainMyItem v-fortodoObj in todos:keytodoObj.id :todotodoObj :checkTodocheckTodo:deleteTododeleteTodo//ul
/templatescriptimport MyItem from ./MyItemexport default {name:MyList,components:{MyItem},//声明接收App传递过来的数据其中todos是自己用的checkTodo和deleteTodo是给子组件MyItem用的props:[todos,checkTodo,deleteTodo]}
/scriptstyle scoped/*main*/.todo-main {margin-left: 0px;border: 1px solid #ddd;border-radius: 2px;padding: 0px;}.todo-empty {height: 40px;line-height: 40px;border: 1px solid #ddd;border-radius: 2px;padding-left: 5px;margin-top: 10px;}
/style浏览器本地存储 上面Network: unavailable问题没解决下面也会有问题服啦 localStorage.html
!DOCTYPE html
htmlheadmeta charsetUTF-8 /titlelocalStorage/title/headbodyh2localStorage/h2button onclicksaveData()点我保存一个数据/buttonbutton onclickreadData()点我读取一个数据/buttonbutton onclickdeleteData()点我删除一个数据/buttonbutton onclickdeleteAllData()点我清空一个数据/buttonscript typetext/javascript let p {name:张三,age:18}function saveData(){localStorage.setItem(msg,hello!!!)localStorage.setItem(msg2,666)localStorage.setItem(person,JSON.stringify(p))}function readData(){console.log(localStorage.getItem(msg))console.log(localStorage.getItem(msg2))const result localStorage.getItem(person)console.log(JSON.parse(result))// console.log(localStorage.getItem(msg3))}function deleteData(){localStorage.removeItem(msg2)}function deleteAllData(){localStorage.clear()}/script/body
/htmlsessionStorage.html
!DOCTYPE html
htmlheadmeta charsetUTF-8 /titlesessionStorage/title/headbodyh2sessionStorage/h2button onclicksaveData()点我保存一个数据/buttonbutton onclickreadData()点我读取一个数据/buttonbutton onclickdeleteData()点我删除一个数据/buttonbutton onclickdeleteAllData()点我清空一个数据/buttonscript typetext/javascript let p {name:张三,age:18}function saveData(){sessionStorage.setItem(msg,hello!!!)sessionStorage.setItem(msg2,666)sessionStorage.setItem(person,JSON.stringify(p))}function readData(){console.log(sessionStorage.getItem(msg))console.log(sessionStorage.getItem(msg2))const result sessionStorage.getItem(person)console.log(JSON.parse(result))// console.log(sessionStorage.getItem(msg3))}function deleteData(){sessionStorage.removeItem(msg2)}function deleteAllData(){sessionStorage.clear()}/script/body
/html第八天
组件自定义事件 累了毁灭吧
第九天
动画效果 Test.vue
templatedivbutton clickisShow !isShow显示/隐藏/buttontransition namehello appearh1 v-showisShow classcome你好啊/h1/transition!-- transition nameh2 appearh2 v-showisShow尚硅谷/h2/transition --/div
/templatescriptexport default {name:Test,data(){return{isShow:true}},}
/scriptstyle scoped
h1{border-color: orange;
}.hello-enter-active{animation: atguigu 1s linear;
}
.hello-leave-active{animation: atguigu 1s linear reverse;
}keyframes atguigu {from{transform: translateX(-100px);}to{transform: translateX(0px);}
}/style过渡效果 Test2.vue
templatedivbutton clickisShow !isShow显示/隐藏/buttontransition namehello appearh1 v-showisShow你好啊/h1/transition!-- transition nameh2 appearh2 v-showisShow尚硅谷/h2/transition --/div/templatescriptexport default {name:Test,data(){return{isShow:true}},}/scriptstyle scopedh1{border-color: orange;transform: 0.5s linear;}.hello-enter,.hello-leave-to{transform: translateX(-100%);}.hello-enter-active,.hello-leave-active{transform: 0.5s linear;}.hello-enter-to,.hello-leave{transform: translateX(0);}/styleapp.vue
templatediv Test/TestTest2/Test2/div
/templatescript
import Test from ./components/Test.vue
import Test2 from ./components/Test2.vue;export default {name: App,components: {Test,Test2},
}
/scriptstyle/style
样式库 Animate.css 链接位置
安装npm install animate.css引入import ‘animate.css’ Test3.vue
templatedivbutton clickisShow !isShow显示/隐藏/buttontransition-groupappearnameanimate_animated animate_bounceenter-active-classanimate_swingleave-active-classanimate_backOutUph1 v-show!isShow key1你好啊/h1h1 v-showisShow key2尚硅谷/h1/transition-group/div/templatescriptimport animate.cssexport default {name:Test,data(){return{isShow:true}},}/scriptstyle scopedh1{border-color: orange;transform: 0.5s linear;}/style配置代理 引入axios
npm i axiosapp.vue
templatediv
button clickgetStudents获取学生信息/button/div
/templatescript
import axios from axios
export default {name: App,methods:{getStudents(){axios.get(http://localhost:8080/students).then(response {console.log(请求成功了,response.data)},error{console.log(请求失败了,error.message)})}},
}
/scriptstyle/style
vue.config.js
module.exports {pages:{index:{entry:src/main.js,},},lintOnSave:false,devServer: {proxy: http://localhost:5000}
}第二种配置代理 app.vue
templatediv
button clickgetStudents获取学生信息/button
button clickgetCars获取汽车信息/button/div
/templatescript
import axios from axios
export default {name: App,methods:{getStudents(){axios.get(http://localhost:8080/atguigu/students).then(response {console.log(请求成功了,response.data)},error{console.log(请求失败了,error.message)})},getCars(){axios.get(http://localhost:8080/demo/cars).then(response {console.log(请求成功了,response.data)},error{console.log(请求失败了,error.message)})}},
}
/scriptstyle/style
vue.config.js
module.exports {pages:{index:{entry:src/main.js,},},lintOnSave:false,devServer: {proxy: {/atguigu: {target: http://localhost:5000,pathRewrite:{^/atguigu:},/* ws: true, //用于支持websocketchangeOrigin: true */},/demo:{target:http://localHost:5001,pathRewrite:{^/demo:},}/* /foo: {target: other_url} */}}
}github案例 List.vue
templatediv classrow!-- 展示用户列表 --div v-showinfo.users.length classcard v-foruser in info.users :keyuser.logina :hrefuser.html_url target_blankimg :srcuser.avatar_url stylewidth: 100px//ap classcard-text{{user.login}}/p/div!-- 展示欢迎词 --h1 v-showinfo.isFirst欢迎使用/h1!-- 展示加载中 --h1 v-showinfo.isLoading加载中..../h1!-- 展示错误信息 --h1 v-showinfo.errMsg{{info.errMsg}}/h1/div
/templatescriptexport default {name:List,data(){info:{return{isFirst:true,isLoading:false,errMsg:,users:[]}}},mounted(){/* this.$bus.$on(getUsers,(isFirst,isLoading,errMsg,users){console.log(我是List组件,users)this.isFirstisFirstthis.isLoadingisLoadingthis.errMsgerrMsgthis.usersusers}) */this.$bus.$on(updateListDate,(dataObj){this.info{...this.info,...dataObj}console.log(this)})/* this.$bus.$on(getFirst,(isFirst){this.isFirstisFirst}) */},}
/scriptstyle/styleSearch.vue
templatesection classjumbotronh3 classjumbotron-headingSearch Github Users/h3divinput typetext placeholderenter the name you search v-modelkeyWord/nbsp;button clicksearchUsersSearch/button/div/section
/templatescriptimport axios from axiosexport default {name:Search,data() {return {keyWord:}},methods: {searchUsers(){//请求前更新List的数据this.$bus.$emit(updateListData,{isLoading:true,errMsg:,users:[],isFirst:false})axios.get(https://api.github.com/search/users?q${this.keyWord}).then(response {console.log(请求成功了)//请求成功后更新List的数据this.$bus.$emit(updateListData,{isLoading:false,errMsg:,users:response.data.items})},error {//请求后更新List的数据this.$bus.$emit(updateListData,{isLoading:false,errMsg:error.message,users:[]})})}},}
/script
vue-resource 安装
npm i vue-resource这个文档太长了换个新文档写了
