1. 设置vue模板

2. vue语法--插值操作

3. 动态绑定属性--v-bind

一. 设置vue模板

我们经常新建一个vue项目的时候, 会写如下的一段代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app">{{message}}</div>

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

<script>

    const app = new Vue({

        el: "#app",

        data: {

            message:"hello"

        }

    })

</script>

</body>

</html>

其实这就是一个代码的模板. 那么我们如何才能快速的创建这样的代码,而不是每次都手写呢? 将其创建为模板.

第一步: 设置-->Preference-->Live Template

第二步: 添加一个group, 命名为vue. 这个视情况而定, 如果已经有了,就不用再定义了

第三步: 添加一个Live template模板,将下面的代码复制到Template text中.

<div id="app">{{message}}</div>

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

<script>

    const app = new Vue({

        el: "#app",

        data: {

            message:"hello"

        }

    })

</script>

第四步: 在页面使用快捷键快速生产vue模板. 快捷键是vue + tab键

这样就可以快速的生成vue框架代码了, 节省了时间.

二. vue语法 -- 插值操作

什么是插值操作呢? 

简单说, 就是将data中的文本数据,插入到html中.

1. 插值操作--Mastacha语法

语法: {{数据}}
- {{}} 获取vue变量的值, {{}} 这种写法就是Mastacha语法. 什么是mastacha语法? 可以参考这篇文章: https://www.cnblogs.com/DF-fzh/p/5979093.html
- 插值运算符可以显示的对数据进行计算
- 给html标签的内容赋值, 不可以给标签中的属性赋值.

举例:

  <div id="app">

        <!-- 可以输出String -->

        <h2 v-text="name"></h2>

        <!-- 也可以输出数字  也可以计算 -->

        <h2 v-text="count * 2"></h2>

        <!-- 这样的写法v-text会替换标签的内容 -->

        <h2 v-text="name">Hello</h2>

    </div>

    <script type="text/javascript">

        var app=new Vue({

            el:"#app",

            data:{

                name:"Vue",

                count:10,

            }

        })

    </script>

2. 常见的其他插值操作

v-bind: 动态绑定属性
v-once: 保留第一次渲染结果
v-html : 把html代码解析，只显示内容
v-text: 显示文本
v-pre: 原样输出
v-cloak: 解决文本闪烁问题

3. v-once: 保留第一次渲染结果

有些情况下, 我们不希望界面随意的跟随改变, 这时候我们可以使用vue的v-once指令

v-once: 该指令后面不需要增加任何表达式
该指令表示元素和组件只渲染一次, 不会随着数据的改变而改变

看下面这个例子:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app">

    <h2>{{name}}</h2>

    <h2 v-once> {{name}}</h2>

</div>

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

<script>

    var app = new Vue({

        el: "#app",

        data: {

            message: "hello, everyone",

            name: "summer",

            age: 18

        }

    });

</script>

</body>

</html>

同样是打印输出{{name}},第二个加了v-once, 加了这个是什么含义呢?

我们先来看看效果

然后, 我们修改在控制台name的值

我们发现, 在控制台将app.name的值修改了以后, 加了v-once的元素值没有跟随改变.

v-once的意思就是: 在第一次的时候设置完值以后, 后面的修改不会影响到这个元素值

4. v-html : 把html代码解析，只显示内容

有时, 我们从服务器请求到的数据本身就是一个HTML代码, 如果我们直接通过{{}}来输出, 就将html代码直接输出了, 但是我们希望它能够按照html进行解析, 然后显示解析后的结果.这时, 我们可以使用v-html?

该指令后面通常会跟随一个string类型的字符串
会将spring类型的html代码解析并渲染

看下面的代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app">

    <h2>{{url}}</h2>

    <h2 v-html="url">url </h2>

</div>

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

<script>

    var app = new Vue({

        el: "#app",

        data: {

            url: "<a href='http://www.baidu.com'>百度</a>"

        }

    });

</script>

</body>

</html>

这里打印了两个url, 我们来看看效果

第一个是将url的内容直接输出了, 而第二个是解析了html代码后输出的.

5. v-text: 显示文本

显示文本内容, 通常和{{}}的效果是一样的, 我们使用{{}}的频率会更高一些, 因为v-text会有一些局限性

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app">

    <h2>{{name}}, 你好</h2>

    <h2 v-text="name">, 你好 </h2>

</div>

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

<script>

    var app = new Vue({

        el: "#app",

        data: {

            name: "summer"

        }

    });

</script>

</body>

</html>

我们看到, 使用{{name}} 后面还可以跟其他内容. 但是使用v-text, 后面更得内容会被覆盖掉, 来看效果

6.v-pre: 原样输出

v-pre用于跳过这个元素和他的子元素的编译过程, 显示的是原本的内容.

我们来看一下案例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app">

    <h2>{{name}}</h2>

    <h2 v-pre> {{name}}</h2>

</div>

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

<script>

    var app = new Vue({

        el: "#app",

        data: {

            name: "summer"

        }

    });

</script>

</body>

</html>

我们看到, 一个元素没有加v-pre, 第二个元素加了v-pre, 那么效果是什么样的呢?

使用了v-pre的元素跳过了编译过程, 原样输出了元素的内容.

7.v-cloak: 解决文本闪烁问题

在真实的项目中, 内容很多, 有可能在加载new Vue()对象之前卡住了. 而页面是从上到下加载的, div加载完了,显示的就是{{message}}, 这是new Vue()卡住了, 那么用户就会看到{{message}}这样的文字,

其实这样是很不友好的. 为了避免这种情况, 我们可以使用vue的v-cloak指令. 在vue加载之前, 先将其遮住. 效果如下图

这个问题, 可以使用vue的v-cloak来解决. 先来看看代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        [v-cloak] {

            display: none;

        }

    </style>

</head>

<body>

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

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

<script>

    setTimeout(function(){

        var app = new Vue({

            el: "#app",

            data: {

                message: "hello"

            }

        });

    }, 1000);

</script>

</body>

</html>

其他设置都一样, 不一样的是, 在div标签里增加了v-cloak指令. 然后给这个指令元素设置了一个style样式.

在这里, 我们还使用setTimeout来模拟延时1秒显示的状况. 在样式表中设置一个属性[v-cloak]的display为none不显示. 当new Vue()代码执行以后, 就是将元素中v-cloak删除掉, 这样样式也不起作用.

我们来看看效果

刚开始, 没有加载new Vue()元素的时候, 就不显示div的内容. 加载了new Vue()对象以后, vue会自动将v-cloak指令删除, 这样div的内容就显示出来了.

三. 动态绑定属性--v-bind指令

上面的插值操作, 通常都是插入到模板的内容中.

Mastache语法也是插入值到模板的内容. 但是不能插入到属性.

可是, 除了内容, 有时我们希望动态绑定a标签的src元素, 或者img的src元素, 这个时候, 我们可以用到v-bind指令

1. v-bind基本用法

v-bind指令有两种写法

第一种: <a v-bind:href="url">Hello</a>

第二种: <a :href="url">Hello</a>

第二种写法是v-bind的缩写.

如下示例:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>v-bind指令</title>

</head>

<body>

<div id="app">

    <img width="100px" height="100px" v-bind:src="src"></img>

    <a v-bind:href="href">百度</a>

</div>

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

<script>

    var app = new Vue({

        el: "#app",

        data: {

            message: "hello",

            src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg14.360buyimg.com%2Fn0%2Fjfs%2Ft2740%2F163%2F951722573%2F619210%2Fcd4a7b33%2F572df1b5N85de4909.png&refer=http%3A%2F%2Fimg14.360buyimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616318081&t=f8e815503efff6d6871f732bea62c68f",

            href:"http://www.baidu.com"

        }

    });

</script>

</body>

</html>

我们在data中定义了src和href两个属性, 如果想要赋值给img表示和a标签, 不能直接像下面这么写. 这样会被直接输出

<img width="100px" height="100px" src="{{src}}"></img>

<a href="{{href}}">百度</a>

这样肯定是不可以的. 这时需要使用v-bind

<img width="100px" height="100px" v-bind:src="src"></img>

<a v-bind:href="href">百度</a>

我们还可以是用v-bind的缩写, 在实际项目开发中, 使用缩写的概率更大

<img width="100px" height="100px" :src="src"></img>

<a :href="href">百度</a>

2. v-bind动态绑定class(对象语法)

有些class对象需要动态赋值. 比如: 在列表页, 每条记录有一个复选框, 勾选复选框显示勾选样式, 取消勾选显示取消勾选样式. 这种情况使用vue怎么写呢?

<a :href="url" class="title" :class="{key:value, key:value }">Hello</a>

在class属性中, 我们可以使用{}来定义多个属性. 语法结构{key: value, key:value}, key是样式名称. value值是true或者false

如果是true就启用样式, false就禁用样式

来看下面的案例:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .active {

            color: red;

        }

    </style>

</head>

<body>

<div id="app">

    <h2 v-bind:class="{active: isActive}">{{message}}</h2>

</div>

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

<script>

    var app = new Vue({

        el: "#app",

        data: {

            message: "hello",

            isActive: true

        }

    });

</script>

</body>

</html>

在data中定义了一个isActive, class对象中如何写的呢?

 <h2 v-bind:class="{active: isActive}">{{message}}</h2>

active指的是style样式的名称, isActive是取data中的值. 这个结果就是显示active样式, 效果如下:

还可以使用methods方法来控制class的显示.

<a :href="url" class="title" :class="getClasses()">Hello</a>

案例: 有一个按钮, 点击一下显示红色, 再点击一下没有颜色.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .active {

            color: red;

        }

    </style>

</head>

<body>

<div id="app">

    <h2 v-bind:class="{active: isActive}">{{message}}</h2>

    <button :class = "{active: isActive}" v-on:click="getActive">按钮</button>

</div>

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

<script>

    var app = new Vue({

        el: "#app",

        data: {

            message: "hello",

            isActive: true

        },

        methods:{

            getActive: function() {

                this.isActive = !this.isActive;

            }

        }

    });

</script>

</body>

</html>

来看看效果

2) v-bind动态绑定class:(数组语法)

<h2 :class="[classaArray ,classaArray2]">{{message}}</h2>

<h2 :class="getClassArray()">{{message}}</h2>

完整代码:

<!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>

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

    <style>

        .active {

            color: red;

        }

        .line {

            background: #666;

        }

    </style>

</head>

<div id="app">

    <a v-bind:href="url">Hello</a>

    <!-- 动态绑定class{对象语法} -->

    <a :href="url" class="title" :class="{active:isActive,line:isLine}">Hello</a>

    <a :href="url" class="title" :class="getClasses()">Hello</a>

    <!-- 动态绑定class[数组语法] -->

    <h2 :class="[classaArray ,classaArray2]">{{message}}</h2>

    <h2 :class="getClassArray()">{{message}}</h2>

    <h2></h2>

    <button v-on:click="getClass">按钮</button>

</div>

<body>

    <script>

        let vm = new Vue({

            el: '#app',

            data: () => ({

                message: 'Hello world',

                url: 'https://www.baidu.com/',

                isActive: true,

                isLine: true,

                classaArray: 'active',

                classaArray2: 'line'

            }),

            methods: {

                getClass: function () {

                    this.isActive = !this.isActive

                },

                getClasses: function () {

                    return { active: this.isActive, line: this.isLine }

                },

                getClassArray: function () {

                    return [this.classaArray, this.classaArray2]

                }

            }

        })

    </script>

</body>

</html>

2. Vue语法--插值操作&动态绑定属性详解的更多相关文章

java使用POI操作XWPFDocument中的XWPFRun（文本）对象的属性详解
java使用POI操作XWPFDocument中的XWPFRun(文本)对象的属性详解我用的是office word 2016版 XWPFRun是XWPFDocument中的一段文本对象(就是一段文 ...
Linux文件权限与属性详解之 chattr & lsattr
Linux文件权限与属性详解之一般权限 Linux文件权限与属性详解之 ACL Linux文件权限与属性详解之 SUID.SGID & SBIT Linux文件权限与属性详解之 ch ...
DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)
css中cursor属性详解-鼠标移到图片变换鼠标形状语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...
《手把手教你》系列技巧篇（五十一）-java+ selenium自动化测试-字符串操作-下篇（详解教程）
1.简介自动化测试中进行断言的时候,我们可能经常遇到的场景.从一个字符串中找出一组数字或者其中的某些关键字,而不是将这一串字符串作为结果进行断言.这个时候就需要我们对字符串进行操作,宏哥这里介绍两种 ...
OutputCache属性详解（二）一 Location
目录 OutputCache概念学习 OutputCache属性详解(一) OutputCache属性详解(二) OutputCache属性详解(三) OutputCache属性详解(四)— SqlD ...
OutputCache属性详解（四）— SqlDependency
目录 OutputCache概念学习 OutputCache属性详解(一) OutputCache属性详解(二) OutputCache属性详解(三) OutputCache属性详解(四)— SqlD ...
Linux文件权限与属性详解之 SUID、SGID & SBIT
Linux文件权限与属性详解之一般权限 Linux文件权限与属性详解之 ACL Linux文件权限与属性详解之 SUID.SGID & SBIT Linux文件权限与属性详解之 ch ...
Linux文件权限与属性详解之 ACL
Linux文件权限与属性详解之一般权限 Linux文件权限与属性详解之 ACL Linux文件权限与属性详解之 SUID.SGID & SBIT Linux文件权限与属性详解之 ch ...
Linux文件权限与属性详解之 su & sudo
Linux文件权限与属性详解之一般权限 Linux文件权限与属性详解之 ACL Linux文件权限与属性详解之 SUID.SGID & SBIT Linux文件权限与属性详解之 ch ...

随机推荐

C# 实现语音聊天
一.语音聊天说专业点就是即时语音,是一种基于网络的快速传递语音信息的技术,普遍应用于各类社交软件中,优势主要有以下几点: (1)时效性:视频直播会因为带宽问题有时出现延迟高的问题,而语音直播相对来说会 ...
Language Guide (proto3) | proto3 语言指南（五）使用其他消息类型
Using Other Message Types - 使用其他消息类型可以将其他消息类型用作字段类型.例如,假设您希望在每个SearchResponse消息中包含Result消息--为此,您可以在 ...
Java根据路径获取文件内容
文章目录一.思路二.实现给出一个资源路径.然后获取资源文件信息,常见三种方式:①网络地址 ②本地绝对路径 ③本地相对路径一.思路首先,给出一个string表示资源文件的标识,如何判断是网络中 ...
C/C++ ===复习==函数返回值问题（集合体==网络）
按值传递地址传递: 应该明白只有这2种传递,下面讨论函数的按值传递 #include <stdio.h> #include <stdlib.h> int add_rtVal( ...
Jenkins（2）docker容器中安装python3
前言使用docker安装jenkins环境,jenkins构建的workspace目录默认是在容器里面构建的,如果我们想执行python3的代码,需进容器内部安装python3的环境. 进jenki ...
基于Qt的tcp客户端和服务器实现摄像头帧数据处理（客户端部分）
项目简述实现客户端调用摄像头,并以帧的形式将每一帧传输到服务端,服务端将图片进行某些处理后再返回给客户端.(客户端与服务端通信代码部分参考<Qt5 开发及实例>) 项目步骤客户端的编写 ...
mysql创建和使用数据库
mysql连接和断开 mysql -h host -u user -p******** /*建议不要在命令行中输入密码,因为这样做会使其暴露给在您的计算机上登录的其他用户窥探*/ mysql -u u ...
【uva 11082】Matrix Decompressing（图论--网络流最大流 Dinic+拆点二分图匹配）
题意:有一个N行M列的正整数矩阵,输入N个前1~N行所有元素之和,以及M个前1~M列所有元素之和.要求找一个满足这些条件,并且矩阵中的元素都是1~20之间的正整数的矩阵.输入保证有解,而且1≤N,M≤ ...
Educational Codeforces Round 87 (Rated for Div. 2) D树状数组加二分删除的值
Sample Input 5 4 1 2 3 4 5 -5 -1 -3 -1 Sample Output 3 思路,首先发现a[i]的值的范围是在1~n之间,每次插入我们可以直接把cnt[a[i]]+ ...
servlet接口实现类HttpServlet以及开发中一些细节
1. 但是eclipse不会帮我们改web.xml配置文件,所以我们也要在web.xml文件里面手动改 2. 这个样子的话你在用浏览器访问的时候链接的映射就改成了t_day05,这个主要用于你建立完一 ...

2. Vue语法--插值操作&动态绑定属性 详解

目录