第一天学习：
±–±-------------------------------------------------------------------+
| * | |
| * | |
| 代 | |
| 码 | |
| 块 | |
| * | |
| * | |
±–±-------------------------------------------------------------------+
| | <!DOCTYPE html>\ |
| | <html lang=“en”>\ |
| | <head>\ |
| | <meta charset=“UTF-8”>\ |
| | <meta http-equiv=“X-UA-Compatible” content=“IE=edge”>\ |
| | <meta name |
| | =“viewport” content=“width=device-width, initial-scale=1.0”>\ |
| | <title>vue学习第一天</title>\ |
| | \ |
| | </head>\ |
| | <body>\ |
| | <div class=“demo”> |
| | |
| | </div>\ |
| | <div class=“app”>{{name}}</div>\ |
| | <script src=‘…/vue.js’></script>\ |
| | <script>\ |
| | var div = document.querySelector(‘.demo’);\ |
| | var str = ‘kakaxi’;\ |
| | div.innerHTML = str;\ |
| | new Vue({\ |
| | el:‘.app’,\ |
| | data:{\ |
| | name:‘kkk’\ |
| | }\ |
| | });\ |
| | </script>\ |
| | </body>\ |
| | </html> |
±–±-------------------------------------------------------------------+
mvvm开发模式
创建html文件,<script
scr=‘…/vue.js’></script>。引入vue.js的包,vue.js
的包可以在官网上进行下载,下载之后将vue.js放在html文件上级目录。
mvc开发模式：model（模型）,view（视图）,controller（控制），
通过控制层把模型展示到视图中，其中
new Vue({
el:‘.app’,
data:{
name:‘kkk’
}
});
为控制。view 对应着el: ‘.app’ el为挂载点，其中值为相应选择器名字
。model为data:{}
控制层将模型给视图。data中可以存放各种变量,
"{{}}"表示对象，里面存放的是对象也就是data
中的变量。mvvm学习
第二天学习
代码块
\<!DOCTYPE html\>\
\<html lang=\"en\"\>\
\<head\>\
\<meta charset=\"UTF-8\"\>\
\<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\>\
\<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\>\
\<title\>vue学习第二天\</title\>\
\<style\>\
.div{\
width: 200px;\
height: 200px;\
background: green;\
}\
.p{\
width: 100px;\
height: 100px;\
background: grey;\
}\
.d{\
width: 200px;\
height: 200px;\
background: greenyellow;\
}\
\</style\>\
\</head\>\
\<body\>\
\
\<div id=\"a\"\> \
\<button @click=\"add()\" \>点我\</button\>\
\<span\>{{age}}\</span\>\
\<span v-html=\"tag\" id=\"b\"\>{{tag}} \
\</span\>\
\<span class=\"c\"\>{{age.toString().split(\'\').join(\'-\')}}\</span\>\
\<a :href=\"href\"\>百度\</a\>\
\<span :class=\"true?\'yes\':\'no\'\"\>三目表达式\</span\>\
\<span :class=\"bol?\'y\':\'n\'\"\>三目表达式2\</span\>\
\<span :\[attr\]=\"action\"\>动态属性绑定\</span\>\
\<p v-on:click.once=\"handle\"\>事件修饰符语法是一个.\</p\>\
\<button v-on:click=\"add(\'name\',\$event)\"\>加一次\</button\>\
\<input type=\"text\" name=\"\" id=\"\" :value=\"age\"\>\
\<button @click=\"sub\"\>减一次\</button\>\
\<div class=\"div\" @click=\"divClick\"\>\
\<p class=\"p\" @click.stop=\"pClick\"\>.stop阻止事件冒泡\</p\>\
\<a :href=\"href\" @click.prevent.stop=\"aClick\"\>.prevent阻止默认事件\</a\>\
\</div\>\
\<h2 v-if=\"hot\"\>文章\</h2\>\
\<h2 v-else\>啦啦啦,if和else中不能放其他的标签否则将会找不到if标签所在的标签\</h2\>\
\<button @click=\"change\"\>点我\</button\>\
\<template v-if=\"hot\"\>\
\<p\>不是原生标签，可以作为一个整体,控制整个大块\</p\>\
\<ul\>\
\<li\>111111111111\</li\>\
\<li\>222222222222\</li\>\
\<li\>333333333333\</li\>\
\<li\>444444444444\</li\>\
\<li\>555555555555\</li\>\
\</ul\>\
\</template\>\
\<template v-if=\"loginType\"\>\
\<label for=\"\"\>用户名\</label\>\
\<input type=\"text\" placeholder=\"请输入您的用户名\"\>\
\</template\>\
\<template v-else\>\
\<label for=\"\"\>邮箱\</label\>\
\<input type=\"text\" placeholder=\"请输入您的邮箱\"\>\
\</template\>\
\<button @click=\"changeType\"\>切换登录方式\</button\>\
\<button @click=\"toggle\"\>{{show?\"关闭显示\":\"打开显示\"}}\</button\>\
\<div class=\"d\" v-show=\"show\"\>\</div\>\
\<!\-- v-show不支持template标签，\
v-if支持\
v-if 不会渲染元素 \
v-show 会渲染元素\
如何选择：\
1.从渲染元素的角度来说，v-if比v-show性能好，如果条件很少变化就用v-if\
2.如果从显示与隐藏的角度来说，v-show比v-if好，如果要频繁切换条件就用v-show\
\--\>\
\<div\>\
\<ul\>\
\<li v-for=\"(color,index) in colors\"\>\
{{color}}{{index}}\</li\>\
\</ul\>\
\<ul\>\
\<li v-for=\"(peo,index) in family\"\>{{[peo.name](http://peo.name)}}\</li\>\
\</ul\>\
\<ul\>\
\<li v-for=\"(item,index) in people\"\>{{item}}\</li\>\
\</ul\>\
\<ul\>\
\<li v-for=\"(item,key,index) in people\"\>属性值：{{item}} 属性名{{key}} 索引值{{index}}\</li\>\
\</ul\>\
\<ul\>\
\<li v-for=\"item in arr\" \>{{[item.name](http://item.name)}}\
\
\</li\>\
\</ul\>\
\</div\>\
\
\</div\>\
\
\<script src=\"../vue.js\"\>\</script\>\
\<script\>\
const arr = \[\'html\',\'css\',\'js\'\];\
console.log(arr);\
const vm = new Vue({\
el:\'#a\',\
data(){\
return{\
name:\'kai\',\
age:18,\
wechart:\'kkkk\',\
tag:\'\<h1\>v-html学习\</h1\>\',\
href:\'[www.baidu.com](http://www.baidu.com)\',\
bol:false, \
attr:\'id\',\
action:\'action\', \
hot:true,\
loginType:true,\
show:false,\
colors: \[\'green\',\'red\',\'blue\'\],\
family:\[\
{name:\'张三\',age:40},\
{name:\'李四\',age:30},\
{name:\'王二麻子\',age:25},\
\],\
people:{\
name:\'kakaxi\',\
age:19,\
like:\'eat\',\
},\
\
}\
},\
computed: {\
arr(){\
return this.family.filter(item =\> item.age\>25);\
}\
},\
methods: {\
add(msg,ev){\
this.age++;\
console.log(ev);\
console.log(msg);\
},\
handle(){\
console.log(\"只能点一次\");\
},\
sub(){\
this.age\--;\
},\
divClick(){\
console.log(\"div点击了\");\
},\
pClick(){\
console.log(\"p点击了\");\
},\
aClick(){\
console.log(\"a标签点击了\");\
},\
change(){\
this.hot=!this.hot;\
},\
changeType(){\
this.loginType=!this.loginType;\
},\
toggle(){\
this.show=!this.show;\
console.log(this.show)\
}\
}\
\
});\
var button = document.querySelector(\'button\');\
console.log(button.innerHTML);\
console.log(\
vm.constructor ===Vue,\
vm instanceof Vue,\
);\
// vm.arr=vm.family.filter(item =\> item.age\>25);\
// console.log(vm.arr);\
\</script\>\
\</body\>\
\</html\>
vue基础指令学习
插值表达式
插值表达式就是诸如{{
}}就是插值表达式，里面可以存放data中的变量，也可以进行加减乘除的操作，和data变量自带的toStirng,split,join等操作。
v-on指令学习
示例 ：v-on:click=“” 绑定事件所触发的函数，简写形式@click=“”。@click
=add()，如果带括号则可以通过括号向methods中的add函数中传入括号中的值。
v-on:click=“add(‘name’,$event)”，其中name为传入add中的值，$event为所触发的事件
**事件修饰符:**在@click后面加上.once时，@click.once则表示当前点击事件只能触发一次，能使用事件修饰符的只有v-on,v-bind,v-solt这三个指令。常用的事件修饰符有.stop
.prevent
.stop 阻止事件冒泡，则表示子标签事件触发时不会触发父标签。
.prevent
则表示会阻止标签的默认事件。比如a标签的跳转，当加上这个时那么就不会出发原有的跳转。
v-bind指令学习
示例：v-bind:class=“a”,意思为标签中的class属性绑定值，等同于
class=“a”,
所以v-bind指令的作用就是为标签中的属性绑定值，v-bind简写形式为冒号-":"结合三木表达式使用时：
:class=" ture?‘yes’:‘no’
",其中true为布尔值，可以用data中布尔变量填充，当为真时class值为yes，反之为no。**动态属性绑定：**使用[
],结合v-bind指令使用时，:[action ]=“value”,
其中action可以是标签所带的属性，比如当action的值为id时那么此时就等同于:clsss=“value”,value为class的值。
v-if+v-else指令学习
示例：v-if=“bol”,其中bol为布尔值,当bol为true时，则v-if所在标签显示，反之不显示。当有在v-if标签行下存在v-else的标签行时，v-if为true时v-else不执行，反之亦然。尤其注意当使用
v-else时，v-if和v-else中间不允许存在任何同级标签元素。
template标签学习
template是vue自带的标签，也是常用的块状元素，可以很方标的控制一个大块。
v-show指令学习
v-show使用方法和v-if差不多，但是也存在差别：
v-show不支持template标签，v-if支持template标签，v-if 不会渲染元素， v-show 会渲染元素
如何选择：
1.从渲染元素的角度来说，v-if比v-show性能好，如果条件很少变化就用v-if
2.如果从显示与隐藏的角度来说，v-show比v-if好，如果要频繁切换条件就用v-show
v-for指令学习
v-for就是循环标签元素的指令。格式有三种 v-for ="item in items
"这是最简单的一种，其中items为所要循环的数组集合名字，item
为items数组中的每一项元素，可以随意取名，in表示在其中，为固定写法。
items可以是普通数组，也可以是装有对象的数组，
items也可以是普通的数字，当items为常量时，整个循环则表示从1开始循环到数字items结束。v-for的第二种格式
v-for =“(item,index) in items” ,与前一种格式比起来
多了一个index，index表示索引值,index的值从0开始到items的长度。v-for最后一种格式v-for=“(item,key,index)
in
items”，与前一种格式比起来多了一个key值，其中item为属性值，key为属性名，index为索引值。
这种格式针对于对象数组使用。当有条件判断的需求和循环的需求同时进行时。使用v-if和v-for时需要注意，
比如现在有一个对象集合：
family:[
{name:‘张三’,age:40},
{name:‘李四’,age:30},
{name:‘王二麻子’,age:25},
],
现在需要循环得到age大于25的name值
常规写法是 v-for=“peo in family” v-if=“peo.age>25” 将 v-for
和v-if同时写在标签中
，但是v-for的优先级大于v-if，那么就会产生一个问题，v-for会将family集合中所有的对象全部输出，然后再由v-if来进行判断是否符合要求，
当数据量过大时，会造成性能的不足。这里可以有两个解决方。第一个方法是，在data中创建一个空的数组对象arr，vm.arr
= vm.family.filter(item => item.age>25) ,将得到的arr放入 v-for=“item
in arr” 这样的到的arr就是一个所有age
大于25的对象数组。其中vm
为const产生的构造函数的对象,vm就是一个挂载点，data中所有的对象都可以由vm.对象名
得到。filter为过滤器,可以过滤掉括号中不符合条件的对象，
item为family集合中的每一个对象。
const vm = new Vue({
el=‘’
data(){
return{
}
}
})
第二个方法
使用computed，这个方法更加规范一些，格式是
computed: {
arr(){
return this.family.filter(item => item.age>25);
}
}
这里的返回值就是已经过滤的对象数组最后在标签中同样是将arr方法加到v-for中 v-for=“item
in arr”，由此则可以弥补v-for和v-if一起使用时产生的效率问题
第三天学习
±–±-------------------------------------------------------------------+
| * | |
| * | |
| 代 | |
| 码 | |
| 块 | |
| * | |
| * | |
±–±-------------------------------------------------------------------+
| | <!DOCTYPE html>\ |
| | <html lang=“en”> |
| | |
| | <head>\ |
| | <meta charset=“UTF-8”>\ |
| | <meta http-equiv=“X-UA-Compatible” content=“IE=edge”>\ |
| | <meta name |
| | =“viewport” content=“width=device-width, initial-scale=1.0”>\ |
| | <title>vue学习第三天</title>\ |
| | <style>\ |
| | .green{\ |
| | color:green;\ |
| | width: 200px;\ |
| | height: 200px;\ |
| | border: 1px solid black;\ |
| | }\ |
| | .red{\ |
| | color: red;\ |
| | }\ |
| | .active{\ |
| | background: pink;\ |
| | color: purple;\ |
| | }\ |
| | .align{\ |
| | text-align: right;\ |
| | }\ |
| | .div{\ |
| | width: 200px;\ |
| | height: 200px;\ |
| | background: rosybrown;\ |
| | }\ |
| | .fontStyle{\ |
| | color: sienna;\ |
| | font-size: 50px;\ |
| | }\ |
| | .borderStyle{\ |
| | border: 5px solid black;\ |
| | }\ |
| | </style>\ |
| | </head>\ |
| | \ |
| | <body>\ |
| | <div class=“app”>\ |
| | <ul>\ |
| | |
| | <li v-for=“(item,index) in family” :key=“[item.name](http |
| | 😕/item.name)” >{{item.name}}…{{index}}\ |
| | <input type=“text” :value=“item.age”>\ |
| | <button @click=“moveDown(index)”>\ |
| | {{indexfamily.length-1?“上移”:“下移”}}</button>\ |
| | </li>\ |
| | </ul>\ |
| | <ul>\ |
| | <li v-for=“(item,index) in family”>\ |
| | |
| | <label for=“”>{{item.name}}</label>\ |
| | <input t |
| | ype=“text” v-model=“msg[index]” placeholder=“修改年龄” >\ |
| | < |
| | button @click=“update(msg[index],index)”>修改年龄</button>\ |
| | </li>\ |
| | </ul>\ |
| | <button @click=“click1”>点我1</button>\ |
| | <button @click=“click2”>点我2</button>\ |
| | <button @click.once=“click3”>点我3</button>\ |
| | <button @click.once=“click4”>点我4</button>\ |
| | <button @click.once=“set”>点我修改</button>\ |
| | <button @click=“delete1”>点我删除</button>\ |
| | <p>{{name.jishu}}, |
| | ,{{name.value}}</p><button @click=“change”>点我5</button>\ |
| | <button @click=“delete2”>点我删除2</button>\ |
| | <!-- <p> |
| | {{name}}</p><button @click=“change2”>点我6</button> -->\ |
| | <div :class=“cl” @click=“cl=‘red’”>\ |
| | 学习vue,点我\ |
| | </div>\ |
| | |
| | <div :class=“{active:ac,align:al}” @click=“ac=!ac,al=!al”>\ |
| | 对象语法 |
| | 绑定class,对象里的key是class,value使用布尔值决定class是否能够加上\ |
| | </div>\ |
| | <div :class=“class1” @cl |
| | ick=“class1.align=!class1.align,class1.active=!class1.active”>\ |
| | 对象语法绑定class,值是对象名,对象里放的就是class\ |
| | </div>\ |
| | <button @click=“dv=!dv”>点我切换</button>\ |
| | <div :class=“{div:dv}”></div>\ |
| | <div :class=“classObj2” @click=“al=!al,ac=!ac”>\ |
| | 对象语法绑定class，值放在计算属性里\ |
| | </div>\ |
| | <h2 :class=“[fs, |
| | bs]”>数组语法绑定,数组里放的是key,key的value的值是class</h2>\ |
| | <h2 :class=“[ac?fs: |
| | bs]”>数组语法绑定,数组里放的是key,key的value的值是class</h2>\ |
| | <h2 :class=“[{active:al}, |
| | bs]”>数组语法绑定,数组里放的是key,key的value的值是class</h2>\ |
| | <h2 :sty |
| | le=“{color:ftcolor,fontSize:ftsize}”>学习vue一周速成,color为sty |
| | le中的color属性,ftcolor对象的值就是color的值,同理font-size</h2>\ |
| | <h2 :style=“styleObj”>学习vue一周速成,简写格式</h2>\ |
| | </div>\ |
| | <script src=“…/vue.js”></script>\ |
| | <script>\ |
| | // 就地更新策略\ |
| | const vm = new Vue({\ |
| | el: ‘.app’,\ |
| | data() {\ |
| | return {\ |
| | family: [\ |
| | { name: ‘张三’, age: 18 },\ |
| | { name: ‘李四’, age: 22 },\ |
| | { name: ‘王五’, age: 29 },\ |
| | { name: ‘赵六’, age: 23 },\ |
| | ],\ |
| | msg:[\ |
| | 0,0,0,0\ |
| | ],\ |
| | name:{\ |
| | jishu:“vue”,\ |
| | value:2,\ |
| | },\ |
| | cl:‘green’,\ |
| | ac:false,\ |
| | al:true,\ |
| | class1:{\ |
| | active:false,\ |
| | align:true\ |
| | },\ |
| | dv:true,\ |
| | fs:‘fontStyle’,\ |
| | bs:‘borderStyle’,\ |
| | ftcolor:‘red’,\ |
| | ftsize:‘50px’,\ |
| | styleObj:{\ |
| | color:‘red’,\ |
| | fontSize:‘50px’\ |
| | },\ |
| | } \ |
| | },\ |
| | methods: {\ |
| | moveDown(index) { \ |
| | const dataSource = this.family.splice(index,1);\ |
| | if(indexthis.family.length){ \ |
| | this.family.splice(index-1,0,…dataSource);\ |
| | }else{\ |
| | console.log(index); \ |
| | this.family.splice(index+1,0,…dataSource);\ |
| | }\ |
| | \ |
| | },\ |
| | \ |
| | update(msg,index){\ |
| | // console.log(index);\ |
| | // console.log(this.family[index].age);\ |
| | this.family[index].age=msg;\ |
| | },\ |
| | click1(){\ |
| | this.family[0]={name:‘卡卡西’,age:18};\ |
| | },\ |
| | click2(){\ |
| | this.family[0].name=‘卡卡西2’;\ |
| | },\ |
| | click3(){ \ |
| | |
| | this.family[this.family.length]={name:‘卡卡西3’,age:18};\ |
| | },\ |
| | click4(){\ |
| | \ |
| | this.family.push({name:‘卡卡西4’,age:18});\ |
| | },\ |
| | set(){\ |
| | this.$set(this.family,2,{name:‘卡卡西5’,age:18});\ |
| | },\ |
| | delete1(){\ |
| | this.$delete(this.family,this.family.length–);\ |
| | },\ |
| | change(){\ |
| | this.$set(this.name,‘jishu’,‘js’);\ |
| | },\ |
| | delete2(){\ |
| | this.$delete(this.name,‘value’);\ |
| | },\ |
| | // change2(){\ |
| | // this.$set(this.name,0,{\ |
| | // jishu:“js”,\ |
| | // value:3,\ |
| | // });\ |
| | // },\ |
| | }, \ |
| | computed: {\ |
| | classObj2(){\ |
| | return{\ |
| | active:!this.ac,\ |
| | align:this.al||false\ |
| | }\ |
| | }\ |
| | }\ |
| | \ |
| | })\ |
| | </script>\ |
| | </body>\ |
| | \ |
| | </html> |
±–±-------------------------------------------------------------------+
vue常用选项对象，$set，$delete学习
splice用法，截取功能
const dataSource = this.family.splice(index,1);
index是family对象数组中开始截取的索引位置,1代表截取的个数。
this.family.splice(index-1,0,…dataSource);
splice中存在三个对象时，第一个还是开始的索引位置，第二个0代表了替换功能，截取零个就代表从开始处向后插入一个值，
…三个点号是扩展符，因为在控制台输出的是_ob_server的数据类型,observer是监听器可以随时监听data中数据发生的变化.
所以要使用扩展符才能得到普通的对象。
<div :class=“{active:ac,align:al}” @click=“ac=!ac,al=!al”>
对象语法绑定class,对象里的key是class,value使用布尔值决定class是否能够加上
</div>
<div :class=“class1” @click=“class1.align=!class1.align,class1.active=!class1.active”>
对象语法绑定class,值是对象名,对象里放的就是class
</div>
<button @click=“dv=!dv”>点我切换</button>
<div :class=“{div:dv}”></div>
<div :class=“classObj2” @click=“al=!al,ac=!ac”>
对象语法绑定class，值放在计算属性里
</div>
<h2 :class=“[fs,bs]”>数组语法绑定,数组里放的是key,key的value的值是class</h2>
<h2 :class=“[ac?fs:bs]”>数组语法绑定,数组里放的是key,key的value的值是class</h2>
<h2 :class=“[{active:al},bs]”>数组语法绑定,数组里放的是key,key的value的值是class</h2>
<h2 :style=“{color:ftcolor,fontSize:ftsize}”>学习vue一周速成,color为style中的color属性,ftcolor对象的值就是color的值,同理font-size</h2>
<h2 :style=“styleObj”>学习vue一周速成,简写格式</h2>
$set,$delete，对对象使用的方法
$set，更新对象中的值，格式为
this.$set(this.family,2,{name:‘卡卡西5’,age:18});
this.family为data中对象,2就是对象数组的索引值,最后的对象就更新的数据
$delete，删除对象中的值，格式为
有两种格式
this.$delete(this.family,this.family.length–);
括号中第一个值代表data中的对象,第二个代表对象数组要删除的索引的位置
第二种格式：
this.$delete(this.name,‘value’);
括号中第一个值代表data中的对象,第二个代表对象数组要删除的对象的名字
当属性的值需要用计算来进行判断时,可以使用computed语法，更加简洁方便。
±–±--------------------------------------------------------------------+
| * | 选项卡功能代码 |
| * | |
| 代 | |
| 码 | |
| 块 | |
| * | |
| * | |
±–±--------------------------------------------------------------------+
| | <!DOCTYPE html>\ |
| | <html lang=“en”>\ |
| | <head>\ |
| | <meta charset=“UTF-8”>\ |
| | <meta http-equiv=“X-UA-Compatible” content=“IE=edge”>\ |
| | <meta nam |
| | e=“viewport” content=“width=device-width, initial-scale=1.0”>\ |
| | <title>vue学习第三天,类目筛选功能</title>\ |
| | <style>\ |
| | #app{\ |
| | margin: 0px;\ |
| | height: 1300px;\ |
| | width: 100%;\ |
| | background: rgb(219, 219, 145);\ |
| | }\ |
| | .a{\ |
| | background: rgb(240, 234, 234);\ |
| | float: left;\ |
| | margin-left: 30%;\ |
| | height: 350px;\ |
| | width: 1200px;\ |
| | margin-top: 50px;\ |
| | box-shadow: rgb(37, 36, 36) 10px 10px 50px 5px;\ |
| | border-radius: 5px;\ |
| | position: relative;\ |
| | }\ |
| | .b{\ |
| | margin-top: 20px;\ |
| | width: 1000px;\ |
| | height: 350px;\ |
| | float: left;\ |
| | }\ |
| | .b1{\ |
| | float: left;\ |
| | list-style: none;\ |
| | width: 1000px;\ |
| | height: 60px;\ |
| | }\ |
| | .b11{\ |
| | \ |
| | list-style: none;\ |
| | width: 1000px;\ |
| | height: 60px;\ |
| | border-bottom: 1px solid rgb(235, 224, 224);\ |
| | }\ |
| | .b111{\ |
| | float: left;\ |
| | list-style: none;\ |
| | width: auto;\ |
| | height: 60px;\ |
| | margin-left: 30px;\ |
| | text-align: center;\ |
| | line-height: 60px;\ |
| | }\ |
| | .title{\ |
| | position: absolute;\ |
| | left: 50px;\ |
| | margin-top: 18px;\ |
| | }\ |
| | .b2{\ |
| | margin-top: 30px;\ |
| | float: left;\ |
| | list-style: none;\ |
| | width: 1000px;\ |
| | height: 60px;\ |
| | }\ |
| | .b2 span{\ |
| | float: left;\ |
| | font-size: 20px;\ |
| | }\ |
| | .b2 h3{\ |
| | float: left;\ |
| | margin-top: 1px;\ |
| | margin-left: 15px;\ |
| | }\ |
| | .b2 ul li {\ |
| | list-style: none;\ |
| | }\ |
| | .b21{\ |
| | float: left;\ |
| | width: auto;\ |
| | height: 60px;\ |
| | }\ |
| | .b211{\ |
| | float: left;\ |
| | height: 35px;\ |
| | line-height: 35px;\ |
| | width: auto;\ |
| | margin-left: 5px;\ |
| | border: 2px solid rgb(206, 80, 80);\ |
| | }\ |
| | .b211 span{\ |
| | margin-left: 2px;\ |
| | float: right;\ |
| | margin-top: 2px;\ |
| | background: red;\ |
| | height: 30px;\ |
| | height: 30px;\ |
| | color: black;\ |
| | font-size: 30px;\ |
| | line-height:35px ;\ |
| | }\ |
| | .b2111{ |
| | |
| | }\ |
| | </style>\ |
| | </head>\ |
| | <body>\ |
| | <div id=“app”>\ |
| | <div class=“a”>\ |
| | <ul class=“b”>\ |
| | <li v-for=“(item,index1) in goodList” class=“b1”>\ |
| | <span class=“title”>{{item.title}}</span>\ |
| | \ |
| | <ul class=“b11”>\ |
| | \ |
| | <li v-for=“(item,index2) in item.list” c |
| | lass=“b111” @click=“selectKind(item,index1)”>{{item}}</li>\ |
| | </ul>\ |
| | </li>\ |
| | <li class=“b2”>\ |
| | <span>已选条件:\ |
| | </span>\ |
| | <h3 v-if=“bol”>没有选择的条件</h3>\ |
| | <ul class=“b21”>\ |
| | |
| | <li v-for=“(item,index) in selectGoods” class=“b211”> \ |
| | {{item}}\ |
| | |
| | <span class=“b2111” @click=“delete1(index)”>×</span>\ |
| | </li>\ |
| | </ul>\ |
| | </li> \ |
| | </ul>\ |
| | </ul>\ |
| | \ |
| | </div>\ |
| | </div>\ |
| | <script src=“…/vue.js”></script>\ |
| | <script>\ |
| | \ |
| | const vm = new Vue({\ |
| | el:‘#app’,\ |
| | data(){\ |
| | return{\ |
| | arr:[\ |
| | 1,2,3,4\ |
| | ],\ |
| | \ |
| | selectGoods:{\ |
| | // “0”:‘’,\ |
| | // “1”:‘3000-3999’,\ |
| | // “2”:‘11英寸’\ |
| | },\ |
| | goodList:[\ |
| | {title:‘品牌’,\ |
| | list:[‘惠普’,‘联想’ |
| | ,‘戴尔’,‘三星’,‘宏碁’,‘苹果’,‘神州’,‘华硕’,‘方正’],\ |
| | id:1,\ |
| | },\ |
| | {\ |
| | title:‘价格’,\ |
| | |
| | list:[‘3000-3999’,‘4000-4999’,‘5000-5999’,‘6000 |
| | -6999’,‘7000-7999’,‘8000-8999’,‘9000-9999’,‘10000以上’],\ |
| | id:2,\ |
| | },\ |
| | {\ |
| | title:‘尺寸’,\ |
| | list:[‘8.9英寸及以下’,’ |
| | 11英寸’,‘12英寸’,‘13英寸’,‘14英寸’,‘15英寸’,‘16英寸’],\ |
| | id:3,\ |
| | },\ |
| | {\ |
| | title:‘显卡’,\ |
| | list:[‘gtx960’,‘gtx1050’,‘gtx106 |
| | 0’,‘gtx1070’,‘gtx1080’,‘gtx2060’,‘gtx2070’,‘gtx3090’],\ |
| | id:4,\ |
| | }\ |
| | ],\ |
| | \ |
| | }\ |
| | },\ |
| | \ |
| | computed: {\ |
| | bol(){\ |
| | var key = Object.keys(this.selectGoods);\ |
| | var keyLenght = key.length;\ |
| | return keyLenght>0?false:true;\ |
| | }\ |
| | },\ |
| | methods: {\ |
| | selectKind(item,index1){\ |
| | this.$set(this.selectGoods,index1,item);\ |
| | console.log(item);\ |
| | },\ |
| | delete1(index){\ |
| | console.log(index);\ |
| | console.log(this.$delete(this.selectGoods,index));\ |
| | \ |
| | }\ |
| | },\ |
| | });\ |
| | </script>\ |
| | </body>\ |
| | </html> |
±–±--------------------------------------------------------------------+
选项卡功能代码逻辑
使用双重嵌套for循环的方法的到goodList中的每一项值，
对不同的li标签添加点击事件,一个选择所用的事件，一个删除所选内容的方法,
此事件的关键在于在goodList中每一个的对象都加上了不同的id值，以方便区分是第几个对象，
在创建selectGoods{
}对象时存入的便是一下格式,通过唯一的id值，使对象中的值得到更新而不会出现重复。
// “0”:‘惠普’,
// “1”:‘3000-3999’,
// “2”:‘11英寸’
最后只需要通过简单的点击事件将数据输出在页面上即可。
结合前面几天所学知识所做出的分类的选择目录。结合css和vue使得页面更加简洁。
第四天学习
±–±-------------------------------------------------------------------+
| * | 相应式数据学习 |
| * | |
| 代 | |
| 码 | |
| 块 | |
| * | |
| * | |
±–±-------------------------------------------------------------------+
| | <!DOCTYPE html>\ |
| | <html lang=“en”>\ |
| | <head>\ |
| | <meta charset=“UTF-8”>\ |
| | <meta http-equiv=“X-UA-Compatible” content=“IE=edge”>\ |
| | <meta name |
| | =“viewport” content=“width=device-width, initial-scale=1.0”>\ |
| | <title>学习vue第四天</title>\ |
| | </head>\ |
| | <body>\ |
| | <div class=“app”>\ |
| | <!\ |
| | – 不使用v-model双向绑定时，使用普通办法对value进行双向绑定 -->\ |
| | <input type |
| | =“text” :value=“msg” id=“msg1” @input=“update($event)”>\ |
| | <br>\ |
| | <label for=“msg1”>{{msg}}</label>\ |
| | <br>\ |
| | <hr>\ |
| | <!-- v-model使用 |
| | v-model只能对input,select,textarea,components,这四个标签使用–>\ |
| | <input type=“text” v-model=“msg1” id=“msg2”>\ |
| | <br>\ |
| | <label for=“msg2”>v-model对值绑定:{{msg1}}</label>\ |
| | <br>\ |
| | <hr>\ |
| | <!-- v-model -->\ |
| | <input type=“checkbox” v-model=“checkbox”>\ |
| | <label for=“”>{{checkbox}}</label>\ |
| | <input type |
| | =“checkbox” v-model=“checkedNames” id=“high” value=“高”>\ |
| | <label for=“high”>高</label>\ |
| | <input type |
| | =“checkbox” id=“wght” value=“重” v-model=“checkedNames”>\ |
| | <label for=“wght”>重</label>\ |
| | <input type=“c |
| | heckbox” id=“handsome” value=“帅” v-model=“checkedNames”>\ |
| | <label for=“handsome”>帅</label>\ |
| | <p v-for=“(item,index) in checkedNames”>\ |
| | 你的人设是:{{item}}\ |
| | </p>\ |
| | |
| | <input type=“radio” id=“man” value=“男” v-model=“sex”>\ |
| | <label for=“man”>男</label>\ |
| | \ |
| | <input type=“radio” id=“woman” value=“女” v-model=“sex”>\ |
| | <label for=“woman”>女</label>\ |
| | <p>你的性别:{{sex}}</p>\ |
| | |
| | <!-- v-model 在select标签身上使用,使用multiple时变成多选–>\ |
| | <select id=“” v-model=“citys” multiple>\ |
| | <option value=“上海”>上海</option>\ |
| | <option value=“北京”>北京</option>\ |
| | <option value=“南京”>南京</option>\ |
| | </select>\ |
| | <p>你所选城市为{{citys}}</p>\ |
| | <br>\ |
| | <hr>\ |
| | <input type=“text” id=“lazy” v-model.lazy=“lazy”>\ |
| | <label for=“lazy”>{{lazy}}</label>\ |
| | <br>\ |
| | |
| | <input type=“text” id=“trim” v-model.lazy.trim=“trim”>\ |
| | <label for=“trim”>{{trim}}</label>\ |
| | <br>\ |
| | |
| | <input type=“text” id=“number” v-model.number=“number”>\ |
| | <label for=“number”>限制数字输入:{{number}}</label>\ |
| | <br><hr>\ |
| | <!-- 计算属性 -->\ |
| | \ |
| | <p>{{height.toString().split(‘’).reverse().join(‘-’)}}</p>\ |
| | <p>方法:{{method()}}</p>\ |
| | <p>方法:{{method()}}</p>\ |
| | <p>方法:{{method()}}</p>\ |
| | <p>方法:{{computed1}}computed1</p>\ |
| | <p>方法:{{computed1}}computed1</p>\ |
| | <p>方法:{{computed1}}computed1</p>\ |
| | <p>\ |
| | {{number}}\ |
| | <button @click=“number++”>加一下</button>\ |
| | </p>\ |
| | <!-- <p>{{show()}}</p>\ |
| | <p>{{getName()}}</p>\ |
| | <p>{{fullName}}</p> -->\ |
| | <p>{{fristName+lastName}}</p>\ |
| | <p>{{author}}</p>\ |
| | <button @click=“change”>变</button>\ |
| | <p>{{fName1}}</p>\ |
| | <p>{{fullName1}}</p>\ |
| | <p>{{fullName1}}</p>\ |
| | <p>{{demo}}</p>\ |
| | <p>{{allName}}</p>\ |
| | </div>\ |
| | <script src=“…/vue.js”></script>\ |
| | <script>\ |
| | const vm = new Vue({\ |
| | el:“.app”,\ |
| | data(){\ |
| | return{\ |
| | msg:“这是初始值”,\ |
| | msg1:“v-model方法绑定”,\ |
| | checkbox:false,\ |
| | checkedNames:[],\ |
| | sex:“”,\ |
| | citys:[“北京”],\ |
| | lazy:“懒加载”,\ |
| | trim:“去空格”,\ |
| | number:0,\ |
| | height:180,\ |
| | fristName:“fn”,\ |
| | lastName:“ln”,\ |
| | author:{\ |
| | name:“wu”,\ |
| | age:23,\ |
| | technology:{\ |
| | sing:“一般”,\ |
| | drive:“不会”,\ |
| | },\ |
| | },\ |
| | fName:“尼古拉”,\ |
| | lName:“赵四”,\ |
| | fullName1:“尼古拉 赵四”,\ |
| | case:“kile”,\ |
| | allName:“”,\ |
| | }\ |
| | },\ |
| | methods: {\ |
| | update(ev){\ |
| | // 使用普通办法对value进行双向绑定\ |
| | this.msg=ev.target.value;\ |
| | console.log(this.msg);\ |
| | console.log(ev.target.value);\ |
| | },\ |
| | method(){\ |
| | console.log(“方法”)\ |
| | |
| | return this.height.toString().split(“”).reverse().join(“-”);\ |
| | },\ |
| | show(){\ |
| | console.log(“这是另一个方法”);\ |
| | },\ |
| | getName(){\ |
| | return this.fristName+" “+this.lastName;\ |
| | },\ |
| | change(){\ |
| | this.fristName=“kkkkkkkakaka”;\ |
| | this.lastName=“llll”;\ |
| | //this.author={name:“qing”,age:18};\ |
| | this.author.technology.drive=“会骑车”; |
| | |
| | },\ |
| | fristNameChange(newVal,oldVal){\ |
| | console.log(“新的值”+newVal);\ |
| | console.log(“原来值”+oldVal);\ |
| | console.log(“fristName变化了”);\ |
| | },\ |
| | \ |
| | },\ |
| | computed:{\ |
| | computed1(){\ |
| | console.log(“计算属性”)\ |
| | return this |
| | .height.toString().split(”“).reverse().join(”-“)+this.number;\ |
| | },\ |
| | // fullName(){\ |
| | // return this.fristName+” “+this.lastName;\ |
| | // },\ |
| | fullName:{\ |
| | get(){\ |
| | return this.fristName+” “+this.lastName;\ |
| | },\ |
| | set(newValue){\ |
| | console.log(“12345”);\ |
| | this.fristName=newValue[0];\ |
| | // this.lastName=newValue[1];\ |
| | this.lastName=newValue.substr(1);\ |
| | }\ |
| | },\ |
| | fName1(){\ |
| | return this.fName+” “+this.lName;\ |
| | console.log(“computed中的fName1”);\ |
| | },\ |
| | demo(){\ |
| | var name=”“;\ |
| | setTimeout(()=>{\ |
| | name=“Alla”; \ |
| | },10000);\ |
| | return name+this.case;\ |
| | }\ |
| | },\ |
| | //1.方法被调用需要加括号\ |
| | //2.方法调用不会缓存数据，计算 |
| | 属性会缓存变化前时的数据，当data中的任何数据发生变化方法就会被调用 |
| | ,而计算属性不会,除非出现计算属性的data中的数据发生变化才会被调用\ |
| | \ |
| | //watch 侦听函数,侦听对象值变化,将对象名写成函数名即可\ |
| | watch: {\ |
| | // fristName(newVal,oldVal){\ |
| | // console.log(“新的值”+newVal);\ |
| | // console.log(“原来值”+oldVal);\ |
| | // console.log(“fristName变化了”);\ |
| | // },\ |
| | fristName:“fristNameChange”,\ |
| | lastName(newVal,oldVal){\ |
| | console.log(“新的值”+newVal);\ |
| | console.log(“原来值”+oldVal);\ |
| | },\ |
| | \ |
| | // author(){\ |
| | // console.log(“author变化了”);\ |
| | // }\ |
| | author:{\ |
| | handler(newVal,oldVal){\ |
| | console.log(“author变化了”);\ |
| | },\ |
| | deep:true, //开启深度侦听\ |
| | //immediate:true, //不触发也会立即执行\ |
| | },\ |
| | //需要监听某一条数据时\ |
| | // “author.technology.drive” :function(newVal,oldVal){\ |
| | // console.log(newVal);\ |
| | // console.log(oldVal);\ |
| | // },\ |
| | fName:{\ |
| | handler(newVal,oldVal){\ |
| | this.fullName1=this.fName+” “+this.lName;\ |
| | console.log(“fName变化”);\ |
| | }\ |
| | },\ |
| | lName:{\ |
| | handler(){\ |
| | this.fullName1=this.fName+” “+this.lName;\ |
| | console.log(“lName变化”);\ |
| | }\ |
| | },\ |
| | // allName:{\ |
| | // handler(){\ |
| | // var name=”“;\ |
| | // setTimeout(()=>{\ |
| | // name=“alisd”;\ |
| | // this.allName=name+this.case;\ |
| | // },1000);\ |
| | // }\ |
| | // }\ |
| | allName(){\ |
| | var name=”";\ |
| | console.log(222222222222222222);\ |
| | setTimeout(()=>{\ |
| | \ |
| | name=“alisd”;\ |
| | this.allName=name+this.case;\ |
| | },1000); \ |
| | }\ |
| | }\ |
| | });\ |
| | vm.fullName=“张三”;\ |
| | var object={\ |
| | age:12,\ |
| | name:“kaven”,\ |
| | };\ |
| | \ |
| | //侦听某一条数据变化,unWatch当达到侦听条件后就不会再侦听\ |
| | const unWatch |
| | = vm.$watch(“author.technology.drive”,function(newVal,oldVal){\ |
| | console.log(newVal);\ |
| | console.log(oldVal);\ |
| | if(newVal==“会骑车”){\ |
| | unWatch();\ |
| | return;\ |
| | }\ |
| | },{\ |
| | deep:true,\ |
| | immediate:true,\ |
| | });\ |
| | \ |
| | \ |
| | </script>\ |
| | </body>\ |
| | </html> |
±–±-------------------------------------------------------------------+
相应式数据学习
v-model使用实例：
<input type=“text” v-model=“msg1” id=“msg2”>
v-model对数据进行双向绑定，平常所使用的数据是通过在vue的的更改来达到对渲染dom的数据的改变，而这个更改是单向的，在使用v-model后，在dom中更改数据，在vue中data也会更改，
v-model使用范围：v-model使用 v-model只能对input,select,textarea,components,这四个标签使用
v-model 在select标签身上使用,使用multiple时变成多选，实例：
<select id=“” v-model=“citys” multiple>
v-model常用的限制修饰符：number，
<input type=“text” id=“number” v-model.number=“number”>
当使用number后input框中只能输入数字，字母会被自动截去
v-model常用的限制修饰符：lazy，
<input type=“text” id=“lazy” v-model.lazy=“lazy”>
<label for=“lazy”>{{lazy}}</label>
当使用lazy后，label标签中{{lazy}}不会实时加载出来，而是会在鼠标失去本标签焦点，并点击其他地方时，{{lazy}}才发生变化,这样可以节省效率提高性能。
v-model常用的限制修饰符：trim，
<input type=“text” id=“trim” v-model.lazy.trim=“trim”>
当使用trim后input框中首尾的空格会被自动去掉,这样在用户输入密码等重要信息时，不会将不小心输入的空格添加到密码中。
计算属性（computed）和侦听器（watch）
两者比较相像，同时也有差别,
±---------±—±----------------------------------------------------+
| | ** | 不同点 |
| | 相 | |
| | 同 | |
| | 点 | |
| | ** | |
±---------±—±----------------------------------------------------+
| computed | 1. | 1.在页面加载时,不管computed所监听的对 |
| | 两 | 象值有没有发生变化，computed中的方法都会被加载一次 |
| | 者 | |
| | 的 | 2.computed可以监听多个对象 |
| | 都 | |
| | 可 | 3 |
| | 以 | .computed是计算属性，对应的数据是多对一的关系，类似 |
| | 监 | 于1+1+1=2，当某一个数据发生变化都会影响最后的结果。 |
| | 听 | |
| | da | |
| | ta | |
| | 数 | |
| | 据 | |
| | 的 | |
| | 变 | |
| | 化 | |
| | , | |
| | | |
| | 2. | |
| | 都 | |
| | 是 | |
| | v | |
| | ue | |
| | 中 | |
| | 自 | |
| | 带 | |
| | 的 | |
| | 选 | |
| | 项 | |
| | 对 | |
| | 象 | |
| | ， | |
| | 可 | |
| | 以 | |
| | 通 | |
| | 过 | |
| | 挂 | |
| | 载 | |
| | 点 | |
| | 获 | |
| | 取 | |
±---------±—±----------------------------------------------------+
| watch | | 1 |
| | | .只有watch所监听的值发生变化，watch中的方法才会加载 |
| | | |
| | | 2.watch比较专一，只监听data中某一个对象的变化 |
| | | |
| | | 3 |
| | | .watch侦听器,对应的数据是一对多的关系，当数据发生变 |
| | | 化就会影响多个结果。类似于浏览器的搜索框，当搜索条 |
| | | 件发生变化之后，下面弹出的多个提示选项都会发生改变 |
| | | |
| | | watch中的一些特性: |
| | | |
| | | deep:true, //开启深度侦听\ |
| | | immediate:true, //不触发也会立即执行 |
| | | |
| | | 侦听函数,侦听对象值变化,将对象名写成函数名即可 |
| | | |
| | | 实例: |
| | | |
| | | fName:{\ |
| | | handler(newVal,oldVal){\ |
| | | |
| | | this.fullName1=this.fName+" "+this.lName;\ |
| | | console.log(“fName变化”);\ |
| | | }\ |
| | | }, |
| | | |
| | | 格式: |
| | | |
| | | 对象名:{ |
| | | |
| | | handler(newVal,oldVal){} |
| | | |
| | | } |
| | | |
| | | 其中newVal为变化之后的值,oldVal为变化之前的值, |
| | | |
| | | 单词名为 |
| | | 固定写法,不可更改,但是可以写在handler中也可以不写。 |
±---------±—±----------------------------------------------------+
代码块 计算器功能代码
\<!DOCTYPE html\>\
\<html lang=\"en\"\>\
\<head\>\
\<meta charset=\"UTF-8\"\>\
\<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\>\
\<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\>\
\<title\>vue学习第四天,计算器编写\</title\>\
\</head\>\
\<body\>\
\<div class=\"app\"\>\
\<input type=\"text\" v-model.number=\"num1\"\>\
\<select id=\"\" v-model=type\>\
\<option value=\"+\"\>+\</option\>\
\<option value=\"-\"\>-\</option\>\
\<option value=\"\*\"\>\*\</option\>\
\<option value=\"/\"\>/\</option\>\
\</select\>\
\<input type=\"text\" v-model.number=\"num2\"\>\
\<button @click=\"computed(type)\"\>=\</button\>\
\<span\>{{sum}}\</span\>\
\</div\>\
\<script src=\"../vue.js\"\>\</script\>\
\<script\>\
const vm = new Vue({\
el:\".app\",\
data(){\
return{\
num1:0,\
num2:0,\
sum:0,\
type:\"+\",\
}\
},\
methods: {\
computed(type){\
switch(type){\
case \"+\" \
: return this.sum=this.num1+this.num2;\
case \"-\"\
: return this.sum=this.num1-this.num2;\
case \"\*\"\
: return this.sum=this.num1\*this.num2;\
case \"/\"\
: return this.sum=this.num1/this.num2;\
\
}\
}\
}\
})\
\</script\>\
\</body\>\
\</html\>
计算器功能代码
主要运用了v-model。
第五天学习
±–±--------------------------------------------------------------------+
| * | 百度搜索框 |
| * | |
| 代 | |
| 码 | |
| 块 | |
| * | |
| * | |
±–±--------------------------------------------------------------------+
| | <!DOCTYPE html>\ |
| | <html lang=“en”>\ |
| | <head>\ |
| | <meta charset=“UTF-8”>\ |
| | <meta http-equiv=“X-UA-Compatible” content=“IE=edge”>\ |
| | <meta nam |
| | e=“viewport” content=“width=device-width, initial-scale=1.0”>\ |
| | <title>vue学习第五天</title>\ |
| | <style>\ |
| | .app input{\ |
| | width: 200px;\ |
| | height:30px;\ |
| | }\ |
| | .app button{\ |
| | background: rgb(103, 94, 221);\ |
| | width:80px;\ |
| | height:40px;\ |
| | border-radius: 5px;\ |
| | }\ |
| | .app ul{\ |
| | margin-top: -0px;\ |
| | margin-left: 0px;\ |
| | width:300px;\ |
| | height:auto;\ |
| | border: 1px solid black;\ |
| | }\ |
| | .app ul li{\ |
| | margin-top: 5px;\ |
| | height: auto;\ |
| | width: 210px;\ |
| | margin-left: -25px;\ |
| | list-style: none;\ |
| | } |
| | |
| | </style>\ |
| | </head>\ |
| | <body>\ |
| | <div class=“app”>\ |
| | <input type=“text” v-model=“inputValue\ |
| | " @blur=“ulStyle=false” @focus=“ulStyle=searchResult.length”>\ |
| | <button>百度一下</button>\ |
| | <ul v-show=“ulStyle”>\ |
| | <li v-for=“item in searchResult” :key=“item.q”>\ |
| | {{item.q}}\ |
| | </li>\ |
| | </ul>\ |
| | </div>\ |
| | <script src=”…/jquery-3.6.0.js"></script>\ |
| | <script src=“…/vue.js”></script>\ |
| | <script>\ |
| | const vm = new Vue({\ |
| | el:“.app”,\ |
| | data(){\ |
| | return{\ |
| | inputValue:“”,\ |
| | searchResult:[],\ |
| | ulStyle:false,\ |
| | }\ |
| | },\ |
| | watch: {\ |
| | inputValue(){\ |
| | $.ajax({\ |
| | url:“https://www.baidu.com/sugrec”,\ |
| | dataType:“jsonp”,\ |
| | data:{\ |
| | prod:“pc”,\ |
| | wd:this.inputValue,\ |
| | },\ |
| | success(res){\ |
| | \ |
| | vm.searchResult=res.g||[];\ |
| | vm.ulStyle=vm.searchResult.length;\ |
| | \ |
| | console.log(res.g);\ |
| | }\ |
| | })\ |
| | }\ |
| | }\ |
| | })\ |
| | </script>\ |
| | </body>\ |
| | </html> |
±–±--------------------------------------------------------------------+
百度搜索框逻辑
使用jquery的ajax从接口获取值,在通过watch侦听器获取到传来的值,最后遍历得到数组渲染在页面
watch: {
inputValue(){
$.ajax({
url:“https://www.baidu.com/sugrec”,
dataType:“jsonp”,
data:{
prod:“pc”,
wd:this.inputValue,
},
success(res){
vm.searchResult=res.g||[];
vm.ulStyle=vm.searchResult.length;
console.log(res.g);
}
inputValue被侦听的对象,url中存放请求的地址,dataType请求数据类型为jsonp
data中prod为发送请求的设备类型，pc为电脑端，wd为发出的请求的数据，
success为响应函数括号中为请求返回的数据。
±–±--------------------------------------------------------------------+
| * | 备忘录功能 |
| * | |
| 代 | |
| 码 | |
| 块 | |
| * | |
| * | |
±–±--------------------------------------------------------------------+
| | <!DOCTYPE html>\ |
| | <html lang=“en”>\ |
| | <head>\ |
| | <meta charset=“UTF-8”>\ |
| | <meta http-equiv=“X-UA-Compatible” content=“IE=edge”>\ |
| | <meta nam |
| | e=“viewport” content=“width=device-width, initial-scale=1.0”>\ |
| | <title>vue学习第五天,备忘录功能</title>\ |
| | <style>\ |
| | .app{\ |
| | margin: 0px;\ |
| | height: 1300px;\ |
| | width: 100%;\ |
| | background: rgb(219, 219, 145);\ |
| | }\ |
| | .a{\ |
| | background: rgb(240, 234, 234);\ |
| | float: left;\ |
| | margin-left: 30%;\ |
| | height: 350px;\ |
| | width: 800px;\ |
| | margin-top: 50px;\ |
| | box-shadow: rgb(37, 36, 36) 10px 10px 50px 5px;\ |
| | border-radius: 5px;\ |
| | position: relative;\ |
| | }\ |
| | </style>\ |
| | \ |
| | </head>\ |
| | <body>\ |
| | <div class=“app”>\ |
| | <div class=“a”>\ |
| | <h2>待办事项</h2>\ |
| | <div class=“a1”>\ |
| | <input type=" |
| | text" placeholder=“请输入待办事项…” v-model=“inputValue”>\ |
| | <button @click=“add(inputValue)”>添加</button>\ |
| | </div>\ |
| | <ul>\ |
| | |
| | <li v-for=“(item,index) in arr” :key=“item” class=“a11” >\ |
| | |
| | <input type=“checkbox” placeholder=“选框。。。。。。。” : |
| | checked=“check” @input=“updata($event,index)” class=“in”>\ |
| | <span @click=“updata1(index)” :style=\ |
| | “styleInput1[index]”>{{item}}+{{styleInput[index]}}</span>\ |
| | <input type=“text” :style=“styleInput[ |
| | index]” @focus=“styleInput[index]=‘display:none’” @blur=“s |
| | tyleInput[index]=‘display:block’” v-model=“arr[index]” >\ |
| | <button @click=“delete1(index)”>x</button>\ |
| | </li>\ |
| | <p @click=“selectAll”>全部选中</p>\ |
| | <p @click=“deleteAll(index)”>删除选中</p>\ |
| | <p @click=“del”>删除</p>\ |
| | </ul>\ |
| | <!-- <p @click=“panduan”>panduan1</p> -->\ |
| | </div>\ |
| | </div>\ |
| | <script src=“…/vue.js”></script>\ |
| | <script>\ |
| | var c;\ |
| | var cnt =0;\ |
| | const vm =new Vue({\ |
| | el:“.app”,\ |
| | data(){\ |
| | return{\ |
| | arr:[“吃饭”,\ |
| | “睡觉”,“打豆豆”],\ |
| | inputValue:“”,\ |
| | check:false,\ |
| | deleteA:[],\ |
| | |
| | styleInput:[“display:none”,“display:none”,“display:none”],\ |
| | styl |
| | eInput1:[“display:block”,“display:block”,“display:block”],\ |
| | \ |
| | }\ |
| | },\ |
| | methods:{\ |
| | add(){\ |
| | // console.log(this.inputValue);\ |
| | this.arr.push(this.inputValue);\ |
| | },\ |
| | delete1(index){\ |
| | this.$delete(this.arr,index);\ |
| | },\ |
| | selectAll(){\ |
| | this.check=!this.check;\ |
| | console.log(this.check);\ |
| | },\ |
| | panduan(){\ |
| | let bol = true;\ |
| | var a11 = document.querySelectorAll(“.a11 .in”);\ |
| | \ |
| | a11.forEach(function(item,index){\ |
| | console.log(item);\ |
| | if(item.checked){\ |
| | \ |
| | }else{\ |
| | console.log(“false”);\ |
| | bol=false;\ |
| | } \ |
| | })\ |
| | return bol;\ |
| | },\ |
| | deleteAll(){\ |
| | if (this.deleteA.length!=0){\ |
| | this.deleteA.sort().reverse();\ |
| | vm.deleteA.forEach(function(item,index){\ |
| | // console.log(item+“item…”);\ |
| | // console.log(index+“index…”);\ |
| | \ |
| | \ |
| | console.log(item+“item”);\ |
| | console.log(cnt+“cnt”);\ |
| | // console.log((item-cnt)+“item-cnt”);\ |
| | vm.arr.splice(item,1);\ |
| | // vm.arr.splice(item-cnt,1);\ |
| | // cnt++;\ |
| | \ |
| | });\ |
| | // vm.arr.splice(1,1);\ |
| | // vm.arr.splice(1,1);\ |
| | \ |
| | \ |
| | // console.log(this.deleteA[0]);\ |
| | // console.log(“bug调试”);\ |
| | // if(this.deleteA!=[]){\ |
| | // for(let i =0 ;i<this.deleteA.length;i++){\ |
| | // this.$delete(this.arr,this.deleteA[i]);\ |
| | // console.log(this.deleteA[i]+“delete”);\ |
| | // };\ |
| | // }\ |
| | \ |
| | this.deleteA=[];\ |
| | }\ |
| | else if(this.panduan()){\ |
| | console.log(“selectAll”);\ |
| | // var length =this.deleteA.length;\ |
| | // console.log(length);\ |
| | // for(let i =0 ;i<length;i++){\ |
| | // this.$delete(this.arr,this.arr.length–);\ |
| | // };\ |
| | this.arr=[];\ |
| | }else{\ |
| | console.log(“其他结果”);\ |
| | }\ |
| | c =this.panduan();\ |
| | console.log(c+“最后结果”);\ |
| | \ |
| | },\ |
| | updata1(index){\ |
| | console.log(“update1”);\ |
| | \ |
| | this.styleInput[index]=“display:block”;\ |
| | this.styleInput1[index]=“display:none”;\ |
| | console.log(this.styleInput[index]);\ |
| | vm.$set(vm.styleInput,vm.styleInput); |
| | |
| | },\ |
| | updata2(index){\ |
| | console.log(“update2”);\ |
| | \ |
| | this.styleInput1[index]=“display:block”;\ |
| | this.styleInput[index]=“display:none”;\ |
| | console.log(this.styleInput[index]);\ |
| | vm.$set(vm.styleInput,vm.styleInput);\ |
| | \ |
| | },\ |
| | ad(check){\ |
| | console.log(check);\ |
| | },\ |
| | updata(ev,index){\ |
| | console.log(index);\ |
| | if(ev.target.checked){\ |
| | this.deleteA.push(index);\ |
| | };\ |
| | console.log(this.arr);\ |
| | console.log(this.deleteA)\ |
| | },\ |
| | del(){\ |
| | this.$delete(this.arr,0);\ |
| | }\ |
| | },\ |
| | computed: {\ |
| | \ |
| | },\ |
| | watch:{\ |
| | // styleInput:{\ |
| | // handler(newVal,oldVal){\ |
| | \ |
| | // }\ |
| | // }\ |
| | }\ |
| | })\ |
| | </script>\ |
| | </body>\ |
| | </html> |
±–±--------------------------------------------------------------------+
备忘录功能逻辑
通过对v-model功能的灵活运用，需要注意的在做批量删除的时候可以设置删除的原索引数组，将需要删除的索引值放入一个数组中，将数组排序，由大到小的顺序，使用forEach循环也可以使用普通的for循环,当使用forEach时
因为是js中原生的属性所以在forEach中不能使用vue中的特性。用splice方法进行删除,要是使用普通的for循环可以使用vue的选项对象$delete方法进行删除。
第六天学习
±–±-------------------------------------------------------------------+
| * | 全局组件学习 |
| * | |
| 代 | |
| 码 | |
| 块 | |
| * | |
| * | |
±–±-------------------------------------------------------------------+
| | <!DOCTYPE html>\ |
| | <html lang=“en”>\ |
| | <head>\ |
| | <meta charset=“UTF-8”>\ |
| | <meta http-equiv=“X-UA-Compatible” content=“IE=edge”>\ |
| | <meta name |
| | =“viewport” content=“width=device-width, initial-scale=1.0”>\ |
| | <title>vue学习第6天,全局组件学习</title>\ |
| | <script src=“…/vue.js”></script>\ |
| | </head>\ |
| | <body>\ |
| | <div id=“app”>\ |
| | |
| | |
| | \ |
| | </div>\ |
| | <div class=“box”>\ |
| | <my-component></my-component>\ |
| | </div>\ |
| | <template id=“btn”>\ |
| | <button @click=‘add’>你点了多少次{{count}}</button>\ |
| | </template>\ |
| | <script>\ |
| | Vue.component(‘MyComponent’,{\ |
| | data(){\ |
| | return{\ |
| | count:0,\ |
| | }\ |
| | },\ |
| | // templa |
| | te:“<button @click=‘add’>你点了多少次{{count}}</button>”,\ |
| | template:“#btn”,\ |
| | methods:{\ |
| | add(){\ |
| | this.count++;\ |
| | }\ |
| | },\ |
| | computed: {\ |
| | \ |
| | },\ |
| | });\ |
| | // Vue.component(“MyComponent”,{\ |
| | \ |
| | // });\ |
| | new Vue({\ |
| | el:“#app”,\ |
| | template:“<my-component></my-component>”,\ |
| | template:“<MyComponent></MyComponent>”,\ |
| | template:“<MyComponent />”,\ |
| | \ |
| | \ |
| | });\ |
| | const vm = new Vue({\ |
| | el:“.box”,\ |
| | data () {\ |
| | return {\ |
| | \ |
| | }\ |
| | }\ |
| | });\ |
| | </script>\ |
| | </body>\ |
| | </html> |
±–±-------------------------------------------------------------------+
全局组件学习
全局组件格式:
Vue.component(‘MyComponent’,{
data(){
return{
count:0,
}
},
// template:“<button @click=‘add’>你点了多少次{{count}}</button>”,
template:“#btn”,
methods:{
add(){
this.count++;
}
},
computed: {
},
});
全局组件即是全局皆可使用，作用域范围大，但是不是每个地方都需要用,所以对性能会造成损失。
他和vue一样都是实例对象。不过跟vue不同的是他没有el挂载点。当需要使用时,
<my-component></my-component>
直接在需要的地方调用就行，需要注意的是当组件名为驼峰命名时,在页面渲染中，需要改成小写，且首字母用-连接。
同样的vue中有的methods components
data等他同样也有，组件的模板template可以写在组件中 // template:“<button @click=‘add’>你点了多少次{{count}}</button>”,
类似如此。同时也可以写在组件外面 ,
<template id=“btn”>
<button @click=‘add’>你点了多少次{{count}}</button>
</template>
通过id名进行挂载 template:“#btn”,
±–±-------------------------------------------------------------------+
| * | 局部组件学习 |
| * | |
| 代 | |
| 码 | |
| 块 | |
| * | |
| * | |
±–±-------------------------------------------------------------------+
| | <!DOCTYPE html>\ |
| | <html lang=“en”>\ |
| | <head>\ |
| | <meta charset=“UTF-8”>\ |
| | <meta http-equiv=“X-UA-Compatible” content=“IE=edge”>\ |
| | <meta name |
| | =“viewport” content=“width=device-width, initial-scale=1.0”>\ |
| | <title>vue学习第6天,局部组件学习</title>\ |
| | <script src=“…/vue.js”></script>\ |
| | </head>\ |
| | <body>\ |
| | <div id=“app”>\ |
| | <counter></counter>\ |
| | <color></color>\ |
| | </div>\ |
| | <template id=“count”>\ |
| | <div>\ |
| | <button @click=“add”>你点了{{count}}次</button>\ |
| | <span>kkk</span>\ |
| | </div>\ |
| | \ |
| | </template>\ |
| | <script>\ |
| | const vm = new Vue({\ |
| | el:“#app”,\ |
| | components:{\ |
| | Counter:{\ |
| | // components:{\ |
| | // Son:{\ |
| | // components:{ |
| | |
| | // }\ |
| | // }\ |
| | // }\ |
| | \ |
| | data () {\ |
| | return {\ |
| | count:0,\ |
| | }\ |
| | },\ |
| | template:“#count”,\ |
| | methods: {\ |
| | add(){\ |
| | this.count++;\ |
| | }\ |
| | }\ |
| | },\ |
| | Color:{\ |
| | data () {\ |
| | return {\ |
| | str:“red”,\ |
| | }\ |
| | \ |
| | },\ |
| | template:“<h1>{{str}}</h1>”,\ |
| | },\ |
| | Name:{\ |
| | \ |
| | },\ |
| | },\ |
| | data () {\ |
| | return {\ |
| | \ |
| | }\ |
| | },\ |
| | //template:“<Counter />”,\ |
| | });\ |
| | </script>\ |
| | \ |
| | </body>\ |
| | </html> |
±–±-------------------------------------------------------------------+
局部组件学习
局部组件即放在哪个里面就在哪个里面使用。使用方法与全局组件相同,不同的是局部组件的作用受放置的位置限制。
components:{
Counter:{
// components:{
// Son:{
// components:{
// }
// }
// }
data () {
return {
count:0,
}
},
template:“#count”,
components为 局部组件的声明 Counter为组件名字
±–±-------------------------------------------------------------------+
| * | props使用 |
| * | |
| 代 | |
| 码 | |
| 块 | |
| * | |
| * | |
±–±-------------------------------------------------------------------+
| | <!DOCTYPE html>\ |
| | <html lang=“en”>\ |
| | <head>\ |
| | <meta charset=“UTF-8”>\ |
| | <meta http-equiv=“X-UA-Compatible” content=“IE=edge”>\ |
| | <meta name |
| | =“viewport” content=“width=device-width, initial-scale=1.0”>\ |
| | <title>vue学习第6天,局部组件,props使用,案例</title>\ |
| | <script src=“…/vue.js”></script>\ |
| | <style>\ |
| | body {\ |
| | background: #e2e2e2;\ |
| | } |
| | |
| | h3,\ |
| | h4,\ |
| | p {\ |
| | margin: 0;\ |
| | }\ |
| | \ |
| | .box {\ |
| | width: 500px;\ |
| | background: #fff;\ |
| | padding: 10px 20px 20px;\ |
| | margin: 50px;\ |
| | }\ |
| | \ |
| | .box h3 {\ |
| | color: #2cbd53;\ |
| | border-bottom: 1px solid #E8ECEE;\ |
| | margin-bottom: 20px;\ |
| | padding-bottom: 10px;\ |
| | }\ |
| | \ |
| | .box div {\ |
| | overflow: hidden;\ |
| | }\ |
| | \ |
| | .box div img {\ |
| | float: left;\ |
| | margin-right: 15px;\ |
| | }\ |
| | \ |
| | .box div h4 {\ |
| | color: #333;\ |
| | font-size: 20px;\ |
| | line-height: 20px;\ |
| | padding: 10px 0 20px 0;\ |
| | }\ |
| | \ |
| | .box div p {\ |
| | color: #8b8b8b;\ |
| | font-size: 14px;\ |
| | line-height: 22px;\ |
| | }\ |
| | </style>\ |
| | </head>\ |
| | <body>\ |
| | <div id=“app”>\ |
| | <article-list \ |
| | :box-title=“title” \ |
| | img-src=img_01.jpg \ |
| | article-title=“你的暴饮暴食，是因为饿了吗”\ |
| | article-content=" |
| | 在一项调查中发现，有近40％的成人选择以暴饮暴食或吃垃圾食品的方式， |
| | 来缓解前一个月的压力。而在这些人之中，有近一半的人每周都是如此"\ |
| | \ |
| | ></article-list>\ |
| | <article-list\ |
| | ></article-list>\ |
| | </div>\ |
| | <template id=“box”>\ |
| | <div class=“box”>\ |
| | <h3>{{boxTitle}}</h3>\ |
| | <div>\ |
| | <img :src=“imgSrc” alt=“”>\ |
| | <div>\ |
| | <h4>{{articleTitle}}</h4>\ |
| | <p>{{articleContent}}</p>\ |
| | </div>\ |
| | </div>\ |
| | </div>\ |
| | </template>\ |
| | \ |
| | <script>\ |
| | new Vue({\ |
| | el:“#app”,\ |
| | data () {\ |
| | return {\ |
| | title:“马冬梅”,\ |
| | }\ |
| | },\ |
| | components: {\ |
| | ArticleList:{\ |
| | // data () {\ |
| | // return {\ |
| | // boxTitle:“饮食健康”,\ |
| | // imgSrc:“img_01.jpg”,\ |
| | // articleTitle:“你的暴饮暴食，是因为饿了吗？”,\ |
| | // articleContent:“在 |
| | 一项调查中发现，有近40％的成人选择以暴饮暴食或吃垃圾食品的方式，来 |
| | 缓解前一个月的压力。而在这些人之中，有近一半的人每周都是如此。”\ |
| | // }\ |
| | // },\ |
| | props |
| | :[‘boxTitle’,‘imgSrc’,‘articleTitle’,‘articleContent’],\ |
| | template:“#box”,\ |
| | }\ |
| | },\ |
| | //template:“<ArticleList />”\ |
| | \ |
| | });\ |
| | // |
| | function rednerDom(boxTitle,imgSrc,articleTitle,articleContent){\ |
| | // var str =`<div class=“box”>\ |
| | // <h3>${boxTitle}</h3>\ |
| | // <div>\ |
| | // <img src=“${imgSrc}” alt=“”>\ |
| | // <div>\ |
| | // <h4>${articleTitle}</h4>\ |
| | // <p>${articleContent}</p>\ |
| | // </div>\ |
| | // </div>\ |
| | // </div>`; \ |
| | \ |
| | // }\ |
| | </script>\ |
| | </body>\ |
| | </html> |
±–±-------------------------------------------------------------------+
props使用
props可以为父组件给子组件传值。
格式：
components: {
ArticleList:{
// data () {
// return {
// boxTitle:“饮食健康”,
// imgSrc:“img_01.jpg”,
// articleTitle:“你的暴饮暴食，是因为饿了吗？”,
// articleContent:“在一项调查中发现，有近40％的成人选择以暴饮暴食或吃垃圾食品的方式，来缓解前一个月的压力。而在这些人之中，有近一半的人每周都是如此。”
// }
// },
props:[‘boxTitle’,‘imgSrc’,‘articleTitle’,‘articleContent’],
template:“#box”,
}
},
传的值可以是数组也可以是对象。
<article-list
:box-title=“title”
img-src=img_01.jpg
article-title=“你的暴饮暴食，是因为饿了吗”
article-content=“在一项调查中发现，有近40％的成人选择以暴饮暴食或吃垃圾食品的方式，来缓解前一个月的压力。而在这些人之中，有近一半的人每周都是如此”
></article-list>
:box-title=“title”
=前面box-title就是props的变量,使用v-bind指令为变量动态绑定，这样父组件的变量就可以直接传入变量中，“title” 就是父组件中的对象
±–±-------------------------------------------------------------------+
| * | props高级配置 |
| * | |
| 代 | |
| 码 | |
| 块 | |
| * | |
| * | |
±–±-------------------------------------------------------------------+
| | <!DOCTYPE html>\ |
| | <html lang=“zh”>\ |
| | <head>\ |
| | <meta charset=“UTF-8”>\ |
| | <meta http-equiv=“X-UA-Compatible” content=“IE=edge”>\ |
| | <meta name |
| | =“viewport” content=“width=device-width, initial-scale=1.0”>\ |
| | <title>vue学习第6天,props高级配置</title>\ |
| | <script src=“…/vue.js”></script>\ |
| | </head>\ |
| | <body>\ |
| | <div class=“app”>\ |
| | <my-color\ |
| | :data=“colors”\ |
| | ></my-color>\ |
| | <my-vue\ |
| | name=“张三”\ |
| | :sing=“sing”\ |
| | :age=“‘18岁’”\ |
| | :height=“‘175cm’”\ |
| | :weight=8\ |
| | ></my-vue>\ |
| | </div>\ |
| | \ |
| | <template id=“tem”>\ |
| | \ |
| | </template>\ |
| | <script>\ |
| | const vm = new Vue({\ |
| | el:“.app”,\ |
| | data () {\ |
| | return {\ |
| | colors:[“red”,“green”,“blue”],\ |
| | // colors:function(){ |
| | |
| | // },\ |
| | sing:false,\ |
| | // age:18,\ |
| | }\ |
| | },\ |
| | components: {\ |
| | MyColor:{\ |
| | // props:[“data”],\ |
| | props: {\ |
| | data:{\ |
| | type:Array\ |
| | }\ |
| | },\ |
| | template:`<ul>\ |
| | <li v-for=“(color,index) in data” :key=“color”>\ |
| | {{color}}\ |
| | </li>\ |
| | </ul>`,\ |
| | },\ |
| | MyVue:{\ |
| | // props:[“data”],\ |
| | props: {\ |
| | name:{\ |
| | type:String,\ |
| | required:true,\ |
| | },\ |
| | sing:{\ |
| | type:Boolean\ |
| | },\ |
| | age:[Number,String],\ |
| | height:{\ |
| | type:[Number,String],\ |
| | default:“180cm”\ |
| | },\ |
| | interest:{\ |
| | type:Array,\ |
| | default:()=>[‘打麻将’,‘听歌’],\ |
| | },\ |
| | weight:{\ |
| | type:Number,\ |
| | validator:val=>val>0\ |
| | }\ |
| | },\ |
| | template:` <div>\ |
| | <h2>{{name}}</h2>\ |
| | <p>唱歌:{{sing?‘会唱’:‘不会唱’}}</p>\ |
| | <p>年龄:{{age}}</p>\ |
| | <p>身高:{{height}}</p>\ |
| | <p>爱好:{{interest}}</p>\ |
| | <p>体重:{{weight}}</p>\ |
| | </div>`,\ |
| | }\ |
| | \ |
| | }\ |
| | });\ |
| | </script>\ |
| | </body>\ |
| | </html> |
±–±-------------------------------------------------------------------+
props高级配置
平常所使用的props，接收数组类型。 props还可以接收对象类型格式：
props: {
items:{
type:Array
}
},
items为对象名,type为props固有属性,可以用来限制props接收的数据类型,
type(规定数据类型)
string字符串Number 数字Boolean布尔Array 数组object
对象Date日期Function函数数
Symbol 独一无二的值(es6),
default：
interest:{
type:Array,
default:()=>[‘打麻将’,‘听歌’],
},
当外部传值没有给对象传时，这时候就会给一个默认值
validator:
weight:{
type:Number,
validator:val=>val>0
}
对传进来的参数进行校验，若是穿的值不满足校验函数，那么无法传值成功,并且会在后台报错。
required:
是否是必填项
默认为false
name:{
type:String,
required:true,
},
±–±-------------------------------------------------------------------+
| * | 插槽学习，组件嵌套 |
| * | |
| 代 | |
| 码 | |
| 块 | |
| * | |
| * | |
±–±-------------------------------------------------------------------+
| | <!DOCTYPE html>\ |
| | <html lang=“en”>\ |
| | <head>\ |
| | <meta charset=“UTF-8”>\ |
| | <meta http-equiv=“X-UA-Compatible” content=“IE=edge”>\ |
| | <meta name |
| | =“viewport” content=“width=device-width, initial-scale=1.0”>\ |
| | <title>vue学习第6天,插槽学习,组件嵌套</title>\ |
| | <script src=“…/vue.js”></script>\ |
| | <style>\ |
| | body{\ |
| | margin: 0;\ |
| | font-size: 14px;\ |
| | }\ |
| | h3{\ |
| | margin: 0;\ |
| | }\ |
| | .title{\ |
| | width: 1000px;\ |
| | padding: 0 20px;\ |
| | height: 50px;\ |
| | line-height: 50px;\ |
| | margin: 20px auto;\ |
| | background: #f4f0ea;\ |
| | }\ |
| | .title h3{\ |
| | float: left;\ |
| | font-size: 28px;\ |
| | margin-right: 20px;\ |
| | }\ |
| | .subtitle{\ |
| | float: left;\ |
| | }\ |
| | .more{\ |
| | float: right;\ |
| | margin-left: 30px;\ |
| | }\ |
| | .title a{\ |
| | color: #333;\ |
| | text-decoration: none;\ |
| | }\ |
| | .title a:hover,.title a.active{\ |
| | color: #b4a078;\ |
| | border-bottom: 2px solid #b4a078;;\ |
| | }\ |
| | .tab{\ |
| | float: left;\ |
| | }\ |
| | .subnav{\ |
| | float: right;\ |
| | }\ |
| | </style>\ |
| | </head>\ |
| | <body>\ |
| | <div id=“app”>\ |
| | <!-- <section-head>\ |
| | <template #default>\ |
| | <h3>这是通过插槽写的标签-----H3</h3>\ |
| | </template>\ |
| | \ |
| | <template v-slot:title>\ |
| | \ |
| | <h3>这是通过插槽写的标签</h3>\ |
| | </template>\ |
| | </section-head> -->\ |
| | <section-head>\ |
| | <template #title>\ |
| | <h3>新品首发</h3>\ |
| | </template>\ |
| | <template #subtitle>\ |
| | <span class=“subtitle”>为你寻觅寻觅事件好物</span>\ |
| | </template>\ |
| | <template #more>\ |
| | <div class=“more”>\ |
| | <a href=“#”>更多新品</a>\ |
| | </div>\ |
| | </template>\ |
| | </section-head>\ |
| | <section-head>\ |
| | <template #title>\ |
| | <h3>人气爆款</h3>\ |
| | </template>\ |
| | <tab></tab>\ |
| | <template #more>\ |
| | <div class=“more”>\ |
| | <a href=“#”>更多新品</a>\ |
| | </div>\ |
| | </template>\ |
| | </section-head>\ |
| | <section-head>\ |
| | <template #title>\ |
| | <h3>福利社</h3>\ |
| | </template>\ |
| | <!-- <template #tab>\ |
| | <div class=“tab”>\ |
| | <a href=“#” class=“active”>编辑推荐</a>\ |
| | <a href=“#”>热销总榜</a>\ |
| | </div> \ |
| | </template> -->\ |
| | <template #more>\ |
| | <div class=“more”>\ |
| | <a href=“#”>查看全部福利</a>\ |
| | </div>\ |
| | </template>\ |
| | </section-head> |
| | |
| | <section-head>\ |
| | <template #title>\ |
| | <h3>居家生活</h3>\ |
| | </template>\ |
| | <template #subnav>\ |
| | <div class=“subnav”>\ |
| | <a href=“#”>好物精选</a> / < |
| | a href=“#”>秋冬焕新</a> / <a href=“#”>疫情防控</a> / < |
| | a href=“#”>收纳好物</a> / <a href=“#”>北欧原木</a> / < |
| | a href=“#”>餐厨爆款清单</a> / <a href=“#”>厨房电器</a>\ |
| | </div> \ |
| | </template>\ |
| | <template #more>\ |
| | <div class=“more”>\ |
| | <a href=“#”>更多新品</a>\ |
| | </div>\ |
| | </template>\ |
| | </section-head>\ |
| | </div>\ |
| | <!-- 父组件 -->\ |
| | <template id=“head”>\ |
| | <div class=“title”>\ |
| | <slot name=“title”></slot>\ |
| | <slot name=“subtitle”></slot>\ |
| | |
| | <!-- 子组件只能在父组件中使用,直接在父组件中调用就行 -->\ |
| | <tab>\ |
| | <template #tab1>\ |
| | <a href=“#” class=“active”>编辑推荐</a>\ |
| | </template>\ |
| | <template #tab2>\ |
| | <a href=“#”>热销总榜</a>\ |
| | </template>\ |
| | </tab>\ |
| | \ |
| | <slot name=“more”></slot>\ |
| | <slot name=“subnav”></slot>\ |
| | <slot></slot>\ |
| | </div>\ |
| | </template>\ |
| | <!-- 子组件 -->\ |
| | <template id=“tab”>\ |
| | \ |
| | <div class=“tab”>\ |
| | <!-- <a href=“#” class=“active”>编辑推荐</a>\ |
| | <a href=“#”>热销总榜</a> -->\ |
| | <slot name=“tab1”></slot>\ |
| | <slot name=“tab2”></slot>\ |
| | </div> \ |
| | \ |
| | </template>\ |
| | <script>\ |
| | const vm = new Vue({\ |
| | el:“#app”,\ |
| | components: {\ |
| | SectionHead:{\ |
| | template:“#head”,\ |
| | components: {\ |
| | Tab:{\ |
| | template:“#tab”\ |
| | }\ |
| | }\ |
| | }\ |
| | }\ |
| | });\ |
| | </script>\ |
| | </body>\ |
| | </html> |
±–±-------------------------------------------------------------------+
插槽学习，组件嵌套
插槽使用：
v-slot，写在template身上，简写形式#,
<template #tab1>
<a href=“#” class=“active”>编辑推荐</a>
</template>
首先在template使用<slot></slot>
<template id=“head”>
<div class=“title”>
<slot name=“title”></slot>
<slot name=“subtitle”></slot>
<!-- 子组件只能在父组件中使用,直接在父组件中调用就行 -->
<tab>
<template #tab1>
<a href=“#” class=“active”>编辑推荐</a>
</template>
<template #tab2>
<a href=“#”>热销总榜</a>
</template>
</tab>
<slot name=“more”></slot>
<slot name=“subnav”></slot>
<slot></slot>
</div>
</template>
name属性为slot绑定对应的template标签
插槽的好处就是可以复用模板，当需要使用的模板相差不大的时候。就可以使用插槽把所有情况列出来选择需要的插槽使用即可。
±–±-------------------------------------------------------------------+
| * | 数据单向传递 |
| * | |
| 代 | |
| 码 | |
| 块 | |
| * | |
| * | |
±–±-------------------------------------------------------------------+
| | <!DOCTYPE html>\ |
| | <html lang=“en”>\ |
| | <head>\ |
| | <meta charset=“UTF-8”>\ |
| | <meta http-equiv=“X-UA-Compatible” content=“IE=edge”>\ |
| | <meta name |
| | =“viewport” content=“width=device-width, initial-scale=1.0”>\ |
| | <title>vue学习第6天,父组件给子组件数据传递</title>\ |
| | <script src=“…/vue.js”></script>\ |
| | </head>\ |
| | <body>\ |
| | <div id=“app”>\ |
| | <lao-wang></lao-wang>\ |
| | </div>\ |
| | <template id=“laowang”>\ |
| | <div>\ |
| | 张三的年龄:{{age}}\ |
| | <button @click=“addAge”>增加张三的年龄</button>\ |
| | <xiao-wang\ |
| | :father-age=“age-20”\ |
| | ></xiao-wang>\ |
| | </div>\ |
| | </template>\ |
| | <template id=“xiaowang”>\ |
| | <div>\ |
| | 小王接收到的年龄：{{newAge}}\ |
| | <button @click=“addAge”>增加张三的年龄</button>\ |
| | </div>\ |
| | </template>\ |
| | <script>\ |
| | const vm =new Vue({\ |
| | el:“#app”,\ |
| | data(){\ |
| | return{ |
| | |
| | }\ |
| | },\ |
| | components: {\ |
| | LaoWang:{\ |
| | data(){\ |
| | return{\ |
| | age:40,\ |
| | }\ |
| | },\ |
| | template:“#laowang”,\ |
| | methods:{\ |
| | addAge(){\ |
| | this.age++;\ |
| | }\ |
| | },\ |
| | components: {\ |
| | XiaoWang:{\ |
| | data(){\ |
| | return{\ |
| | newAge:this.fatherAge,\ |
| | }\ |
| | },\ |
| | props:{\ |
| | “fatherAge”:Number\ |
| | },\ |
| | template:“#xiaowang”,\ |
| | methods: {\ |
| | addAge(){\ |
| | // this.fatherAge++;\ |
| | this.newAge++;\ |
| | }\ |
| | }\ |
| | }\ |
| | }\ |
| | }\ |
| | }\ |
| | });\ |
| | </script>\ |
| | </body>\ |
| | </html> |
±–±-------------------------------------------------------------------+
数据单向传递
父组件像子组件传值。通过props来接值
<xiao-wang
:father-age=“age-20”
></xiao-wang>
±–±-------------------------------------------------------------------+
| * | 自定义事件，子组件给父组件传值 |
| * | |
| 代 | |
| 码 | |
| 块 | |
| * | |
| * | |
±–±-------------------------------------------------------------------+
| | <!DOCTYPE html>\ |
| | <html lang=“en”>\ |
| | <head>\ |
| | <meta charset=“UTF-8”>\ |
| | <meta http-equiv=“X-UA-Compatible” content=“IE=edge”>\ |
| | <meta name |
| | =“viewport” content=“width=device-width, initial-scale=1.0”>\ |
| | <title>vue学习第6天,自定义事件</title>\ |
| | <script src=“…/vue.js”></script>\ |
| | </head>\ |
| | <body>\ |
| | <div class=“app”>\ |
| | <news></news>\ |
| | </div>\ |
| | <template id=“news”>\ |
| | <div :style=“{fontSize:fontSize+‘px’}”>\ |
| | <sleep\ |
| | :articles=“articleList”\ |
| | @add=“change”\ |
| | ></sleep>\ |
| | </div>\ |
| | </template>\ |
| | <template id=“sleep”>\ |
| | <div>\ |
| | <ul>\ |
| | <li v-for=“(articl |
| | e,index) in articles” :key=“article.id”>\ |
| | <h3>{{article.title}}</h3>\ |
| | <button @click=“add”>放大字号</button>\ |
| | <div>{{article.content}}</div>\ |
| | </li>\ |
| | </ul>\ |
| | </div> \ |
| | </template>\ |
| | <script>\ |
| | const vm = new Vue({\ |
| | el:“.app”,\ |
| | data () {\ |
| | return {\ |
| | \ |
| | }\ |
| | },\ |
| | components: {\ |
| | \ |
| | News:{\ |
| | data () {\ |
| | return {\ |
| | articleList:[\ |
| | |
| | {title:“睡觉”,content:“中午不睡下午崩溃”,id:0},\ |
| | |
| | {title:“睡觉1”,content:“中午不睡下午崩溃1111”,id:1},\ |
| | |
| | {title:“睡觉2”,content:“中午不睡下午崩溃2222”,id:2}\ |
| | ],\ |
| | fontSize:25,//字体大小\ |
| | }\ |
| | },\ |
| | methods: {\ |
| | change(step){\ |
| | this.fontSize+=step;\ |
| | }\ |
| | },\ |
| | template:“#news”,\ |
| | components: {\ |
| | Sleep:{\ |
| | props:{\ |
| | articles:Array,\ |
| | \ |
| | },\ |
| | template:“#sleep”,\ |
| | methods: {\ |
| | add(){\ |
| | this.$emit(“add”,3);\ |
| | }\ |
| | }\ |
| | }, |
| | |
| | }\ |
| | }\ |
| | }\ |
| | })\ |
| | </script>\ |
| | </body>\ |
| | </html> |
±–±-------------------------------------------------------------------+
自定义事件，子组件给父组件传值
当子组件需要更改父组件中的值，使用自定义事件，
<button @click=“add”>放大字号</button>子组件中的触发事件，
methods: {
add(){
this.$emit(“add”,3);
}
}
子组件实例对象components中的方法，通过this.$emit调用，第一个参数为组件调用时的方法名。第二个参数为传的值。
在父组件中step为接收传的值
methods: {
change(step){
this.fontSize+=step;
}
}
最后在调用组件时：
<sleep
@add=“change”
></sleep>
@后面就是子组件中emit中的第一个参数名，chang就是父组件中的方法名
±–±-------------------------------------------------------------------+
| * | 动态组件,实现选项卡功能 |
| * | |
| 代 | |
| 码 | |
| 块 | |
| * | |
| * | |
±–±-------------------------------------------------------------------+
| | <!DOCTYPE html>\ |
| | <html lang=“en”>\ |
| | <head>\ |
| | <meta charset=“UTF-8”>\ |
| | <meta http-equiv=“X-UA-Compatible” content=“IE=edge”>\ |
| | <meta name |
| | =“viewport” content=“width=device-width, initial-scale=1.0”>\ |
| | <title>vue学习第6天,动态组件,实现选项卡功能</title>\ |
| | <script src=“…/vue.js”></script>\ |
| | <style>\ |
| | button {\ |
| | width: 100px;\ |
| | height: 50px;\ |
| | margin: 0 10px;\ |
| | outline: none;\ |
| | } |
| | |
| | .content {\ |
| | width: 340px;\ |
| | height: 300px;\ |
| | margin-left: 10px;\ |
| | border: 1px solid #000;\ |
| | font-size: 40px;\ |
| | box-sizing: border-box;\ |
| | padding: 20px;\ |
| | }\ |
| | .content1{\ |
| | width: 340px;\ |
| | height: 300px;\ |
| | margin-left: 10px;\ |
| | /* border: 1px solid #000; */\ |
| | font-size: 40px;\ |
| | box-sizing: border-box;\ |
| | padding: 20px;\ |
| | }\ |
| | \ |
| | .active {\ |
| | background: green;\ |
| | color: #fff;\ |
| | border: none;\ |
| | }\ |
| | </style>\ |
| | </head>\ |
| | <body>\ |
| | <div id=“app”>\ |
| | <butto |
| | n v-for=“(item,index) in tabs” :key=“item.id\ |
| | " @click=“currentTab=item.component” :class=”{active:currentTab |
| | item.component}“>{{item.name}}</button>\ |
| | <div class=“content”>\ |
| | \ |
| | <keep-alive include=”“>\ |
| | <component :is=“currentTab”></component>\ |
| | </keep-alive>\ |
| | </div>\ |
| | </div>\ |
| | <script>\ |
| | const vm = new Vue({\ |
| | el:”#app",\ |
| | data(){\ |
| | return{\ |
| | currentTab:“Html”,\ |
| | tabs:[\ |
| | {name:“html”,component:“Html”,id:0},\ |
| | {name:“css”,component:“Css”,id:1},\ |
| | {name:“js”,component:“JavaScript”,id:2},\ |
| | ]\ |
| | }\ |
| | },\ |
| | components: {\ |
| | Html:{\ |
| | template:“<div>html</div>”\ |
| | },\ |
| | Css:{\ |
| | template:“<div>Css</div>”\ |
| | },\ |
| | JavaScript:{\ |
| | data() {\ |
| | return {\ |
| | currentTab1:“Vue”,\ |
| | children:[\ |
| | {name:“vue”,component:“Vue”,id:3},\ |
| | {name:“react”,component:“React”,id:4},\ |
| | \ |
| | ]\ |
| | }\ |
| | },\ |
| | components:{\ |
| | Vue:{\ |
| | template:“<div>Vue</div>”\ |
| | },\ |
| | React:{\ |
| | template:“<div>React</div>”\ |
| | },\ |
| | },\ |
| | template:`\ |
| | <div>\ |
| | <button v-for=“(ch |
| | ild,index) in children” :key=“child.id” @cli |
| | ck=“currentTab1=child.component” :class="{active:currentTab1c |
| | hild.component}“>{{child.name}}</button>\ |
| | <div class=“content1”>\ |
| | <keep-alive include=”">\ |
| | <component :is=“currentTab1”></component>\ |
| | </keep-alive>\ |
| | \ |
| | </div>\ |
| | </div>\ |
| | `,\ |
| | },\ |
| | }\ |
| | });\ |
| | </script>\ |
| | </body>\ |
| | </html> |
±–±-------------------------------------------------------------------+
动态组件,实现选项卡功能
当需要使用选项卡功能时可以使用component标签,
<component :is=“currentTab”></component>放在需要渲染的地方，is属性决定了使用哪一个组件
1428
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
