前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP最新优惠活动
返回腾讯云官网
社区首页 >专栏 >vue学习（3）

vue学习（3）

作者头像
玩蛇的胖纸
发布于 2018-08-16 14:43:03
2.8K0
发布于 2018-08-16 14:43:03
举报
文章被收录于专栏：雪胖纸的玩蛇日常雪胖纸的玩蛇日常

回顾昨天内容

代码语言：javascript
复制
1.let和const
2.模板字符串 `` 插变量${变量名}
3.箭头函数 function(){} == ()=>{}
    1.this的指向问题
    2.arguments不能使用
4.对象单体模式
    var person={
        name:"张三",
        fav(){

        }
    }
5.es6的面向对象
class Animal{
    constructor(){

    }//构造方法，后面不加逗号
    showName(){

    }//定义方法
}

前端工具介绍：

webpack：打包机，它能将我们的html、css、js,font,png进行打包，交给服务器。

loader 加载器

插件：一个功能，js文件 组件：BootStrap组件，包含js，html，css

html压缩

css压缩

js压缩 js进行混淆 图片压缩

webpage火起来以前，前端工程师都使用grunt和gulp

nodejs+webpack 热重载 有代码改变的时候，浏览器跟着变

nodejs 服务器语言

新建一个项目：

1.在cmd下，cd到项目目录下，执行：npm init --yes 初始化我们的项目，自动生成一个package.json的文件

2.安装依赖包：npm install jquery --save

如果拿到了一个新的项目：

1.cd到当前目录

2.npm install 将依赖包批量安装，如果报错可能是项目版本太久了，可以先执行一次：npm rebuild

3.npm run dev 启动项目，类似的指令还有npm start，还有重新打包命令：npm run build

淘宝镜像：

有时候用npm会因为某些原因，国外的模块下载的太慢，这时就需要用淘宝镜像的cnpm代替npm进行安装了，使用淘宝镜像，首先要安装淘宝镜像，cmd下执行：

代码语言：javascript
复制
npm install -g cnpm --registry=https://registry.npm.taobao.org

v-if指令和v-on指令

vue适合单页面应用，主要移动端。

v-if指令

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app01">
        {{msg}}
        <div v-if='d'>哈哈哈</div> 
        <!-- d是false则哈哈哈不显示，d是true则哈哈哈显示 -->
    </div>
    <!-- 插值语法 -->

    <script src="vue.js"></script>
    <script>
        //vue的实例化
        //MVVM Model View ViewModel
        //指令系统 v-*

        var app=new Vue({
            el:"#app01",
            data:{
                msg:"今天学习VUE",
                d:false,
            }
        })
    </script>

</body>
</html>

v-on指令

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app01">
        {{msg}}
        <div v-if='d'>哈哈哈</div> 
        <!-- d是false则哈哈哈不显示，d是true则哈哈哈显示 -->
        <button v-on:click="qie">切换</button>
    </div>
    <!-- 插值语法 -->

    <script src="vue.js"></script>
    <script>
        //vue的实例化
        //MVVM Model View ViewModel
        //指令系统 v-*

        var app=new Vue({
            el:"#app01",
            data:{
                msg:"今天学习VUE",
                d:false,
            },
            methods:{
                qie(){
                    this.d=!this.d;//取反

                }
                //相当于
                // qie:function(){
                //     this.d=!this.d;//取反
                // }
            }
        })
    </script>

</body>
</html>

v-on的简便写法：

代码语言：javascript
复制
<!-- <button v-on:click="qie">切换</button> -->
        <!-- v-on的简便写法@ -->
        <button @click="qie">切换</button>

指令系统

v-else指令

代码语言：javascript
复制
    <div id="app01">
        {{msg}}
        <div v-if='d'>哈哈哈</div> 
        <!-- d是false则哈哈哈不显示，d是true则哈哈哈显示 -->
        <button v-on:click="qie">切换</button>
        
        
        <div v-if="Math.random()>0.5">
            How you see me
        </div>
        <div v-else>
            How you don't
        </div>
        <!-- 刷新网页随机产生不同的内容 -->

    </div>

v-else-if指令

代码语言：javascript
复制
    <div id="app01">
        {{msg}}
        <div v-if='d'>哈哈哈</div> 
        <!-- d是false则哈哈哈不显示，d是true则哈哈哈显示 -->
        <button v-on:click="qie">切换</button>
        
        
        <div v-if="Math.random()>0.5">
            How you see me
        </div>
        <div v-else-if="0.5>Math.random()>0.3">
            How you don't
        </div>
        <div v-else>
            emmm....
        </div>
        <!-- 刷新网页随机产生不同的内容 -->

    </div>

v-show指令

代码语言：javascript
复制
 <h3 v-show="isShow">我是一个三级标题</h3>
        <!-- 是修改css属性中的display，有更高的初始渲染开销，比v-if更加适合做多次切换 -->

v-bind指令

代码语言：javascript
复制
<h3 v-show="isShow" v-bind:title="t">我是一个三级标题</h3>
        <!-- 是修改css属性中的display，有更高的初始渲染开销，比v-if更加适合做多次切换 -->
        <img v-bind:src="SrcImage">

……

 data:{
                msg:"今天学习VUE",
                d:false,
                isShow:true,
                t:"哈哈哈",
                SrcImage:"./mei.jpg",
            },

绑定字符串，v-bind指令的简便写法，就是省略v-bind直接：

代码语言：javascript
复制
……
<img v-bind:src="SrcImage" :alt="alt">
        <!-- v-bind:省略为： -->
……
data:{
                msg:"今天学习VUE",
                d:false,
                isShow:true,
                t:"哈哈哈",
                SrcImage:"./mei.jp",
                alt:`页面加载于${new Date().toLocaleString()}`,//取当前时间
            },

v-bind:class指令

代码语言：javascript
复制
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box2{
            background-color: green;
        }

    </style>
……

<div id="app01">

        <div class="box" v-bind:class='{box2:isGreen}'>

        </div>
        <button @click="changecolor">切换颜色</button>

    </div>

……
    <script src="vue.js"></script>
    <script>
        //vue的实例化
        //MVVM Model View ViewModel
        //指令系统 v-*

        var app=new Vue({
            el:"#app01",
            data:{
                msg:"今天学习VUE",
                d:false,
                isShow:true,
                t:"哈哈哈",
                SrcImage:"./mei.jp",
                alt:`页面加载于${new Date().toLocaleString()}`,//取当前时间
                isGreen:true,
            },
            methods:{
                changecolor(){
                    this.isGreen=!this.isGreen;
                }
            }
        })
    </script>

监听事件

代码语言：javascript
复制
<div id="app01">

        <div class="box" v-bind:class='{box2:isGreen}'>

        </div>
        <button @click="changecolor">切换颜色</button>
        <button @click="count+=1">加{{count}}</button>
        <!-- 每点击一次加1，简单的运算 -->

    </div>

……

data:{
      ……
      count:0,
            },

列表渲染

代码语言：javascript
复制
<div id="app01">

        <div>
            <img v-bind:src="tu">
            <ul>
                <li v-for="(item,i) in imgArr" @click='f(item)'>{{i+1}}</li>    
            </ul> 
        </div>

    </div>
    <!-- 插值语法 -->

    <script src="vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app01",
            data:{
                imgArr:[
                    {id:1,src:'./1.jpg'},
                    {id:2,src:'./2.jpg'},
                    {id:3,src:'./3.jpg'},
                    {id:4,src:'./4.jpg'},
                ],
                tu:"./2.jpg",
            },
            methods:{
                f(item){
                    this.tu=item.src;
                }

            }
        })
    </script>

点击<li>标签切换图片显示

用vue做的轮播图

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
       *{
           padding: 0;
           margin: 0;
        }
        ul{
            width: 180px;
            overflow: hidden;
            list-style: none;
        }
        ul li{
            float: left;
            width: 30px;
            height: 30px;
            line-height: 30px;
            background: purple;
            margin-left: 10px;
            text-align: center;
            color:white;
        }
        button{
            margin-top: 10px;
            margin-left: 5px;
            margin-right:50px ;
        }
        .box{
            background: red;
        }

    </style>
</head>
<body>
    <div id="app01">
        <div>
            <img v-bind:src="tu" @mouseenter='closebanner' @mouseleave='startbanner'>
            <ul>
                <li v-for="(item,i) in imgArr" @click='f(item)' 
                 :class="{box:isred}"
                 @mouseenter='red(item)' @mouseleave='purple(item)'>{{i+1}}</li>    
            </ul> 
        </div>
        <button @click="pre">上一张</button>
        <button @click="next">下一张</button>
    </div>

    <script src="vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app01",
            data:{
                imgArr:[
                    {id:1,src:'./1.jpg'},
                    {id:2,src:'./2.jpg'},
                    {id:3,src:'./3.jpg'},
                    {id:4,src:'./4.jpg'},
                ],
                tu:"./1.jpg",
                index:0,
                banner:null,
                isred:false,
            },
            //dom元素创建之前来完成的方法
            //可以提前获取cookie和session
            created(){
                this.banner=setInterval(this.next,2000);

            },
            methods:{
                f(item){
                    this.tu=item.src;
                },
                pre(){
                    if(this.index==0){
                        this.index=this.imgArr.length;
                    }
                    this.index--;
                    this.tu=this.imgArr[this.index].src;  
                },
                next(){
                    if(this.index==this.imgArr.length-1){
                        this.index=-1;
                    }
                    this.index++;
                    this.tu=this.imgArr[this.index].src;
                },
                closebanner(){
                    clearInterval(this.banner);
                },
                startbanner(){
                    this.banner=setInterval(this.next,2000);
                },
                red(item){
                    this.isred=true;
                },
                purple(item){
                    this.isred=false;
                },


            }
        })
    </script>

</body>
</html>

做出来有缺陷，鼠标悬浮在选项上，所有选项都变红。。。。

v-html指令

代码语言：javascript
复制
……
 
<div>{{str}}</div> <!-- <p>嘿嘿嘿</p> -->
<div v-html='str'></div><!-- 嘿嘿嘿 -->

……

 data:{
   
    str:"<p>嘿嘿嘿</p>"
  },

计算属性的使用和v-model的实现原理

计算属性

1.传统的用模板语法进行简单运算

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="computed">
        <div>
            {{msg.split('').reverse().join('')}}
        </div>
        <!-- 浏览器中字符串被反转了 !dlrow olleh -->
    
    </div>
    <script type="text/javascript" src="vue.js"></script>
    <script>
        var com=new Vue({
            el:"#computed",
            data:{
                msg:"hello world!",
            },
            methods:{
                
            },
            computed:{
               
            }
        })
    </script>
</body>
</html>

2.通过计算属性，将模板语法中的计算，封装到computed里其中一个方法里

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="computed">
       
        {{fangfa1}}
    
    </div>
    <script type="text/javascript" src="vue.js"></script>
    <script>
        var com=new Vue({
            el:"#computed",
            data:{
                msg:"hello world!",
            },
            methods:{
                
            },
            computed:{
               //默认只有getter方法，有返回值的方法
               fangfa1(){
                   return this.msg.split('').reverse().join('');
               }

            }
        })
    </script>
</body>
</html>

3.计算属性：监听

computed里的方法，绑定了this.msg，一旦监听到this.msg发生了改变，与this.msg有关的数据计算的结果，也跟着改变。

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="computed">
       
        {{fangfa1}}
        <button @click="gai">修改</button>
    
    </div>
    <script type="text/javascript" src="vue.js"></script>
    <script>
        var com=new Vue({
            el:"#computed",
            data:{
                msg:"hello world!",
            },
            methods:{
                gai(){
                    this.msg="hello luffy!"
                }
            },
            computed:{
               //默认只有getter方法，有返回值的方法
               //计算数据属性，watch监听
               fangfa1(){
                   return this.msg.split('').reverse().join('');
               }

            }
        })
    </script>
</body>
</html>

4.computed里的方法中定义set

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="computed">
       
        {{fangfa1}}
        <button @click="gai">修改</button>
    
    </div>
    <script type="text/javascript" src="vue.js"></script>
    <script>
        var com=new Vue({
            el:"#computed",
            data:{
                msg:"hello world!",
            },
            methods:{
                gai(){
                    
                    console.log(this.fangfa1)//直接用this.fangfa1调用，则默认是使用get方法
                    this.fangfa1="hello luffy!"//给this.fangfa1赋值，则使用的set方法
                }
            },
            computed:{
               //默认只有getter方法，有返回值的方法
               //计算数据属性，watch监听
               //想要使用set，需要自定义set，写法如下：
               //直接用this.fangfa1调用，则默认是使用get方法，如果
               fangfa1:{
                   set:function(newValue){
                       this.msg=newValue;

                   },
                   get:function(){
                        return this.msg.split('').reverse().join('');
                   }
               }

            }
        })
    </script>
</body>
</html>

5.数据的双向绑定指令：v-model

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form id="computed">
       <input type="text" v-model="msg">
       <h3>{{msg}}</h3>
        
    </form>
    <script type="text/javascript" src="vue.js"></script>
    <script>
        var com=new Vue({
            el:"#computed",
            data:{
                msg:"",
            },
            methods:{
                
            },
            computed:{
               
            }
        })
    </script>
</body>
</html>

v-model数据双向绑定的实现原理

数据的双向绑定=数据单项绑定+UI的事件监听

计算属性的应用：set的应用场景

虽然使用set看起来是不使用set的多此一举，但是其却有着其应用场景，就是数据双向绑定的本质

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form id="computed">
       <!-- <input type="text" v-model="msg"> -->
       <input type="text" v-bind:value="getValue" @input="msgChange">
       <h3>{{getValue}}</h3>
        
    </form>
    <script type="text/javascript" src="vue.js"></script>
    <script>
        var com=new Vue({
            el:"#computed",
            data:{
                msg:"123",
            },
            methods:{
                msgChange(e){
                    console.log(e.target.value);//e是事件监听对象，e.target.value是每次发生事件后的值
                    this.getValue=e.target.value;
                }
            },
            computed:{

               getValue:{
                   set:function(newValue){
                       this.msg=newValue;
                   },
                   get:function(){
                       return this.msg;
                   }
               }
            }
        })
    </script>
</body>
</html>

v-model只适用于表单控件里面

表单文本、多行文本、复选框、单选按钮、多选按钮、选择框……

使用案例：https://cn.vuejs.org/v2/guide/forms.html

.lazy修饰符和.number修饰符和.trim修饰符

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form id="computed">
       <input type="text" v-model="msg">
       
       <input type="text" v-model.lazy="msg">
       <!-- 加了.lazy修饰符，则不是时时监听，而是当输入完以后，完成同步 -->

       <input type="number" v-model.number="msg">
       <!-- 只能输入数字 -->

       <input type="text" v-model.trim="msg">
       <!-- 自动消除用户输入的收尾空白字符 -->

       <h3>{{msg}}</h3>
        
    </form>
    <script type="text/javascript" src="vue.js"></script>
    <script>
        var com=new Vue({
            el:"#computed",
            data:{
                msg:"123",
                
            },
            methods:{
                
            },
            computed:{

            }
        })
    </script>
</body>
</html>
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-08-08 ，如有侵权请联系 cloudcommunity@tencent.com 删除
其他

本文分享自 作者个人站点/博客 前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ，欢迎热爱写作的你一起参与！

其他
评论
登录后参与评论
0 条评论
热度
最新
登录 后参与评论
推荐阅读
LV.
文章
0
获赞
0
目录
  • 回顾昨天内容
    • 前端工具介绍：
      • nodejs 服务器语言
        • 新建一个项目：
        • 如果拿到了一个新的项目：
        • 淘宝镜像：
    • v-if指令和v-on指令
      • v-if指令
        • v-on指令
        • 指令系统
          • v-else指令
            • v-else-if指令
              • v-show指令
                • v-bind指令
                  • v-bind:class指令
                    • 监听事件
                      • 列表渲染
                        • 用vue做的轮播图
                          • v-html指令
                          • 计算属性的使用和v-model的实现原理
                            • 计算属性
                              • 1.传统的用模板语法进行简单运算
                              • 2.通过计算属性，将模板语法中的计算，封装到computed里其中一个方法里
                              • 3.计算属性：监听
                              • 4.computed里的方法中定义set
                              • 5.数据的双向绑定指令：v-model
                            • v-model数据双向绑定的实现原理
                              • 计算属性的应用：set的应用场景
                            • v-model只适用于表单控件里面
                              • 表单文本、多行文本、复选框、单选按钮、多选按钮、选择框……
                              • 使用案例：https://cn.vuejs.org/v2/guide/forms.html
                            • .lazy修饰符和.number修饰符和.trim修饰符
                            相关产品与服务
                            图片处理
                            图片处理（Image Processing，IP）是由腾讯云数据万象提供的丰富的图片处理服务，广泛应用于腾讯内部各产品。支持对腾讯云对象存储 COS 或第三方源的图片进行处理，提供基础处理能力（图片裁剪、转格式、缩放、打水印等）、图片瘦身能力（Guetzli 压缩、AVIF 转码压缩）、盲水印版权保护能力，同时支持先进的图像 AI 功能（图像增强、图像标签、图像评分、图像修复、商品抠图等），满足多种业务场景下的图片处理需求。
                            产品介绍产品文档
                            精选特惠 用云无忧
                            领券

                            腾讯云开发者

                            扫码关注腾讯云开发者

                            扫码关注腾讯云开发者

                            领取腾讯云代金券

                            热门产品

                            热门推荐

                            更多推荐

                            Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

                            深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

                            腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

                            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

                            Copyright © 2013 - 2024 Tencent Cloud.

                            All Rights Reserved. 腾讯云 版权所有

                            登录 后参与评论