[Vue] 模板语法

最新推荐文章于 2022-05-04 11:45:41 发布

秃小陈

最新推荐文章于 2022-05-04 11:45:41 发布

阅读量227

点赞数

分类专栏： vue 笔记 JavaScript 文章标签： vue javascript

本文链接：https://blog.youkuaiyun.com/m0_47652477/article/details/116350009

版权

笔记同时被 3 个专栏收录

42 篇文章

订阅专栏

JavaScript

11 篇文章

订阅专栏

vue

8 篇文章

订阅专栏

第一章插值操作

将值插入到dom上面进行显示

1.1 Mustache

读音是[ˈmʌstæʃ]

其实Mustache语法的表现形式就是{{}}, 这样写数据就是响应式的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{message}} &nbsp;你就是弟弟</h2>
    <!--    mustache语法里面可以写一些简单的表达式 (加减乘除都行)-->
    <h2>{{firstName + ' ' + lastName}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',//用于挂载要管理的元素
        data: { //用于定义数据
            message: '我是你爹!',
            firstName: "Kobe",
            lastName: "bryant"

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

<!--运行结果
我是你爹!  你就是弟弟
Kobe bryant
-->

我们能够发现:

这个语法里面可以进行一些简单的运算,比如: 字符串可以相加, 数字可以进行一些简单的运算
括号外面也可以写内容,外面的内容不会受到影响

1.2 v-once

有些情况下,我们不希望页面随着数据的改变而随意改变

其实这也可以叫做 消除响应式

这个时候,我们就可以使用v-once

作用以及注意事项

该指令后面不需要跟任何表达式 (反例: v-for后面就是要表达式的)
该指令表示元素和组件只渲染一次 ,不会随着数据的改变而改变

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h2 >{{message}}</h2>
    <h2 v-once>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',//用于挂载要管理的元素
        data: { //用于定义数据
            message: '我是你爹!'

        }
    })
</script>

</body>
</html>

我们在浏览器上对这个message属性进行修改,我们会发现下面的现象

在这里插入图片描述

我们会发现绑定了v-once的标签没有随着message的改变而改变,没有绑定的就值改变了这就是他的作用

1.3 v-html

某些情况下,我们从服务器请求到的数据本身就是一个HTML代码

如果我们直接用{{}}来输出,会将HTML那些标签一起输出
但是我们可能希望的是按照HTML格式进行解析,并且显示对应的内容

因此,我们就要用到v-html

他的作用就是 对于v-html = "xxx", 将xxx里面的内容解析出来进行渲染

**注意: **

这里指令后面需要加一个参数,参数的内容就是要解析的那个数据的变量的名字
写了v-html之后,标签里面的内容都不显示

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app" v-html="message">
</div>

<script src="../js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',//用于挂载要管理的元素
        data: { //用于定义数据
            message: '<a href="https://www.baidu.com/">百度一下,你就知道</a>'

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

图片如下

在这里插入图片描述

点进去就是百度搜索了,目的达到

1.4 v-text

用法和mustache比较相似,但是他的内容是放在自己的参数里面的

v-text = "xxx",xxx就是data里面的某个你想要展示的变量

注意: 写了这个之后,标签里面的内容将会被覆盖

注意: 我们一般不使用这个,就是因为它会覆盖标签里面的内容,不够灵活

1.5 v-pre

有些时候,我们不希望标签里面的内容被解析,这时候,我们就可以使用v-pre指令

它不需要参数,就是一个指令

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app" >
    <h2 v-pre>{{message}}</h2>
    <h2>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',//用于挂载要管理的元素
        data: { //用于定义数据
            message: '我是你爹'

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

图示:

在这里插入图片描述

可以看到,有v-pre指令的这个标签**,里面的mustache语法没有被解析**

1.6 v-cloak

某些情况下,我们浏览器可能直接会显示出来未编译的Mustache标签

这时候,我们就需要用到v-cloak标签

cloak的意思是斗篷,遮盖物

**作用: **

vue解析出来之前,标签就有一个v-cloak属性
解析出来之后,就会自动删除这个属性

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<!--如果不写v-cloak的话,那么刚开始的2秒,内容就会直接显示{{message}},用户体验十分不友好-->
<div id="app" v-cloak>
    {{message}}
</div>


<script src="../js/vue.js"></script>
<script>
    setTimeout(function () {
        let app = new Vue({
            el: '#app',//用于挂载要管理的元素
            data: { //用于定义数据
                message: '我是你爹!'

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

这段代码就是,vue解析之前,div标签里面有v-cloak属性, 我们对拥有这个属性的标签先进行隐藏操作,等到vue解析出来之后,这个属性删除了,解析出来的内容也就出来了,用户永远看不到没有解析时候的内容

第二章绑定属性

2.1 v-bind

概念引入

前面学习的指令主要作用是将值插入到我们的模板中

同时,我们需要知道,Mustache语法无法用于属性上面

但是,除了内容需要动态来决定外,某些属性我们也希望动态来绑定.

例如: 动态绑定a元素的href属性
例如: 动态绑定img元素的src属性

这个时候,我们就可以使用v-bind指令

作用: 动态绑定属性
缩写: :
预期: any(有参) || Object(无参)
参数: attrOrProp(optional)

基本用法

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--    这个就是错误的做法-->
    <!--    <img src="{{message}}" >-->
    <!--    正确用法-->
    <img v-bind:src="message">
    <!--    简便写法(语法糖)-->
    <img :src="message">
    <!--    同理 a标签也是一样的用法-->

</div>


<script src="../js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',//用于挂载要管理的元素
        data: { //用于定义数据
            message: 'https://pic4.zhimg.com/v2-50cf2f8c3c679853f8a24b581bd4cf75_r.jpg?source=172ae18b'

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

页面就是两个图片,正常显示

2.2 动态绑定class

对象语法(常用)

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active {
            color: red;
        }

        .line {
            text-decoration: underline;
        }
    </style>
</head>
<body>

<div id="app">
    <!--    <h2 :class="active">{{message}}</h2>  这种写法没什么用,脱裤子放屁-->
    <!--    下面这个大括号里面代表一个双列集合(对象),里面放着键和值,我们通过改变里面的值来改变这个样式-->
    <!--    这个语法也叫做对象语法 -->
    <h2 v-bind:class="{line: isLine,active:isActive}">{{message}}</h2>
    <!--    我想通过一个按钮来改变字体的颜色和下划线样式-->
    <button v-on:click="btnClick">按钮</button>
</div>

<script src="../js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',//用于挂载要管理的元素
        data: { //用于定义数据
            message: '我是你爹!',
            isActive: 'true',
            isLine: 'true'
        },
        methods: {
            btnClick: function () {
                this.isActive = !this.isActive;
                this.isLine = !this.isLine;
            }
        }
    })
</script>
</body>
</html>

注意: class 和 v-bind:class = "{}"这两者是可以同时存在的,前者用于不用修改的类名 , 对于经常需要被修改的类名,就用后者(通常用来调样式的类名就用这个)

用法总结

在这里插入图片描述

数组语法(少用)

 <h2 class = "title" :class="['line','active']">{{message}}</h2>

这个表现的类名就有三个了,这个没什么用,就用于类名比较多,且保存在数组的时候才会用到,基本上不会用到

也可以

 <h2 class = "title" :class="[line,active]">{{message}}</h2>

这里的line和active是data里面的数据的名字,上面的只是字符串,并不一样

2.3小作业

要求: 用v-for先将movies数据展示出来(创建多个li),同时要求,点到那个li,哪个li背景就变成红色,其他的不能变成红色(用v-bind)实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active {
            background-color: red;
        }
    </style>
</head>
<body>

<div id="app">
    <ul>
        <li @click = "liClick(aindex)"  :class="{active: index == aindex}" v-for="(m,aindex) in movies">{{m}}</li>
    </ul>
</div>

<script src="../js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',//用于挂载要管理的元素
        data: { //用于定义数据
            movies: ['海上钢琴师', '泰坦尼克号', '盗梦空间', '辛德勒的名单', '善良的小姨子'],
            index: -1
        },
        methods: {
            liClick: function (e){
                this.index = e;
            }
        }
    })
</script>
</body>
</html>

2.4 动态绑定style

同理,我们可以用v-bind:style来动态绑定一些样式,而不是写死

写属性名的时候,有两种写法(以font-size为例)

我们可以使用驼峰式 fontSize
我们也可以使用短线分隔(记得用单引号括起来) ‘font-size’

两种写法

对象语法

v-bind:style = "{属性名1: 属性值1,属性名2:属性值2,...}"

属性值不加引号的话就是data里面的数据的变量名, 当然,如果属性值加了一个''引号,那么这个就会当作是一个字符串解析

里面不仅可以放对象,还可以放方法 ! 只要方法里面返回一个对象就行了

<!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>
</head>
<body>

<div class="app" >
    <h2 :style="{color: color,fontSize: fontWeight}">{{message}}</h2>
    <!--还可以通过绑定一个方法来获取这个对象-->
    <h2 :style = "getStyle()"> {{message}}</h2>
</div>



<script src="../js/vue.js"></script>
<script>
    let app = new Vue({
        el: '.app',//用于挂载要管理的元素
        data: { //用于定义数据
            message: '我是你爹!',
            color: "red",
            fontWeight: 400,

        },
        methods: {
            getStyle: function () {
                return {color: this.color, fontSize: this.fontWeight};
            }
        }
    })
</script>

</body>
</html>

数组语法(了解即可,不常用)

:style = "[对象1,对象2]"

对象里面就是放像class里面的那种对象

第三章计算属性

3.1 计算属性的基本使用

我们使用mustache语法的时候,要是我们想要将data中的某些数据以某种格式显示,那么我们如果直接在{{}}里面进行定义的话,那么代码的可读性就会差, 但是,如果我们将我们要显示的数据通过我们自己定义的计算属性方法进行返回,那么代码的可读性将大大增强,这就叫做计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!--    这样显示麻烦,可读性差-->
    <h2>{{firstName + ' ' + lastName}}</h2>
    <!--    如果我们将我们想显示的东西首先封装危一个方法,那么将大大增加可读性-->
    <h2>{{fullName()}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',//用于挂载要管理的元素
        data: { //用于定义数据
            firstName: "你",
            lastName: "爹"
        },
        methods: {
            fullName: function () {
                return this.firstName + ' ' + this.lastName;
            }
        }
    })
</script>
</body>
</html>
<!-- 三者在页面中的显示效果都是一样的,但是第一个和后两个的代码的可读性却完全不一致 -->

注意: 尽管计算属性是一个属性,上面的形式,实际上是一种简写(对getter的简写)

3.2 计算属性的复杂操作

我们通过这个案例来看看使用这个计算属性的好处

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!--    现在我想要书本的总价格显示到下面的地方-->
    <h2>{{totalPrice}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',//用于挂载要管理的元素
        data: { //用于定义数据
            books: [
                {id: 110, name: 'Linux私房菜', price: 119},
                {id: 111, name: '代码大全', price: 66},
                {id: 112, name: '深入理解计算机原理', price: 99},
                {id: 113, name: 'c++ primer plus', price: 118},
                {id: 114, name: '现代操作系统', price: 179},
                {id: 115, name: 'Java程序设计', price: 219}
            ]

        },
        computed: {
            totalPrice: function() {
                let sum = 0;
                // for (let i = 0; i<this.books.length; i++){
                //     sum+= this.books[i].price;
                // }
                
                //es6语法
                for (let book of this.books){
                    sum+= book.price;
                }
                return sum;
            }
        }
    })
</script>
</body>
</html>
//上面显示的就是总价格: 800

3.3 计算属性的getter和setter方法

上面的所有案例其实都是计算属性的一种简写方式

计算属性实际上是一个对象,里面有get和set两个方法

我们实际上不常用set方法,没有set方法的计算属性我们称为只读属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!--    这样显示麻烦,可读性差-->
    <h2>{{firstName + ' ' + lastName}}</h2>
    <!--    如果我们将我们想显示的东西首先封装危一个方法,那么将大大增加可读性-->
    <h2>{{fullName()}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',//用于挂载要管理的元素
        data: { //用于定义数据
            firstName: "你",
            lastName: "爹"
        },
        methods: {
            fullName: {
                //其实一般情况下我们就只用写get
                set: function () {
                },
                get: function () {
                    return this.firstName + ' ' + this.lastName;
                }
            }
        }
    })
</script>
</body>
</html>

3.4 计算属性与methods的对比

主要不同: 效率问题

对于方法,每次调用的时候都会进行一次运算,效率很低
但是对于计算属性,他会有一个缓存保存运算的结果,那么多次调用的时候方法其实不会多次执行了,而是第一次执行,剩下的调用直接从缓存里面拿结果,效率比较高 (前提是我们返回的值没有发生变化)

因此,对于显示数据这种用途我们,就使用计算属性,而对于一些出发次数少的一些需求,我们用方法

第四章 ES6的补充

4.1 块级作用域 – let/var

var没有块级作用域,很不方便
- 注意: 定义在函数里面的var其实某种程度上来说也算是一种局部变量(外面访问不到,这样我们能通过这个来实现闭包)
let就是引入了块级作用域的概念,变得严谨了很多
- let很像c++和java里面的局部变量,就不多解释了

4.2 const注意事项

const在定义的时候必须赋值
在开发中,优先使用const，原因是使用const能保证数据的安全性（毕竟一个项目不止你一个人开发）
const如果作为一个指针的话，那么指针指向的东西是可以修改的
他也是遵从块级作用域的规则的

4.3 ES6字面量增强写法

属性的增强写法

const name = "你爹";
const age = 18;
//ES6之前
const obj = {
    name: name,
    age: age
}

//ES6之后,若我们要赋值的属性的成员变量名和我们在外面定义的变量名一致,那么我们就可以直接简写
const obj = {
    name,
    age
}

//两者效果相同

方法的增强写法

const obj = {
    eat: function(){
        console.log("吃东西");
    }
}

//es6之后
const obj = {
    eat() {
        console.log("吃东西");
    }
}

let很像c++和java里面的局部变量,就不多解释了

4.2 const注意事项

const在定义的时候必须赋值
在开发中,优先使用const，原因是使用const能保证数据的安全性（毕竟一个项目不止你一个人开发）
const如果作为一个指针的话，那么指针指向的东西是可以修改的
他也是遵从块级作用域的规则的

4.3 ES6字面量增强写法

属性的增强写法

const name = "你爹";
const age = 18;
//ES6之前
const obj = {
    name: name,
    age: age
}

//ES6之后,若我们要赋值的属性的成员变量名和我们在外面定义的变量名一致,那么我们就可以直接简写
const obj = {
    name,
    age
}

//两者效果相同

方法的增强写法

const obj = {
    eat: function(){
        console.log("吃东西");
    }
}

//es6之后
const obj = {
    eat() {
        console.log("吃东西");
    }
}

[Vue] 模板语法

vue的一些基础用法

第一章 插值操作

1.1 Mustache

1.2 v-once

1.3 v-html

1.4 v-text

1.5 v-pre

1.6 v-cloak

第二章 绑定属性

2.1 v-bind

概念引入

基本用法

2.2 动态绑定class

对象语法(常用)

数组语法(少用)

2.3小作业

2.4 动态绑定style

对象语法

数组语法(了解即可,不常用)

第三章 计算属性

3.1 计算属性的基本使用

3.2 计算属性的复杂操作

3.3 计算属性的getter和setter方法

3.4 计算属性与methods的对比

第四章 ES6的补充

4.1 块级作用域 – let/var

4.2 const注意事项

4.3 ES6字面量增强写法

4.2 const注意事项

4.3 ES6字面量增强写法

第一章插值操作

第二章绑定属性

第三章计算属性