vue

Posted kuxingseng95

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue相关的知识，希望对你有一定的参考价值。

vue

vue介绍

Vue.js是前端三大新框架：Angular.js、React.js、Vue.js之一，Vue.js目前的使用和关注程度在三大框架中稍微胜出，并且它的热度还在递增。

Vue.js可以作为一个js库来使用，也可以用它全套的工具来构建系统界面，这些可以根据项目的需要灵活选择，所以说，Vue.js是一套构建用户界面的渐进式框架。

Vue的核心库只关注视图层，Vue的目标是通过尽可能简单的 API 实现响应的数据绑定，在这一点上Vue.js类似于后台的模板语言。

Vue也可以将界面拆分成一个个的组件，通过组件来构建界面，然后用自动化工具来生成单页面(SPA - single page application)系统。

Vue.js使用文档及下载Vue.js

Vue.js使用文档已经写的很完备和详细了，通过以下地址可以查看： https://cn.vuejs.org/v2/guide/
vue.js如果当成一个库来使用，可以通过下面地址下载： https://cn.vuejs.org/v2/guide/installation.html

vue的引入方式

和js一样，vue也是需要引包来进行使用

    <script src="./js/vue.js"></script>

引入包之后，也是在<script></script>中进行使用，开发中可以使用开发版本vue.js，产品上线要换成vue.min.js。

vue的基本用法

作用域

在使用之前要知道作用域的概念，通常我们把需要改变的地方，都放到一个盒子里，这个盒子通常是用div标签包裹的，我们也需要给这个盒子取一个名字，类名还是id名都可以，这是为了以后更方便的找到它。

基本使用

vue和js不同，它是需要改变标签的

首先，用一个盒子来包裹需要改变的内容（当然，也可以不包裹，直接用选择器选到，这个盒子只是为了减少后续的操作）然后给这个盒子取一个名字，这里我给它取了一个类名为div1，

    <div class="div1">     
    </div>

然后往里面添加一个需要改变内容的标签

    <div class="div1">
        <div class="div2">{{content}}</div>
    </div>

然后在<script>标签中新建一个vue对象

    <script>
            var vm = new Vue({      // 创建vue对象
                el:‘.div1‘,         // 绑定操作的作用域
                data:{              //写入数据
                    content:"vue的基本使用"
                }
            })
    </script>

 

运行之后就完成了一个简单vue操作。

基本语法

操作数据：标签体中加入"{{变量名}}"用来接受数据，然后在<script>标签中创建对象并在data中设置相应的值

修改属性：v-bind:（可以简写为":"），使用方法是在需要改变的属性前加入"v-bind:"或者":"，然后将属性值换成变量名，然后在vue对象的data中加入对应内容即可。

调用方法：v-on:（可以简写为"@"），使用方法是在需要改变的的事件前面加上"v-on:"或者"@"，然后将函数换成函数名，然后在vue对象的methods中加入相关的函数即可。

三个的综合例子：

技术分享图片 
<!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>02-vue的基本语法</title>
    <script src="js/vue.js"></script>
    <script>
        window.onload = function () {
            // 创建vue对象
            var vm = new Vue({
                el:‘.box‘,
                data:{
                    content:"操作数据",
                    linkData:"淘宝链接",
                    url:‘http://www.taobao.com‘,
                    counter:0
                },
                methods:{
                    fnAddClick:function(){
                        // this --vue对象
                        this.counter += 1;
                    }
                }
            })  
        }
    </script>
</head>
<body>

    <div class="box">
        <!-- // 3.调用方法 指令  v-on: -->
        <button v-on:click="fnAddClick">计数器: {{counter}}</button>
        <!--  // 2.修改属性 指令 v-bind: -->
        <a v-bind:href="url" target=‘_blank‘>{{linkData}}</a>
        <!--  // 1.操作数据 -->
        <p>{{content}}</p>
    </div>
    
    
</body>
</html>
View Code

其他语法：

技术分享图片 
<!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>02-vue的基本语法</title>

    <style>
        .red{
            color: red;
        }
        .font{
            font-size:50px;
        }
    </style>
    <script src="js/vue.js"></script>
    <script>
        window.onload = function () {
            // 三元运算符
            // (条件)?"值1":"值2"  条件为真则为值1，否则为值2


            // 创建vue对象
            var vm = new Vue({
                el:‘.box‘,
                data:{
                    counter:0,
                    contentPragraph:‘三目运算 三元运算‘,
                    isRed:false,
                    sStr:‘12345678‘
                },
                 
                
            })  
           
        }
    </script>
</head>
<body>

    <div class="box">
        <!-- 下面用的都是简写形式 -->

        <!-- 3.js 链式  字符串反转-->
        <p>{{sStr.split(‘‘).reverse().join(‘‘)}}</p>

        <!-- 2.三目运算 三元运算 -->
        <p :class="isRed?‘red‘:‘font‘">{{contentPragraph}}</p>

        <!-- 1.累加的表达式 -->
        <button @click="counter += 1">新的计数器:{{counter}}</button>

       
    </div>
    
    
</body>
</html>
View Code

vue的属性

其实前面已经说了三种vue属性：el、data和methods，它们一个是找到作用域，一个是设置数据和属性，一个是增加方法。

计算属性

基本语法的其他语法介绍中介绍了字符串反转的例子，反转的过程写到了标签中，没有做到标签和js的分离，计算属性就可以改善这个问题

下面是将反转内容写到属性中的方法：

技术分享图片 
computed:{
                    reverseMessage:function(){
                        return this.message.split(‘‘).reverse().join(‘‘);
                    }
                },
View Code

使用的时候，直接在模板中调用计算属性中自定义的reverseMessage方法即可

整体代码：

技术分享图片 
<!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>03-vue的计算和倾听属性</title>
    <script src="js/vue.js"></script>
    <script>
        window.onload = function () {
            
            var vm = new Vue({
                el:‘.app‘,
                data:{
                    message:‘ABCDEFG‘, 
                },
               computed:{
                    reverseMessage:function(){
                        return this.message.split(‘‘).reverse().join(‘‘);
                    }
                },


            })
        }
    </script>
</head>
<body>

    <div class="app">

        <!-- <p>{{message.split(‘‘).reverse().join(‘‘)}}</p> -->
        <p>计算属性:{{reverseMessage}}</p>
       
        
    </div>
    
</body>
</html>
View Code

倾听属性

当我们修改一个值的时候，可以用倾听属性来观察新值和旧值

倾听属性用的是watch，给一个值设置一个function方法，然后传入两个数就可以分别记录新值和旧值

整体代码：

技术分享图片 
<!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>03-vue的计算和倾听属性</title>
    <script src="js/vue.js"></script>
    <script>
        window.onload = function () {
            
            var vm = new Vue({
                el:‘.app‘,
                data:{
                    counter:0, 
                },

                watch:{
                    counter:function(newVal,oldVal){
                        console.log(newVal + ‘------‘ + oldVal);
                    }
                }

            })
        }
    </script>
</head>
<body>

    <div class="app">

        <button @click="counter += 1"> 累加量:{{counter}}</button>

    </div>
    
</body>
</html>
View Code

过滤器属性

过滤器属性是对内容进行判断过滤用的它使用的是filters，增加过滤器和增加方法是很类似的。

完整代码：

技术分享图片 
<!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>过滤器</title>
    <script src="js/vue.js"></script>
    <script>
        window.onload = function () {

            var vm = new Vue({
                el:‘.box‘,
                data:{
                    money:1000,
                },
                filters:{
                    moneyFiter:function(a){
                        if (a > 100) {
                            return "￥" + a;
                        }else{
                            return "小零钱"
                        }
                    }
                }
            })
       
        }
    </script>
</head>
<body>
    <!-- money=50  ￥50 -->
    <div class="box">{{money | moneyFiter}}</div>

    
</body>
</html>
View Code

上面设置的是局部的过滤器，还有一种是设置全局的过滤器：

完整代码：

技术分享图片 
<!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>过滤器</title>
    <script src="js/vue.js"></script>
    <script>
        window.onload = function () {
            // 全局的过滤器
            Vue.filter(‘movie‘,function (a) {
                
                    if (a > 18) {
                        return "允许看电影!"
                    } else {
                        return "小毛孩!"
                    }
            })
            
             var vm2 = new Vue({
                el:‘.app‘,
                data:{
                    age:28
                }
            })
    
        }
    </script>
</head>
<body>

    <div class="app">{{age | movie}}</div>

</body>
</html>
View Code

class和style的绑定

技术分享图片 
<!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>04-class和style的绑定</title>
    <style>
        .red{
            color:red;
        }
        .font{
            font-size: 50px;
        }
        .line{
            text-decoration: underline;
        }
    </style>
    <script src="js/vue.js"></script>
    <script>
        window.onload = function () {
            var vm = new Vue({
                el:‘.box‘,
                data:{
                    cla:"red font",
                    isTrue:false,
                    isRed:true,
                    classObj:{
                        red:true,
                        font:true
                    },
                    classList:[‘red‘,‘line‘],
                    style01:{
                        "font-size":"30px"
                    },
                    style02:{
                        "font-weight":"bold",
                    },
                   
                }
            })
        }
    </script>
</head>
<body>
    <!-- class 样式类名称 -->
    <div class="box">
        <!-- style ===== -->
        <!-- 方式二：通过sytle列表
        <p :style="[style01,style02]">style第二种写法</p> -->

        <!-- 方式一：通过修改style值
        <p :style="style01">style第一种写法</p> -->


        <!-- ============== class 样式类名称-->

        <!-- 方式五：通过data中变量列表来改变
        <p :class="classList">5.class 变量的列表List</p> -->
        
        <!-- 方式四：通过标签变量列表修改
        <p :class="[‘line‘,‘font‘]">4.class 变量的列表</p> -->

        <!-- 方式三：通过data中字典中对css类的判断改变css值
        <p :class="classObj">3.class 变量的对象</p> -->

        <!-- 方式二：通过对css类在标签中进行判断，然后改变css属性
        <p :class="{line:isTrue,red:isRed}">2.class 变量的{类名称:变量}</p> -->
            
        <!-- 方式一：通过直接修改class值来改变css属性
        <p :class="cla">1.class 变量的字符串</p> -->

    </div>
    
</body>
</html>
View Code

 

条件渲染

介绍v-show,v-if,v-else这三个命令：

技术分享图片 
<!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>05-条件渲染</title>
    <script src="js/vue.js"></script>
    <script>
        window.onload = function () {
            var vm = new Vue({
                el:‘.app‘,
                data:{
                    isFirst:6,
                    isShow:true
                }
            })
           
        }
    </script>
</head>
<body>
    <div class="app">
        <!-- v-show 显示
        实质 display:none
        注意在vue中使用v-show ;原先css代码不能设置display属性
        -->

        <p v-show="isShow">v-show 是否显示标签</p>

        <!-- <p v-if="isFirst == 1">条件渲染 第一个标签</p>
        <p v-else-if="isFirst == 2">条件渲染 第222222个标签</p>
        <p v-else-if="isFirst == 3">条件渲染 第3333个标签</p>
        <p v-else>条件渲染 第4444个标签</p> -->

        <!-- <p v-if="isFirst">条件渲染 第一个标签</p>
        <p v-else>条件渲染 第222222个标签</p> -->

        <!-- v-if 如果是false 删除了标签 -->
        <!-- <p v-if="isFirst">条件渲染 第一个标签</p> -->

    </div>
    
</body>
</html>
View Code

 注意：v-show和css中的display会有冲突，需要禁用css中的display

列表渲染

技术分享图片 
<!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>01-vue的基本使用</title>
    <script src="js/vue.js"></script>
    <script>
        window.onload = function () {
            
           var vm  = new Vue({
               el:‘.box‘,
                data:{
                    itemList:[1,2,3,4,5,6],
                    indexList:["A","B","C","D"],
                    objData:{
                        name:‘马云‘
                    },
                    dataList:[
                        {
                            name:"张一鸣",
                            age:‘60‘
                        }, {
                            name:"马化腾",
                            age:‘16‘
                        },
                    ]
                }

           })
        }
    </script>
</head>
<body>
    <div class="box">
        <!-- <div v-for="item in itemList">{{item}}</div> -->

        <ul class="list">
            <!-- 列表渲染 -->
            <li v-for="item in itemList">{{item}}</li>
            <!-- 这个用法和python类似，v-for中的item就是模板中的item，这个会自动遍历和渲染 -->


            
            <li v-for="(item,index) in indexList">
                <!-- 两个参数：一个是内容，一个是下标 -->
                {{index}} ------- {{item}}
            </li>

            <!-- 2.只有一个对象 -->
            <li v-for="obj in objData">
                <!-- 这个遍历出来的键值对值显示值 -->
                {{obj}}
            </li>
            <li v-for="(obj,key) in objData">
                <!-- 两个参数：一个是值，一个是键 -->
                  {{key}}--------{{obj}}
            </li>

            <!-- 3.批量的对象集合 -->
            <li v-for="dataObj in  dataList">
                <!-- 这个就相当于遍历出来字典 -->
                {{dataObj.name}} ----- {{dataObj.age}}
            </li>
        </ul>

    </div>

    
</body>
</html>
View Code

事件处理

事件处理中包括两个部分，一个是阻止事件传递，一个是阻止默认的提交事件

技术分享图片 
<!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>07-事件的处理</title>
    <script src="js/vue.js"></script>
    <script>
        window.onload = function () {
            
            var vm = new Vue({
                el:‘.box‘,
                data:{

                },
                methods:{
                    fnFather:function(){
                        alert(‘father‘);
                        
                    },
                    fnSon:function(){
                        alert(‘son‘);

                    },
                    fnSubmit:function(){
                        alert(‘提交事件‘);
                    },
                    fnBtnSub:function () {
                        alert(‘提交按钮点击‘)
                    }

                }

            })
        }
    </script>
</head>
<body>
    <div class="box">
        <!-- 阻止默认的提交事件 -->
        <!-- 两种方式：一个是修改action，一个是修改click -->

        <!-- 方式一： -->
        <!-- <form action="" @submit.prevent="fnSubmit"> -->
            <form action="">
            <input type="text" name="user">
            <!-- 方式二 -->
            <input type="submit" @click.prevent="fnBtnSub">

        </form>

        <!-- 阻止事件的传递 @click.stop-->
        <div @click="fnFather" class="father" style="background:red">
            father
            <div @click.stop="fnSon" class="son" style="background:green">son</div>
        </div>

    </div>
    
</body>
</html>
View Code

 


以上是关于vue的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段(vue主模板)

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段2——.vue文件的模板

VSCode自定义代码片段13——Vue的状态大管家