【Vue模板语法】

dcr309duan 发布于2019-08-20 18:31 / 393人阅读

摘要：使用了基于的模板语法，允许开发者声明式地将绑定至底层实例的数据。过滤器还可以串联，在一个插值中使用多个过滤器。上面代码插值中使用了两个串联的过滤器，过滤器左至右依次执行，先转换成了大写，然后再进行了反向的操作。

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

1. 插值

插值也就是将数据插入到html文档中，包含文本、html元素、元素属性等

1.1 文本插值
文本插值中用得最多的就是用双大括号的形式。


    
        {{msg}}

上面代码中的 msg 会与实例中的【data】中的属性绑定在一起，并且数据实现同步，也就是说当【data】中的值更新之后我们不需要操作html，页面中会自动更新数据。

我们也可以让数据只绑定一次，在以后更新【data】中的属性时不再更新页面数据


    
        {{msg}}

上面代码中页面只会呈现“BLUE”，当我改变【data】中的 msg 属性值时，页面将不再刷新。

【注意】上面以双大括号的形式进行的插值都会被转换成字符串，如果要插入的是html元素，使用下面这样的方式。

1.2 HTML插值
在 Vue1.0 中HTML插值使用的是三个大括号的形式，但是在 Vue2.0 中这样的形式不能使用了，需要使用 v-html 指令

上面代码将 msg 属性值作为html元素插入到了 h1 标签的子节点中，页面呈现如下

【注意】在页面上动态的渲染html是一件很危险的事情，因为它很容易导致 XSS 攻击 (跨站脚本攻击)

1.3 属性插值
要将属性绑定到html元素中，使用文本插值的形式是行不通的，但是类似 HTML插值，属性插值也有自己的指令【v-bind：】

上面代码使用了【v-bind：】实现了对属性的插值运算，最终的结果也就是 h1 标签中有了一个id=name,我们几乎可以对所有的html属性按照这样的方式进行插值运算。

上面的代码都会按照我们的预期进行页面渲染。

【提示】由于我们对属性的插值使用得相当的多，所以Vue考虑到了书写的方便，为我们提供了简写形式，也就是直接只写一个冒号【：】进行插值运算

上面这段代码和之前使用的【v-bind:】的运行结果是一样的。

1.4 插值中使用Javascript表达式
插值运算如果只是进行值的插入那我们就想得太简单了，在插值运算中我们还可以应用Javascript表达式对插入的值进行处理。


    
        {{name.toUpperCase()}}

上面代码在插值中使用Javascript表达式对插值进行了处理。
【注意】这里运用的只能是单个表达式或者链式调用，但是不能是语句


    
        {{var a=1}}

上面代码是会报错的，因为插值中使用的是语句，而不是表达式。

2. 指令

指令其实在上面我们已经使用过了【v-bind:】和【v-html】，指令就是值这些带有 v- 前缀的特殊属性。指令属性的值预期是单一 JavaScript 表达式（除了 v-for）。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。

2.1 指令参数
一些指令时能够接收参数的，比如我们用于属性绑定的【v-bind】

上面代码中 id 就是 v-bind 指令的参数，告知v-bind指令将id 和 did 的值绑定到一起。

2.2 修饰符
修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

关于【v-on】指令，待会儿再说。

3. 过滤器

我们知道可以在插值运算中使用表达式，但是表达式能力毕竟有限，有时我们需要对插值进行更复杂的处理之后呈现在html中，那么我们就需要使用到过滤器了。

过滤器有两个使用的地放【插值】和【v-bind】中


    
        {{name | myfilter}}

上面代码中定义了一个myfilter的过滤器，将值进行反转输出。

在构造函数 Vue 的参数对象中有一个【filters】属性，该属性是一个对象，对象中以方法的形式定义过滤器，方法名也就是过滤器名称，方法的参数也就是插值的值，在过滤器中队值进行处理后返回。

过滤器还可以串联，在一个插值中使用多个过滤器。


    
        {{name | touppercase | myfilter}}

上面代码插值中使用了两个串联的过滤器，过滤器左至右依次执行，先转换成了大写，然后再进行了反向的操作。

4. 插值事件绑定

上面我们提到可以使用指令的方式绑定属性，其实事件我们也可以通过一个特殊的指令进行绑定，这个指令就是【v-on】，他和原生Javascript的事件前缀 on 是一个意思。

原生Javascript中的所有事件都可以通过这样的方式进行绑定，由于【v-on】的使用频率非常高，所以Vue为我们提供了简写形式，用【@】代替【v-on】，于是下面代码和上面一段代码是等效的。

上面代码也就是使用了简写【@】进行事件绑定，建议使用简写的形式，提高开发效率。

GPU云服务器云服务器 Vue_Vue php语法和c语法 Vue vue3 学习笔记 (五)——vue3

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84637.html

手把手教你从零写一个简单的 VUE--模板篇

摘要：转换成为模板函数联系上一篇文章，其实模板函数的构造都大同小异，基本是都是通过拼接函数字符串，然后通过对象转换成一个函数，变成一个函数之后，只要传入对应的数据，函数就会返回一个模板数据渲染好的字符串。教程目录1.手把手教你从零写一个简单的 VUE2.手把手教你从零写一个简单的 VUE--模板篇 Hello，我又回来了，上一次的文章教会了大家如何书写一个简单 VUE，里面实现了VUE 的...

feng409 2019-08-21 11:52 评论0 收藏0
Vue学习心得记录之模板语法

摘要：下面是我这半年以来总结的学习笔记，帮助自己复习学习的基本用法。全局子组件的注册与属性传递我是个全局子组件用这种数据格式来定义接受的属性名称这样在调用时候就可以传递属性进去今天的笔记学习心得就记录到这里吧第一次用顺利下面是我这半年以来总结的Vue学习笔记，帮助自己复习学习Vue的基本用法。有需要的同志可以参考下。 Vue的模板语法 Vue有很简单的模板语法,这些Vue指令用来响应式改变...

baiy 2019-08-20 16:09 评论0 收藏0
手把手教你从零写一个简单的 VUE

摘要：本系列是一个教程，下面贴下目录手把手教你从零写一个简单的手把手教你从零写一个简单的模板篇今天给大家带来的是实现一个简单的类似一样的前端框架，框架现在应该算是非常主流的前端数据驱动框架，今天我们来从零开始写一个非常简单的框架，主要是让大家本系列是一个教程，下面贴下目录~1.手把手教你从零写一个简单的 VUE2.手把手教你从零写一个简单的 VUE--模板篇今天给大家带来的是实现一个简单...

RebeccaZhong 2019-08-20 17:22 评论0 收藏0
Vue实例、模板语法、计算属性

摘要：然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要还没有发生改变，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。这是计算属性无法做到的。 Vue实例构造器每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例启动的： var vm=new Vue({ //...

CoffeX 2019-08-20 19:04 评论0 收藏0