笔记博客：
条件与循环：
知识点：
- v-if
- v-for
v-if：条件判断式，根据表达式的真伪进行页面处理
v-for:处理数组循环，将数据循环显示到页面上
<div id="myApp"> <h4>最新书籍</h4> <div v-if="visible">书籍如下：</div> <ol> <li v-for="book in books"> {{book.title}}/{{book.price}}元</li> </ol> </div> <script> var myApp=new Vue({ el:'#myApp', data:{ visible:true, books:[ {title:'html',price:15} , {title:'css',price:23} , {title:'java',price:34} , ] } }) </script>
v-model:
为页面输入框进行数据绑定，ex：
- input
- select
- textarea
- components
<div id="myApp"> <p>the favorite books :{{mybook}}</p> <input type="text" v-model="mybook"> </div> <script> var myApp=new Vue({ el:'#myApp', data:{ mybook:'js' } })
v-on(就是@)
为页面元素绑定各种事件：{keydown,keyup,click,load},
<div id="myApp"> <p>the favorite books :{{mybook}}</p> <button v-on:click="btnclick('js')">js</button> <button v-on:click="btnclick('css')">css</button> <button v-on:click="btnclick('html')">html</button> <button v-on:click="btnclick('java')">java</button> </div> <script> var myApp=new Vue({ el:'#myApp', data:{ mybook:'js' }, methods:{ btnclick:function(pname){ this.mybook=pname } } }) </script>
conmponent
定义页面的局部区域块，完成单独的页面小功能
<div id="myApp"> <ol> <book-item v-for="item in books"v-bind:book="item" ></book-item> </ol> </div> <script> //组件定义 Vue.component('book-item',{ props:['book'],//属性 template:'<li>{{book.title}}</li>' //将template渲染到页面中 }) var myApp=new Vue({ el:'#myApp', data:{ books:[{title:'js'}, {title:'css'},{title:'html'}, ] } }) </script>
title后面一定要注意单引号！！，找了好久的bug
filters
格式化变量内容的输出（日期格式化，字母大小写，数字在计算等等）
<div id="myApp"> <p> </p> <p>{{message|toupper}}</p> <hr> <p>现在的假期还剩余：({{num|topercentage}})</p> </div> <script> var myApp=new Vue({ el:'#myApp', data:{ message:'hello world', num:0.8 }, filters:{ toupper:function(value){ return value.toUpperCase(); }, topercentage:function(value){ return value*100+'%'; } } }) </script>
computed
处理元数据（简单理解，从数据库中取出的数据），便于进行二次利用（比如：消费税自动计算功能）
<div id="myApp"> 今年发表的书籍价格是：{{price}}$,含税价格为：{{priceInTax}}%，折合人民币价格：{{priceChinaRMB}}yuan </div> <script> var myApp=new Vue({ el:'#myApp', data:{ price:299 }, computed:{ priceInTax:function(){ return this.price*1.08; }, priceChinaRMB:function(){ return Math.round(this.priceInTax*6.75); } } }) </script>
watch
与computed属性类似，用于观察变量的变化，然后进行相应的处理。
<div id="myApp"> 今年发表的书籍价格是：{{price}}yuan,含税价格为：{{priceInTax}}yuan，折合人民币价格：{{priceChinaRMB}}yuan <button @click="btnClick(10000)">加价1000yuan</button> </div> <script> var myApp=new Vue({ el:'#myApp', data:{ price:0, priceInTax:0, priceChinaRMB:0, }, watch:{ price:function(newVal,oldVal){ console.log(newVal,oldVal); this.priceInTax=Math.round(this.price*1.08); this.priceChinaRMB=Math.round(this.priceInTax/16.75); }, }, methods:{ btnClick:function(newPrice){ this.price+=newPrice; } } }) myApp.price=299; </script>
setter
设置计算属性，同步更新元数据的值
今年发表的书籍价格是：{{price}}yuan,含税价格为：{{priceInTax}}yuan，折合人民币价格：{{priceChinaRMB}}yuan <button @click="btnClick(1000)">把含税价格改为1000yuan</button> </div> <script> var myApp=new Vue({ el:'#myApp', data:{ price:0, }, computed:{ priceInTax:{ get:function(){ return this.price*1.08; },set:function(value){ this.price=value/1.08; } }, priceChinaRMB:function(){ return Math.round(this.priceInTax/16.75); }, }, methods:{ btnClick:function(newPrice){ this.priceInTax=newPrice; } } }) </script>
class属性绑定
v-bind：class
为html标记绑定样式单class属性
<div id="myApp"> <div v-bind:class="{active:isActive}">红色文本1</div> <div :class="{active:isActive}">红色文本2</div> <button @click="btnClick">改变class</button> </div> <script> var myApp=new Vue({ el:'#myApp', data:{ isActive:true, }, methods:{ btnClick:function(){ this.isActive=!this.isActive; }, }, }) </script> <style> body{ font-size: 24px; } .active{ color:red; } </style>
Class对象绑定
v-bind：class
为html标记绑定样式单class对象
<div id="myApp"> <div :class="myClass">红色文本</div> <button @click="btnClick">改变class</button> </div> <script> var myApp=new Vue({ el:'#myApp', data:{ myClass:{ active:true, big:true, }, }, methods:{ btnClick:function(){ this.myClass.big=!this.myClass.big; this.myClass.active=!this.myClass.active; } } }) </script> <style> body{ font-size: 24px; } .active{ color:red; } .big{ font-weight: bolder; font-size: 64px; } </style>
条件渲染
v-if
v-else-if
v-else
判断vue.js的变量的值，然后执行页面渲染逻辑（if-else）
<div id="myApp"> <h1 v-if="result==0">成绩未公布</h1> <h1 v-else-if="result<60">{{result}}分-考试不及格</h1> <h1 v-else-if="result<80">{{result}}分-还需努力</h1> <h1 v-else>{{result}}分-考试不错</h1> <button @click="btnClick">考试成绩</button> </div> <script> var myApp=new Vue({ el:'#myApp', data:{ result:0 }, methods:{ btnClick:function(){ this.result=Math.round(Math.random()*100); }, }, }); </script>
元素显示（用得不多）
v-show
标记是否显示html元素（v-show为true：显示，false：不显示。注意：v-show设置的标记在html DOM中不会消失）
<div id="myApp"> <h1 v-show="result">玩游戏</h1> <button @click="btnClick">可以玩游戏吗？</button> </div> <script> var myApp=new Vue({ el:'#myApp', data:{ result:true }, methods:{ btnClick:function(){ this.result=!this.result; } } }) </script>
列表渲染
v-for
循环数组元素，整理内容显示到页面上(数组迭代）
<div id="myApp"> <ul> <li v-for="(book,index) in books">({{index+1}}){{book.title}}/售价："{{book.price}}yuan </li> </ul> </div> <script> var myApp=new Vue({ el:"#myApp", data:{ books:[ {title:"js",price:23}, {title:"css",price:15}, {title:"html",price:20}, ] } }) </script>
Js对象迭代(调试代码）
v-for
循环Js对象，把对象内容循环显示到页面上
<div id="myApp"> <h1>Js对象迭代</h1> <div v-for="(value,key) in mybook"> {{key}}:{{value}} </div> </div> <script> var myApp=new Vue({ el:"#myApp", data:{ mybook:{ title:"Js", price:23, } } }) </script>
事件处理器(用于调试)
v-on（event）／@（event）
页面元素的事件绑定（click，keyup，load等等）
<div id="myApp"> <h1>事件处理器</h1> <input id="txtName" v-on:keyup="txtKeyup($event)"> <button id="btnOK" v-on:click="btnClick($event)">OK</button> </div> <script> var myApp=new Vue({ el:"#myApp", data:{}, methods:{ txtKeyup:function(event){ this.debugLog(event); }, btnClick:function(event){ this.debugLog(event); }, debugLog:function(event){ console.log( event.srcElement.tagNme, event.srcElement.id, event.srcElement.innerHtml, event.ke?event.key:"" ) } } }) </script> </body> </html>
表单控件绑定( 表单的文本框)
v-model
input[type="text"]
为表单控件元素创建双向数据绑定（将JS变量的值“快速”设定到控件上，然后将用户内容“快速”设置回JS变量
<div id="myApp"> <h1>表单控件绑定</h1> <input type="text" v-model="message" placeholder="快写内容"> <p>Message is: {{message}}</p></div> <script> var myApp=new Vue({ el:'#myApp', data:{ message:"hello world" }, methods:{ }, }) </script> </body></html>
表单复选框
v-model
input[type="checkbox"]
<div id="myApp"> <h1>表单复选框</h1> <input type="checkbox" id="Js" value="Js" v-model="checkedBooks"> <label for="Js">Js</label> <input type="checkbox" id="Css" value="Css" v-model="checkedBooks"> <label for="Css">Css</label> <input type="checkbox" id="Html" value="Html" v-model="checkedBooks"> <label for="Html">Html</label> <br> <p>您选择的书籍是:{{checkedBooks}}</p> </div> <script> var myApp=new Vue({ el:'#myApp', data:{ checkedBooks:[] }, methods:{ }, }) </script> </body></html>
表单单选按钮
v-model
input[type="radio"]
<div id="myApp"> <h1>表单单选框</h1> <input type="radio" id="man" value="男" v-model="pickedSex"> <label for="man">男</label> <input type="radio" id="woman" value="女" v-model="pickedSex"> <label for="woman">女</label> <h3>选择爱好</h3> <input type="radio" id="game" value="玩游戏" v-model="pickedHobby"> <label for="game">玩游戏</label> <br> <input type="radio" id="movie" value="看电影" v-model="pickedHobby"> <label for="movie">看电影</label> <h3>选择结果</h3> <p>性别：{{pickedSex}}</p> <p>爱好：{{pickedHobby}}</p> </div> <script> var myApp=new Vue({ el:'#myApp', data:{ pickedSex:"", pickedHobby:"" }, methods:{ }, }) </script> </body></html>
表单下拉框绑定
v-model
select
<div id="myApp"> <h3>你最喜欢的NBA球星是：</h3> <select v-model="likedNBAStar" style="width:210px"> <option value="科比">科比</option> <option value="詹姆斯">詹姆斯</option> <option value="哈登">哈登</option> <option value="库里">库里</option> <option value="杜兰特">杜兰特</option> </select> <br> <h3>我的全明星：</h3> <select v-model="likedNBAStars"multiple style="width:210px；height:210px"> <option value="科比">科比</option> <option value="詹姆斯">詹姆斯</option> <option value="哈登">哈登</option> <option value="库里">库里</option> <option value="格里芬">格里芬</option> <option value="欧文">欧文</option> <option value="保罗">保罗</option> <option value="林书豪">林书豪</option> <option value="韦德">韦德</option> <option value="巴特勒">巴特勒</option> </select> <h3>选择结果</h3> <p>我最喜欢的：{{likedNBAStar}}</p> <p>我的全明星：{{likedNBAStars}}</p> </div> <script> var myApp=new Vue({ el:'#myApp', data:{ likedNBAStar:"", likedNBAStars:[] }, methods:{ }, }) </script> </body></html>
表单修饰符(针对用户输入进行规范和整理）
.lazy（用户输入内容时不做绑定数据的更新处理，在控件的onchange事件中更新绑定的变量
.number（将用户输入的内容转换为数值类型，如果用户输入非数值的时候，则返回NAN
.trim （自动去掉用户输入内容两端的空格
<div id="myApp"> <h1>表用户注册</h1> <div> <label for="username">用户：</label> <input type="text" v-model.lazy="username" @change="checkUsername"> <span v-if="checkUsernameOK">可注册</span> </div> <div> <label for="age">年龄:</label> <input type="number" id="age" v-model.number="age"> </div> <div> <label for="content">个人简介：</label> <textarea id="content" v-model.trim="content" cols="55" rows="8"> </textarea> </div> <br> <h4>信息区</h4> <p>username：{{username}}</p> <p>age：{{age}}</p> <p><pre>简介：{{content}}</pre></p> </div> <script> var myApp=new Vue({ el:'#myApp', data:{ username:"", checkUsernameOK:false, age:"", content:"", }, methods:{ checkUsername:function(){ if(this.username.length>0) this.checkUsernameOK=true; else this.checkUsernameOK=false; } }, }) </script>
组件（component，portlet）
组件是页面上的一小块区域内容，完成一个小的页面功能//注册组件要写在声明逻辑之前
<div id="myApp"> <today-weather></today-weather> </div> <script> Vue.component("today-weather",{ template:'<div>可以看书了呀</div>' }) var myApp=new Vue({ el:"#myApp" }) </script>
局部的组件
组件的局部注册
Vue.js的组件不仅可以单独声明注册使用，还可以在Vue实例中进行局部注册使用
<div id="myApp"> <today-weather></today-weather> </div> <script> var weatherComponent={ template:'<div>mama</div>' }; var myApp=new Vue({ el:"#myApp", data:{}, components:{ 'today-weather':weatherComponent } }) </script> </body> </html>
表行组件
为自己的页面表格填写表行组件
<div id="myApp"> <h1>2019年最期待的书籍是：</h1> <table border="1"> <tr> <td>编号</td> <td>游戏名称</td> </tr> <tr is="my-row1"></tr> <tr is="my-row2"></tr> <tr is="my-row3"></tr> </table> </div> <script> Vue.component('my-row1',{ template:'<tr><td>(1)</td><td>Js</td></tr>' }); Vue.component('my-row2',{ template:'<tr><td>(2)</td><td>Css</td></tr>' }); Vue.component('my-row3',{ template:'<tr><td>(3)</td><td>Html</td></tr>' }); var myApp=new Vue({ el:'#myApp', data:{}, methods:{}, }) </script>
组件：数据
组件的数据函数
为Vue.js组件添加数据，使组件可以动态显示各种数据，注意使数据函数，不是数据属性
<div id="myApp"> <div>今天的天气是：<today-weather/></div> </div> <script> Vue.component('today-weather',{ template:'<strong>{{todayWeather}}</strong>', data:function(){ return { todayWeather:'sunny'} } }); var myApp=new Vue({ el:'#myApp', data:{}, methods:{}, }) </script>
组件：传递数据
为组件传递数据
制作可接受参数的组件
<div id="myApp"> <h1>您的成绩评价：</h1> <test-result :score="50"></test-result> <test-result :score="65"></test-result> <test-result :score="90"></test-result> <test-result :score="100"></test-result> </div> <script> Vue.component('test-result',{ props:['score'],//score和上面的score一一对应的，props是属性 template:'<div><strong>{{score}}分，{{testResult}}</strong</div>', computed:{ testResult:function(){ var strResult=""; if(this.score<60) strResult="不及格"; else if(this.score<90) strResult="良"; else if(this.score<=100) strResult="优"; return strResult; } } }) var myApp=new Vue({ el:'#myApp', data:{}, methods:{}, }) </script>
组件：传递变量
为组件传递变量数据
制作可接受变量参数的组件
<div id="myApp"> <h1>情输入您的名字：<input v-model="my"></h1> <hr> <say-hi :pname="my"></say-hi> </div> <script> Vue.component('say-hi',{ props:['pname'], template:'<div>hello,<strong>{{pname}}</strong>!</div>', }); var myApp=new Vue({ el:'#myApp', data:{ my:'world', } }) </script>
sayhi要记得加上‘’
组件：参数验证
props：组件参数验证语法
为组件中接受到的变量进行逻辑验证
<div id="myApp"> <h1>身世之谜</h1> <show-number-info name="Jeo23" :age="20" :detail="{address:'earth',language:'English'}"> </show-number-info> </div> <script> Vue.component('show-number-info',{ props:{//一个对象 name:{ type:String, required:true,//必须有 }, age:{ type:Number, validator:function(value){//检验用户年龄 return value>=0&&value<=130 } }, detail:{ type:Object,//一定要大写 default:function(){ return { address:'US', language:'English', }; } }, }, template:'<div>姓名：{{this.name}}<br>'+'年龄:{{this.age}}<br>'+'address:{{this.detail.address}}<br>'+'language:{{this.detail.language}}</div>', }) var myApp=new Vue({ el:'#myApp',}) </script>
组件：事件传递(好好理解一下)
v-on（父组件向子组件
（侦听组件事件，当组件触发事件后进行事件处理）
$emit（子组件传递给父组件
1、this $emit（'自定义事件名',要传送的数据）；
2、触发当前实例上的事件，要传递的数据会传给监听器；
<div id="myApp"> <h1> 人生加法 </h1> <add-method :a="6" :b="12" v-on:add_event="getAddResult"></add-method>//add-method是子组件，ab是参数，v-on监听子组件的add_event方法，若触发该方法则调用父组件的getAddResult方法 <hr/> <h3>{{result}}</h3> </div> <script> Vue.component('add-method',{ props:['a','b'], template:'<div><button v-on:click="add">加吧</button></div>', methods:{ add:function(){ var value=0; value=this.a+this.b; this.$emit('add_event',{ result:value }); } }, }); var myApp=new Vue({ el:'#myApp', data:{ result:0 }, methods:{ getAddResult:function(pval){ this.result=pval.result }//pval是{result:value}的值 }}) </script>
slot插槽
slot是父组件与子组件的通讯方式，可以将父组件的内容显示在子组件当中
<div id="myApp"> <say-to pname="Jeo23">好好学习呀</say-to> <say-to pname="jack">一定能找到好工作</say-to> <say-to pname="rose">加油呀</say-to> </div> <script> Vue.component('say-to',{ props:['pname'], template:'<div>'+'你好，<strong>{{pname}}</strong>,' +'<slot></slot>' +'</div>' }) var myApp=new Vue({ el:'#myApp',}) </script>
组件：组合slot
slot命名
在子组件中通过为多个slot进行命名，来接受父组件的不同内容的数据
<div id="myApp"> <nba-all-stars c="奥尼尔" pf="加内特"> <span slot="sf">皮尔斯</span> <span slot="sg">雷阿伦</span> <span slot="pg">隆多</span> </nba-all-stars> </div> <script> Vue.component('nba-all-stars',{ props:['c','pf'], template:'<div>' +'<div>中锋：{{c}}</div>' +'<div>大前：{{pf}}</div>' +'<div>小前：<slot name="sf"></slot></div>' +'<div>分卫:<slot name="sg"></slot></div>' +'<div>控卫:<slot name="pg"></slot></div>' +'</div>' }) var myApp=new Vue({ el:'#myApp',}) </script>
vue中的路由：
路由，就是指向的意思，当点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about按钮，页面中就要显示about的内容，Home按钮=>home内容，about按钮=>about内容
点击之后，如何跳转到正确位置，就要在js中配置路由
路由中有三个基本概念：route，routes，router