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

随机推荐

Jenkins免密码登录
Jenkins免密码登录相关内容原文地址: 简书:海边的卡夫卡丶:Jenkins免密码登录昨天惊现一个神奇的问题,Jenkins无法登录,无论是初始化的账号密码,还是admin用户,都登录不进去了 ...
chrome标签记录——关于各类性能优化
概述详情概述平时经常浏览各大博客,总感觉要学习和需要学习的内容太多太多,而自己的个人能力还不足够写出一些好的文章出来,就只能通过学习他人的东西不断提升自己的实力,然后就会记录收藏各种优秀的博客资 ...
手机用itunes安装更新系统
1.[Shift+更新]:仅对固件进行更新,保留现有资料和已经安装的程序.但是已经越狱的iPhone或iPad禁止使用此方法!否则有后遗症!没有越狱的iPhone或iPad则可以直接使用此方式.2.[ ...
RabbitMQ （基础知识）
AMQP简介 AMQP(Advanced Message Queue )即:高级消息队列协议:,是应用层协议的一个开放标准,为面向消息的中间件设计:高级消息队列协议使得遵从该规范的客户端应用和消息中间 ...
[译]Rxjs&Angular-退订可观察对象的n中方式
原文/出处: RxJS & Angular - Unsubscribe Like a Pro 在angular项目中我们不可避免的要使用RxJS可观察对象(Observables)来进行订阅( ...
PAT甲级—暴力搜索
1091 Acute Stroke (30point(s)) 基础的搜索,但是直接用递归会导致段错误,改用队列之后就不会了,这说明递归调用在空间利用率上还是很吃亏的. #include <cst ...
C语言实现--静态链表的操作
1,我们研究数据结构的操作,第一要弄懂它的结构体表示(也就是结构体特点).第二要清楚它的初始化和撤销过程.对于静态链表首先分析它的特点:一是采用静态存储方式,二是没有指针.静态链表就是不用指针来表示链 ...
Codeforces Global Round 12 D. Rating Compression (思维,双指针)
题意:给你一长度为\(n\)的数组,有一长度为\(k\ (1\le k \le n)\)的区间不断从左往右扫过这个数组,总共扫\(n\)次,每次扫的区间长度\(k=i\),在扫的过程中,每次取当前区间 ...
c#小灶——9.算术运算符
算数运算符用来在程序中进行运算. 首先,了解最简单的加(+)减(-)乘(*)除(/)运算符: 举例 int a = 1; int b = 2; int c = a + b; Console.Write ...
C#中word导出功能骚操作
马上过牛年了,先祝大家新年好,身体好,心情好!!! 年前最后写一篇之前项目开发的一个功能,自己根据系统业务,想到的一个解决办法,效率还是不错的,废话不多说,开整!!! 需求:企业填报自己的企业信息到系 ...

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

目录