Vue基本语法

最新推荐文章于 2024-07-25 09:24:40 发布

@@神农写代码

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量304

点赞数

分类专栏：前端文章标签：前端 vue

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/Fu_Shi_rong/article/details/119515278

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、Vue基本语法

1.1 Vue新建项目语法

基本语法：

vue.js引入

      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

1.2、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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{mess}}
    </div>
    <script>
            //代码实例化
            let app = new Vue({
            el: "#app",//用于挂在要管理的元素
            data: {  //定义数据
                mess: "您好"
            }
        });
    </script>
</body>
</html>

1.3、循环列表

语法如下：

<!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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> 
<body>
    <div id="app">
    <ul>
        <li  v-for="item in list">{{item}}</li>
    </ul>
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: { 
                list:['星际穿越','大话西游','少年派','盗梦空间']
            }
        });
    </script>
</body> 
</html>

1.4、计数器Demo实例，代码入如下：【按钮事件的使用语法】

<!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>计数器</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id ="app">
     <div>
         当前数字为：{{num}}
     </div>
     <div>
        <button v-on:click="add">加</button>
        <button v-on:click="cut">减</button> 
     </div>
    </div>
    <script>
        let app= new Vue({
            el :"#app",
            data:{
                num:0
            },
            methods:{
                add:function()
                { 
                    this.num++;
                },
                cut:function()
                {
                  this.num--;
                }
            }
        });
    </script>
</body>
</html>

总结：使用了新的指令与新的属性：

v-on:click：新的指令事件监听

methods:{ …} 新的属性定义事件

1.5、Vue中的MVVM模式

M：Model V:View VM:ViewModel

<!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>计数器</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body> 
    <!--View  层-->
    <div id ="app">
     <div>
         当前数字为：{{num}}
     </div>
     <div>
        <button v-on:click="add">加</button>
        <button v-on:click="cut">减</button> 
     </div>
    </div>
    <script>
        let app= new Vue({  //ViewModel 层
            el :"#app",
            data:{
                num:0   //Model 层
            },
            methods:{
                add:function()
                { 
                    this.num++;
                },
                cut:function()
                {
                  this.num--;
                }
            }
        });
    </script>
</body>
</html>

1.6 、创建vue实例传入的Options

el ：string 类型

作用：决定之后管理那个Dom对象

data： object | Function 在组件中data必须是个函数

作用：实例对应的数据对象，以及数据对象初始化

methods: function 方法里面是多个方法或函数

作用：定义属于Vue的一些方法，可以在其他地方低啊用，也可以在指令中使用，比兔 v-on:click =“方法名”。

1.7、Vue 的生命周期

生命周期的定义：一个事务从诞生到消亡的整个过程。

生命周期，如图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GsVYe1uH-1628407728708)(C:\Users\Mr.Fu\AppData\Roaming\Typora\typora-user-images\image-20210529202713481.png)]

<!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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id ="app"></div>
    <script>
        let app =new Vue({
            el:"#app",
            data :{

            },
            beforeCreate:function ()
            {
                console.log("执行beforeCrete");
            },
            //用的最多的是 created mounted 做网络请求  
            created:function ()
            {
                console.log("created");
            },
            mounted:function ()
            {
                console.log("mounted")
            }
        });
    </script>
</body>
</html>

总结：

beforeCreate：创建vue实例前用的钩子函数

created：创建vue实例后用的钩子函数

mounted：将编译好的html页面挂载到页面完成后执行的沟子函数

…详细请看上图。

1.8、基本语法：

插值操作语法，代码如下：

<!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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id = "app"> 
      {{mess}},小明 <br>
      {{FirstName+''+lastName}}   <br>
      {{counter*2}}

    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
              mess: "您好",
            FirstName: "李",
            lastName : "小明",
            counter :100
            }
        });
    </script>
</body>
</html>

总结：

Mustache 语法：也是双大括号语法，不仅仅可以写变量，也可以写表达式

1.9、v-once 指令

代码如下：

<!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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!-- v-once：数据初始化后，不允许修改数据-->
    <div id = "app"> 
    <h2 v-once>{{mess}}</h2>  
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
              mess: "您好"
            }
        });
    </script>
</body>
</html>

总结：

v-once：数据初始化后，不允许修改数据

2.0、V-html指令

代码如下：

<!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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> 
<body>
    <!-- v-html：-->
    <div id="app"> 
        <h2 v-html="mess"></h2>
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                mess: "<div>您好</div>"
            }
        });
    </script>
</body> 
</html>

2.1、v-text 指令

语法如下：

<!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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> 
<body>
    <!-- v-text：-->
    <div id="app">  
        <h2 v-text="mess"></h2>
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                mess: "<div>您好</div>"
            }
        });
    </script>
</body> 
</html>

总结：v-text：显示纯文本信息，不经常使用，如果h2 标签中有内容，它将会覆盖标签中的内容。

2.2、v-pre指令【用的比较少】

代码如下：

<!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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> 
<body>
    <!-- v-pre指令：是将{{mess}}字符串显示出来，不需要vue进行解析-->
    <div id="app">  
        <h2>{{mess}}</h2>
        <h2 v-pre>{{mess}}</h2>
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                mess: "您好"
            }
        });
    </script>
</body> 
</html>

总结：v-pre指令：是将{{mess}}字符串显示出来，不需要vue进行解析

2.3、v-cloak 指令：

代码如下：

<!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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> 
<body>
    <!-- v-cloak指令：
    作用：在vue解析之前有一个属性v-cloak指令；
    在vue解析后就没有这个v-cloak指令-->
    <div id="app">  
        <h2 v-cloak>{{mess}}</h2> 
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                mess: "您好"
            }
        });
    </script>
</body> 
</html>

总结：v-cloak指令：【不经常使用】
作用：在vue解析之前有一个属性v-cloak指令；
在vue解析后就没有这个v-cloak指令

2.4、v-bind 指令

代码如下：

 <!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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> 
<body>
    <!-- v-ding指令：动态绑定属性，也就是请求服务器，
        响应后将返回的数据绑定到属性上，比如：图片  src属性等等
        全写：v-bind：属性=""
        缩写：  :属性：=""
    -->
    <div id="app">  
         <!--全写-->
        <img v-bind:src ="imgurl" alt="图片"></img>
        <!-- 简写 -->
        <img :src ="imgurl" alt="图片"></img>
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                mess: "您好",
                imgurl:"https://img1.baidu.com/it/u=2496571732,442429806&fm=26&fmt=auto&gp=0.jpg"
            }
        });
    </script>
</body> 
</html>

总结：v-ding指令：动态绑定属性，也就是请求服务器，响应后将返回的数据绑定到属性上，比如图片 src属性等等
全写：v-bind：属性=""
缩写： :属性：=""

2.5、v-bind 绑定 class

代码如下：

<!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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> 
<style>
.active{
    color:red
}
</style>
<body>
    <!-- v-ding指令：动态绑定属性，也就是请求服务器，
        响应后将返回的数据绑定到属性上，比如：图片  src属性等等
        全写：v-bind：属性=""
        缩写：  :属性：=""
    -->
    <div id="app"> 
        <!-- 第一种  -->
        <div class="active">
            {{mess}}
        </div>
        <div :class="active">
            {{mess}}
        </div>
        <!-- 第二种  绑定对象 {类名：bool值}  bool值为true,加载 类名的样式 --> 
        <div :class="{active:isactive,line:isline}">
            {{mess}}
        </div>
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                mess: "您好",  
                active:"active",
                isactive:false,
                isline:true
            }
        });
    </script>
</body> 
</html>

总结：1）、在vue创建的实例中可动态加载视图中的样式。

2）、绑定对象语法 {类名：bool值} bool值为true,加载类名的样式

如果div中有两个class，一个是自定义的class，一个是动态绑定的class ，vue内部会将这两个class进行合并。

2.6、v-bind 动态绑定class 用方法动态绑定样式

使用方法动态绑定样式，代码如下：

<!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>Document</title>    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><style>    .active {        color: red    }    .Line {        font-size: 40px;    }</style> <body>    <div id="app" :class ="getClass()">        {{mess}}    </div>    <script>        let app = new Vue({            el: "#app",            data: {                mess: "您好",                isActive:true,                isLine:true            },            methods:{                getClass:function ()                {                   return {active:this.isActive,Line:this.isLine};                }            }        });    </script></body> </html>

2.7、v-bing 动态绑定style样式表

对象语法代码如下：

<!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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> 
    <div id="app" :style ="getStyle()">
        {{mess}}
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                mess: "您好",
                size:'100px',
                co:'red'
            } ,
            methods :
            {
                getStyle:function(){
                    return {fontSize:this.size,color:this.co};
                }
            }
        });
    </script>
</body> 
</html>

总结：将style样式文件写成一个对象放在方法中，直接绑定style样式。

2.8、计算属性的使用【computed】

代码如下：

<!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>计算属性</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<!-- 计算属性: -->
<div id="app">
   全名： {{fullName}}<br>
书的总价格：{{sumPrice}}
</div>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            mess: "您好",
            firstName: '李',
            lastName: '大明',
            books:[
                {id:110,name:'编程艺术',price:112},
                {id:111,name:'深入了解计算机原理',price:112}
            ] 
        },
        computed: {
            fullName: function () {
                return this.firstName + '' + this.lastName;
            },
            sumPrice:function()
            {
                let result = 0;
                //第一种方法
                for(let i=0;i<this.books.length;i++)
                {
                    result += this.books[i].price;
                }
              return result;
            }
        }
    });
</script>
</body> 
</html>

总结：计算属性是有缓存的，一次用到调用后，二次用到后就不需要调用。

2.9、计算属性setter与getter使用

代码如下：

<!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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{mess}}
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                firstName:"李",
                lastName:"晓明"
            },
            computed:{
                fullName:
                {
                    //如果想更改值，在set中操作
                    set:function(newValue)
                    {

                    },
                    //获取值
                    get:function()
                    {
                      return thi.firstName+""+this.lastName;
                    }
                }
            }
        });
    </script>
</body> 
</html>

总结：定义的计算属性，其实是个对象，而这个对象中有两个函数，一个set函数，另一个是get函数，set函数获取新值并赋值给其他变量，而get方法是返回值；一般开发过程中不使用set函数，只使用get函数，也就是只读，不可编辑。

3.0、计算属性与methods的对比

代码如下：

<!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>Document</title>    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head> <body>    <div id="app">        <div>            fullName计算属性： {{fullName}}            fullName 计算属性： {{fullName}}            fullName 计算属性： {{fullName}}            fullName 计算属性： {{fullName}}        </div>        <div>            getfullName 方法：{{getfullName}}            getfullName 方法：{{getfullName}}            getfullName 方法：{{getfullName}}            getfullName 方法： {{getfullName}}        </div>    </div>    <script>        let app = new Vue({            el: "#app",            data: {                firstName: "李",                lastName: "晓明"            },            //函数            methods: {             getfullName:function()             {                 console.log("getfullName");                return thi.firstName + "" + this.lastName;             }            },            //计算属性            computed: {                fullName: function () {                    console.log("fullName");                    return thi.firstName + "" + this.lastName;                }            }        });    </script></body> </html>

总结：计算属性有缓存机制而methods方法没有缓存机制，以上面的代码为例，计算属性如果值没有发生的变的话，只会输出1次console.log(“fullName”)，而methods方法会输出4次 console.log(“getfullName”)，也就是说计算属性的性能要比方法高。

3.1、块级作用于 let与var ES6

总结：

ES5之前的if for 是没有块级作用域的，我们只能借助function的作用域来解决应用外面变量的问题，

let是ES6的语法，它是有块级作用域的。

3.2、const使用以及注意点

代码如下：

<!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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{mess}}
    </div>
    <script>
        //named的值不可修改
        const name ="大明";
        //对象属性是可以修改
        const da={
            mess: "您好"
        }
        da.mess="再见";
        let app = new Vue({
            el: "#app",
            data: da
        });
    </script>
</body>
</html>

总结：

const ：常量，不可修改值。

在开发过程中优先使用const，只有需要改变某一个标识符时候使用let。

注意点：一旦使用const修饰的标示符被赋值之后，就不能再修改值。

使用const定义标识符的时候，必须赋值。

常量的含义是指向对象不能修改，但是可以改变对象内部的属性。

3.3、ES6对象的字面量增强写法

代码如下：

<!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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> 
<body> 
    <script>
        //属性的增强写法
        const name = "您好";
        const age = 13;
        const height = 1.88;
        let value =
        {
            name,
            age,
            height
        }
        console.log(value);
        //函数的增强写法
        const func = {
            add(){
              console.log ("函数的增强写法");
            }
        };
        console.log(func.add());
    </script>
</body> 
</html>

总结:

属性的增强写法与函数的增强写法看以上代码示例。

3.4、v-on的基本使用、语法糖、传参以及修饰符

介绍：

作用：绑定事件监听器

简写：@

参数：event

预期：Function | InlineStatement | Object

代码如下：

<!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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 无参  @click的方法名可以不加花括号 -->
        <!-- 标准写法 -->
        <button v-on:click="add">无参</button>
        <!-- 简写 -->
        <button @click="add">无参</button>
        <!-- 有参  如果函数有参数，但是没有传递参数，Vue默认会传递一个浏览器自动生成event事件对象作为参数传递到函数中-->
        <button @click="add1(10)">有參1</button>
        <!-- 方法定义时，我们需要event参数，也需要其他参数
             在调用方法时，如何手动获取浏览器自动生成的event事件，前面加个$符号：$event
        -->
        <button @click="add2(10,$event)">有參2</button>
        <!-- 如果传递的参数为变量 -->
        <button @click="add3(mess)">有參3</button>
        <!-- v-on修饰符  .stop 为click的修饰符；
            如果不加这个修饰符，则会触发两个事件，一个是：cli_div  另一个是 decorate，加上修饰符后，则只会触发  decorate 事件-->
        <div @click="cli_div">
            <button @click.stop="decorate">修饰符</button>
        </div>
        <!-- prevent修饰符是阻止默认事件    应用场景为提交form表单-->
        <form action="www.baidu.com">
            <div>
                <button @click.prevent="submit">提交form表单</button>
            </div>
        </form>
        <!-- 监听某个按键的事件 -->
        <div>
            <!-- 当按下键盘松开后触发的事件-->
            <input type="text" @keyup="keyup">
            <div>
                <!-- 当按下回车键触发的事件-->
                <input type="text" @keyup.enter="keyup">
            </div>
        </div>
        <div>
            <!-- 只触发一次修饰符 -->
            <button @click.once="once">只触发一次</button>

        </div>
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                mess: "您好"
            },
            methods: {
                add() {
                    console.log("触发add事件");
                },
                add1(num) {
                    console.log(num);
                },
                add2(num, event) {
                    console.log(num + "-----" + event);
                },
                add3(mess) {
                    console.log(mess);
                },
                decorate() {
                    console.log("触发修饰符按钮");
                },
                cli_div() {
                    console.log("触发div事件");
                },
                submit() {
                    console.log("触发表单事件");
                },
                keyup() {
                    console.log("keyup事件");
                },
                once()
                {
                    console.log("once事件");
                }
            }
        });
    </script>
</body>

</html>

总结：v-on:click 可以简写为@click，无参可以不加花括号。

有参：如果函数有参数，但是没有传递参数，Vue默认会传递一个浏览器自动生成event事件对象作为参数传递到函数中；
在调用方法时，如何手动获取浏览器自动生成的event事件，前面加个 $符号：$ event

访问修饰符的使用：

stop修饰符：只触发当前自己事件，父级的事件不触发。

prevent修饰符：阻止默认事件的触发，应用场景为：form表单，可以阻止默认的事件表单提交。

keyup.* 某个键盘键的触发修饰符，比如：Enter

once修饰符:只触发一次事件。

3.5、v-if v-els-if v-else基本使用

代码如下：

<!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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
       值： {{mess}}
       <p v-if="source>90">优秀</p> 
       <p v-else-if="source>=80">良好</p>
       <p v-else>及格</p> 
    <p ></p>
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                mess: "您好",
                source:50
            }
        });
    </script>
</body>
</html>

总结：

如果有多个v-else-if 就不建议在标签上判断，直接用计算属性来判断。

3.6、v-show与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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
       值： {{mess}}
       <p v-if="isshow">优秀</p> 
       <p v-show="isshow">良好</p> 
    <p ></p>
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                mess: "您好",
                isshow:true
            }
        });
    </script>
</body>
</html>

总结： v-if条件为false时，包含v-if指令的元素，根本就不存在dom中，

v-show条件为false时，v-show只是给我们的元素添加了一个行内样式 dispaly：none

开发中我们如何选择：

当需要在显示与隐藏之间切换频繁是，则是使用v-show 性能高

当只有一次切换时，通过使用v-if

7、v-for的基本使用

代码如下：

<!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>demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 官方推荐我们使用v-for的时候，给对应的元素或者组件添加上一个:key 属性。 -->
        <!-- 遍历数组 item :值   index：索引 -->
        <ul>
            <li v-for ="(item,index) in list">{{index}}----{{item}}</li>
        </ul>
        <!-- 遍历对象  value:属性值  key：属性名   index：索引值 -->
        <ul>
            <li v-for ="(value,key,index) in info">{{value}}-{{key}}-{{index}}</li>
        </ul>
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
              list:['海王','阿里巴巴'],
              info:{
                  name:"晓明",
                  age:18,
                  height:1.99
              }
            }
        });
    </script>
</body> 
</html>

总结：

官方推荐我们使用v-for的时候，给对应的元素或者组件添加上一个:key 属性。

目的是更好的复用。

3.8、数组中哪些方式是响应式

代码如下：

<!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>demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="item in list">{{item}}</li>
        </ul>
        <div><button @click="btn_click">提交</button></div>
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                list: ['海王', '阿里巴巴', 'aaaaa', 'bbbbb']
            },
            methods: {
                btn_click() {
                    //数组添加元素
                    //可添加多个或者一个，添加到尾部
                    //  this.list.push('aaa','bbbb');
                    //删除数组的最后一个元素
                    // this.list.pop();
                    //删除数组中的第一个元素
                    // this.list.shift();
                    //在数组最前面添加元素，可添加一个或者多个
                    // this.list.unshift('aaaa','bbbb','cccc');
                    //  splice 的作用是删除、插入、替换元素
                    //删除元素：splice(start，要删除几个元素) 第二个参数书要删除几个元素，如果没有传，就删除后面所有的元素
                    //this.list.splice(1,2);//删除两个元素
                    //this.list.splice(1);//删除处开始的第一个元素外的所有元素
                    //替换元素：splice(start，要替换几个元素，替换元素值)；第二个参数表示要替换几个元素，第三个参数是要替换的值
                    //  this.list.splice(1,3,'a','b','c');
                    //插入元素  第二个参数是0，并且后面跟上插入值
                    // this.list.splice(2,0,'ddd','eee');
                }
            }

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

总结：

push : 数组元素添加，可以添加一个或者多个元素且元素放在最后。

pop：删除数组的最后一个元素。

shift：删除数组的第一个元素。

unshift：数组元素添加，可以添加一个或者多个元素且放在元素的最前面。

splice:删除/插入/替换元素。

删除元素语法如下： start:要从第几个开始是删除；num：删除几个元素，如果只有一个start，那么会删除start后的所有元素

this.数组.splice (start,num);

替换元素语法如下： start:要从第几个开始替换 num:要替换几个元素：value：要替换的元素值，可以是多个。

this.数组.splice (start,num,value1,value2…);

插入元素语法如下 start:要从第几个开始插入 0：为默认值 value：要插入的值，可以是多个。

this.数组.splice (start,0,value1,value2…);

3.9、javascript 高阶函数

代码如下：

<!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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> 
<body>
    <div id="app">{{mess}}</div>
    <script>
        let aqpp = new Vue({
            el: "#app",
            data: {
                mess: "你好"
            }
        });
        //高阶函数
        let num = [1, 2, 3, 4]
        //过滤  返回小于5
        //filter中的函数有一个要求：必须返回一个bool值
        //当返回true时，函数内会自动将这次的回调函数的值加入到新的数组中。
        //当返回FALSE时，函数内部会过滤到这次的n
        //newnum：为新的数组
        let newnum = num.filter(function (n) {
            return n < 3;
        });
        // map函数：是元素的值发生变化时使用map函数  将newnum过滤的数据，每个元素乘以2 【加  减 乘 除】，并且返回一个新的数组
       let newnum1= newnum.map(function(n){
        return n*2;
        });
        //reduce 函数  作用：对数组中所有的元素进行汇总。
        //provalue:上一次返回的值
        //n:数组中的元素
        //0：为初始值
        newnum.reduce(function(provalue,n){
           return  provalue + n;
        },0);  
    </script>
</body> 
</html>

总结：

filter 过滤函数：当回调函数返回值为true时，它将会符合逻辑条件的数组元素返回给一个新数组中，也是上述代码中的 newnum，则返回值为false时，不添加到新的数组中。

map 函数：当数值中元素的值发生变化是，使用map函数，回调函数返回的一个发生变化后的值，然后添加到新的数组中。

reduce 函数：将数组中的元素进行汇总【加减乘除】，回调函数中有两个参数，一个参数是：汇总后上一次的返回值，另个参数为：数组元素中的值。

4.0、v-model表单绑定双向绑定

代码如下：

<!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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!--  input  基本语法 -->

        基本语法:<input type="text" name="na" v-model="mess"><br>
        <!-- v-model 原理 -->
        v-model 原理:<input type="text" name="na" :value="mess" @input="mess = $event.target.value">
        <div>
            {{mess}}
        </div>

        <!-- radio 绑定语法 -->
        radio 绑定语法:
        <input type="radio" id="nan" name="sex" value="男" v-model="sex"> 男
        <input type="radio" id="nv" name="sex" value="女" v-model="sex"> 女
        <br>
        <h2>{{sex}}</h2>

        <!-- 复选框的绑定语法 -->
        单选框：<input type="checkbox" name="agree" v-model="isAgree"> 同意协议<br>
        您当前的选择为：{{isAgree}}<br>
        <button :disabled="!isAgree">提交</button> <br>
        <!-- 多个单选框的语法 -->
        <input type="checkbox" v-model="list" value="篮球">篮球
        <input type="checkbox" v-model="list" value="足球">足球
        <input type="checkbox" v-model="list" value="排球">排球 <br>
        您当前的选择：{{list}}<br>
        <!-- 下拉列表   -->
         下拉列表  选择单个 :
        <select  name = "fruit" v-model="fruit">
            <option value="苹果">苹果</option>
            <option value="香蕉">香蕉</option>
            <option value="橙子">橙子</option>
        </select> <br>
        您选择的水果是：{{fruit}}<br>
        下拉列表选择多个 :
        <select  name = "fruits" v-model="fruits" multiple>
            <option value="苹果">苹果</option>
            <option value="香蕉">香蕉</option>
            <option value="橙子">橙子</option>
        </select> <br>
        您选择的水果是：{{fruits}}<br>
    <br>
    </div>
    <script>
        let aqpp = new Vue({
            el: "#app",
            data: {
                mess: "你好",
                sex: "男",
                isAgree: false,
                list: [],
                fruit:"苹果",
                fruits:[] 
            }
        });
    </script>
</body>

</html>

总结：

v-model的基本语法：v-model = “变量名”。

原理：单项绑定 input的value属性，然后通过 input事件监听，对mess进行修改。

radio单选按钮的使用，单选按钮顾名思义的就是多个单选按钮只能选中一个，需要加name=value ,value必须是一致的，如果有v-model绑定的value值，那么可以将name属性去掉。

checkbox复选框：当个复选框，选中并v-model绑定后，返回的类型为bool，多个复选框选中并v-model绑定后，返回的是一个数组。

select 下拉列表：要注意的是：v-model要绑定在select上，单选和多选的区别是：单选：只返回一个值，多选是返回一个数组，并且在select上添加 multiple 属性。

4.1、input 修饰符

代码如下：

<!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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- input  修饰符：lazy 修饰符：懒加载    当用户输入完成失去焦点后，在加载到对象属性mess中-->
        lazy 修饰符： <input type="text" v-model.lazy="mess">
       <h2>{{mess}}</h2><br>
        <!-- input  修饰符：number 修饰符：数字  只能输入数字，不能输入字符串-->
        number 修饰符： <input type="text" v-model.number="age">
       <h2>{{age}}</h2><br>
         <!-- trim  修饰符：去掉两边的空格-->
         number 修饰符： <input type="text" v-model.trim="name">
         <h2>{{name}}</h2><br>
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                mess: "",
                age:0,
                name:""
            }
        });
    </script>
</body>

</html>

总结：

lazy：可以让数据失去焦点或者回车才会更新对象中的属性值。

number：只能让input文本框输入数字，不能输入文字。

trim：将用户在文本框输入的空格去掉。

@@神农写代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基本语法

一、Vue基本语法1.1 Vue新建项目语法基本语法： vue.js引入1.2、Vue实例化，代码如下： Document 1.3、循环列表语法如下： Document 总结：使用了新的指令与新的属性： v-on:click：新的指令事件监听 methods:{ …} 新的属性定义事件1.5、Vue中的MVVM模式 M：Model V:View VM
复制链接

扫一扫