Vue.js笔记

笔记博客：

vue的包

条件与循环：

知识点：

• 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="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="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