Vue模板语法入门基础教程_模板入门知识

概述Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。普通文本数据绑定最常见的形式就是使用“Mustache[小胡子]”语法 (双大括号) 的文本插值,无论何时,绑定的数据对象上 msg 属性发生了改

Vue模板语法入门基础教程

概述

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

Vue模板语法入门基础教程_模板入门知识

普通文本

数据绑定最常见的形式就是使用“Mustache[小胡子]”语法 (双大括号) 的文本插值,无论何时,绑定的数据对象上 msg 属性发生了改变,插值处的内容都会更新。

<span>{{msg}}</span>

通过使用 v-once 指令,执行一次性插值,当数据改变时,内容不会更新。

<span v-once>这个将不会改变: {{ msg }}</span>

输出Html

双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html 指令:

<!-- 普通文本 -->
<p>Using mustaches: {{ rawHtml }}</p>
<!-- html解析 -->
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

注意:你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值,绝不要对用户提供的内容使用插值。

特性

Mustache 语法不能作用在 HTML 特性上,遇到这种情况应该使用 v-bind 指令:

<div v-bind:id="dynamicId">我的ID是{{dynamicId}}</div>
<button v-bind:disabled="isButtonDisabled">Button</button>

注意:如果 isButtonDisabled 的值是 null、undefined 或 false,  则 disabled 特性甚至不会被包含在渲染出来的 <button> 元素中。 只有为true ,才被渲染。

使用 JavaScript 表达式

不仅能绑定简单的属性键值,还提供了完全的 JavaScript 表达式支持。

如下所示:

HTML{{ number + 1 }}
<br />
{{ ok ? 'YES' : 'NO' }}
<br />
{{ message.split('').reverse().join('') }}
<br />
<div v-bind:id="'list-' + id">我的id是 list-{{id}}</div>

注意: 每个绑定都只能包含单个表达式,语句不会生效。

指令

指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。这里,v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。

<p v-if="seen">现在你看到我了</p>

参数

 一些指令能够接收一个“参数”,在指令名称之后以冒号表示。例如,v-bind 指令可以用于响应式地更新 HTML 特性:

<a v-bind:href="url" target="_blank">点击链接Baidu</a>

在这里 href 是参数,告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。 另一个例子是 v-on 指令,它用于监听 DOM 事件:

<button v-on:click="doSomething">点击弹出框</button>

动态参数

你可以使用动态参数为一个动态的事件名绑定处理函数:在这个示例中,当 eventName 的值为 “focus” 时,v-on:[eventName] 将等价于 v-on:focus。

<a v-bind:[attributename]="url" target="_blank"> 点击我进入 </a>
<br />
<a v-on:[eventname]="doSomething"> ... </a>

注意,参数表达式的写法存在一些约束:

在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板),还需要避免使用大写字符来命名键名,因为浏览器会把 attribute 名全部强制转为小写:在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。 除非在实例中有一个名为“someattr”的 property,否则代码不会工作。

修饰符

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

<a v-bind:href="url" target="_blank" v-on:click.prevent="doSomething">点击链接Baidu</a>

指令缩写

Vue 为 v-bind 和 v-on 这两个最常用的指令,提供了特定简写:

<!--  v-bind 缩写 -->
<!-- 完整语法 -->
<a v-bind:href="url" target="_blank">完整写法</a>
<!-- 缩写 -->
<a :href="url" target="_blank">缩写法</a>
<!--  v-on 缩写 -->
<!-- 完整语法 -->
<button v-on:click="doSomething">完整写法</button>
<!-- 缩写 -->
<button @click="doSomething">缩写法</button>

关于本例子中的完整代码,如下所示:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>一起学Vue</title>
        <!-- 开发环境版本,包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    </head>
    <body>
        <div id="app">
            <!-- 
             Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
             所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。
             -->
            <h2>普通文本</h2>
            <!--
                数据绑定最常见的形式就是使用“Mustache[小胡子]”语法 (双大括号) 的文本插值,无论何时,绑定的数据对象上 msg 属性发生了改变,插值处的内容都会更新
            -->
            <span>{{msg}}</span>
            <br />
            <!--
                通过使用 v-once 指令,执行一次性插值,当数据改变时,内容不会更新。
            -->
            <span v-once>这个将不会改变: {{ msg }}</span>
            <h2>输出Html</h2>
            <!--
            双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html 指令:
            你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击。
            请只对可信内容使用 HTML 插值,绝不要对用户提供的内容使用插值。
            -->
            <!-- 普表文本 -->
            <p>Using mustaches: {{ rawHtml }}</p>
            <!-- html解析 -->
            <p>Using v-html directive: <span v-html="rawHtml"></span></p>
            <h2>特性</h2>
            <!-- 
            Mustache 语法不能作用在 HTML 特性上,遇到这种情况应该使用 v-bind 指令: 
             -->
             <div v-bind:id="dynamicId">我的ID是{{dynamicId}}</div>
             <!-- 
              如果 isButtonDisabled 的值是 null、undefined 或 false,
              则 disabled 特性甚至不会被包含在渲染出来的 <button> 元素中。
              只有为true ,才被渲染
              -->
             <button v-bind:disabled="isButtonDisabled">Button</button>
             <h2>使用 JavaScript 表达式</h2>
             <!-- 
              每个绑定都只能包含单个表达式,语句不会生效。
              我们一直都只绑定简单的属性键值。但实际上,对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持。
              -->
             HTML{{ number + 1 }}
            <br />
            {{ ok ? 'YES' : 'NO' }}
            <br />
            {{ message.split('').reverse().join('') }}
            <br />
            <div v-bind:id="'list-' + id">我的id是 list-{{id}}</div>
            <!-- 这是语句,不是表达式 -->
            <!-- {{ var a = 1 }} -->

            <!-- 流控制也不会生效,请使用三元表达式 -->
            <!-- {{ if (ok) { return message } }} -->
            <h2>指令</h2>
            <!-- 
             指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
             这里,v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。
             -->
             <p v-if="seen">现在你看到我了</p>
             <h2>参数</h2>
             <!-- 
              一些指令能够接收一个“参数”,在指令名称之后以冒号表示。例如,v-bind 指令可以用于响应式地更新 HTML 特性:
              -->
              <a v-bind:href="url" target="_blank">点击链接Baidu</a>
              <!-- 
              在这里 href 是参数,告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。 
              另一个例子是 v-on 指令,它用于监听 DOM 事件:
               -->
               <br />
              <button v-on:click="doSomething">点击弹出框</button>
              <h2>动态参数</h2>
              <!-- 
               注意,参数表达式的写法存在一些约束,如之后的“对动态参数表达式的约束”章节所述。
               -->
              <a v-bind:[attributename]="url" target="_blank"> 点击我进入 </a>
              <!-- 
              你可以使用动态参数为一个动态的事件名绑定处理函数:
               在这个示例中,当 eventName 的值为 "focus" 时,v-on:[eventName] 将等价于 v-on:focus。
               -->
               <br />
              <a v-on:[eventname]="doSomething"> ... </a>
              <!-- 
               在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板),还需要避免使用大写字符来命名键名,
               因为浏览器会把 attribute 名全部强制转为小写:
               在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
               除非在实例中有一个名为“someattr”的 property,否则代码不会工作。

               -->
               <h2>修饰符</h2>
               <!-- 
                修饰符 (modifier) 是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。
                例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():
                -->
                <a v-bind:href="url" target="_blank" v-on:click.prevent="doSomething">点击链接Baidu</a>
                <h2>缩写</h2>
                <!-- 
                 Vue 为 v-bind 和 v-on 这两个最常用的指令,提供了特定简写:
                 -->
                <!-- 
                 v-bind 缩写
                 -->
                <!-- 完整语法 -->
                <a v-bind:href="url" target="_blank">完整写法</a>
                <br />
                <!-- 缩写 -->
                <a :href="url" target="_blank">缩写法</a>
                <br />
                <!-- 
                 v-on 缩写
                 -->
                <!-- 完整语法 -->
                <button v-on:click="doSomething">完整写法</button>
                <br />
                <!-- 缩写 -->
                <button @click="doSomething">缩写法</button>
        </div>
        <script type="text/javascript">
            var app=new Vue({
                el:'#app',
                data:{
                    msg:'hello world!!!',
                    rawHtml:'<span style="color:red;"> 这应该是红色</span>',
                    dynamicId:'div001',
                    isButtonDisabled:true,
                    number:4,
                    ok:true,
                    message:'welcome to vue!!!',
                    id:'01',
                    seen:true,
                    url:'http://www.baidu.com',
                    attributename:'href',
                    eventname:'click'
                },
                methods:{
                    doSomething:function(){
                        alert('hello world!!!');
                    }
                }
            });
        </script>
    </body>
</html>
海计划公众号
(0)
上一篇 2020/03/23 08:56
下一篇 2020/03/23 08:56

您可能感兴趣的内容

  • Js通过.或者[]访问对象属性的语法、性能等区别入门教程_对象菜鸟教程网

    在JavaScript中可以使用 . 或者 [ ] 来访问对象的属性,但是对象中方法只能通过 . 来获取,例如:function Person() {this.name=” 张三 “; // 定义一个属性 namethis.say=function(){ // 定义一个方法say()return “我的名字是 ” + this.name ;}
    }
    var a

    2020/04/05
  • js中的Symbol数据类型基础知识_Symbol攻略教程

    这是一种在ES6 中新添加的数据类型,Symbol 本质上是一种唯一标识符,可用作对象的唯一属性名,这样其他人就不会改写或覆盖你设置的属性值。声明方法:let id = Symbol(“id”);Symbol 数据类型的特点是唯一性,即使是用同一个变量生成的值也不相等。let id1 = Symbol(‘id‘);
    let id2 = Symbol(‘id‘

    2020/03/20
  • 如何创建一个NodeJs命令行交互项目?入门基础_项目使用帮助

    方法一:通过原生的NodeJs API,方法如下:#!/usr/bin/env node
    # test.js
    var argv = process.argv;
    console.log(argv)
    通过以下命令执行:node test.js param1 –param2 -param3
    结果输出如下:[ ‘/usr/local/Cellar/node/10.

    2020/03/23
  • MolView小白教程_在线化学分子编辑器

    MolView小白教程 官方网址:http://molview.org/ 简介描述:在线化学分子编辑器 MolView是一款免费开源的化学分子式编辑、查看、绘制工具,其中包含了化合…

    2020/03/10
  • 程序员日常工作中如何正确的偷懒?攻略教程_程序员指南攻略

    又是一个艳阳天,张大胖像一个天真无邪的孩子屁颠屁颠的欢快的走进公司,做到办公桌前,深情的打开了陪伴自己多年的电脑,如往常一样按部就班的和他玩耍了起来,大老远就听到张大胖那里噼里啪啦敲键盘的声音,透露着坚定和对梦想的执着,但似乎又让人感受到一丝悲凉。突然键盘的声音戛然而止,只看到大胖愣住了,他看着旁边公司刚发的台历,上面有个大大数字9201,对现在已经是201

    2020/03/31
  • 12个问题讲明白什么是区块链技术?菜鸟指南_区块链入门基础教程

    为什么要使用区块链技术? 虽然分布式账本肯定有很多优点,但它可能不适用于每个人或所有公司,至少目前还不适用。人们在听到区块链时,通常会产生疑问:区块链是什么?为什么要使用区块链?为什么要使用分布式账本? 在数字技术如此发达的今天,为什么不使用常规数据库或遗留系统来记录数据?毕竟,在许多情况下,对于企业主来说,使用区块链技术来更新现有基础设施,可能成本高昂,或

    2020/03/30
  • ReplaceGoogleCDN小白攻略_一个 Chrome 插件:将 Google CDN 替换为国内的

    ReplaceGoogleCDN小白攻略 GitHub:https://github.com/justjavac/ReplaceGoogleCDN 简介描述:一个 Chrome 插…

    2020/03/11
  • 新手学习 react 迷惑的点指南攻略_react使用帮助

    网上各种言论说 React 上手比 Vue 难,可能难就难不能深刻理解 JSX,或者对 ES6 的一些特性理解得不够深刻,导致觉得有些点难以理解,然后说 React 比较难上手,还反人类啥的,所以我打算写两篇文章来讲新手学习 React 的时候容易迷惑的点写出来为什么要引入 React在写 React 的时候,你可能会写类似这样的代码:import Reac

    2020/03/23
  • jQuery-Autocomplete使用教程_一个简单的,容易的,可定制的自动完成功能插件

    jQuery-Autocomplete使用教程 官方网址:https://www.devbridge.com/sourcery/components/jquery-autocomp…

    2020/03/06
  • 加密货币领域的 12 个关键问题攻略教程_加密小白常识

    在加密货币领域,哪些问题至关重要而又至今没有确切的答案?哪些问题对加密货币格局的最终形态和最佳公司的前景能产生最重大的影响?我想试着一一指出!用 12 条推文提出以下 12 个问题。1/ 去中心化问题就像生活和工程中所有美好的事物一样,去中心化不是免费的。去中心化在何时何地最为重要?新形成的加密技术堆栈的哪些部分应该去中心化,哪些部分并不需要?2/ 多元主义

    2020/03/23
  • JS之继承(ES5 & ES6)入门攻略_继承使用指南

    定义继承到底是什么?维基百科是这样说的:继承(英语:inheritance)是面向对象软件技术当中的一个概念。如果一个类别B“继承自”另一个类别A,就把这个B称为“A的子类”,而把A称为“B的父类别”也可以称“A是B的超类”。继承可以使得子类具有父类别的各种属性和方法。var a = new Array()
    a.valueOf()上面的a为什么可以使用val

    2020/03/29
  • JSDoc 3使用帮助_生成javascript API文档

    JSDoc 3使用帮助 官方网址:http://usejsdoc.org GitHub:https://github.com/jsdoc3/jsdoc 简介描述:生成javascr…

    2020/03/06
  • jquery 中的dom操作攻略教程_jquery小白指南

    jquery DOM 分为元素操作、属性操作、样式操作。一、元素操作1、查找①工具:jQuery选择器2、创建和添加①代码格式:变量 = $(‘要创建的元素’);注意点:1 要使用标准的XHTML格式。2 不能使用$(“

    “)或者$(“

    “)。3 可以在标签内添加文本当做文本节点 。4 无论多么复杂都可以添加 。5 可以添加属性节点。②添加入jQu

    2020/04/03
  • 6种JavaScript继承方式及优缺点基础知识教程_继承小白常识

    友情提示:想要更好的理解JS继承方式,须了解构造函数、原型对象、实例化对象、原型链等概念第一种:原型链继承利用原型链的特点进行继承function Parent(){
    this.name = ‘web前端’;
    this.type = [‘JS’,’HTML’,’CSS’];
    }
    Parent.prototype.Say=function(){

    2020/03/20
  • 深入解析 Node.js 事件循环工作机制入门基础_机制入门指南

    本文从对线程、事件循环、事件循环常见的问题和错误上分别进行说明,进一步探索了 Node 的核心工作原理。每当人们谈论 Node.js 时,都会出现很多问题,比如它 究竟是什么 、这项技术有什么用、它是否 有未来 等等。让我们尝试讨论第一部分。回答这个问题最简单的方法是列出 Node 在技术上的许多定义,如:Node.js 是一个基于 Chrome V8 Ja

    2020/03/29
  • echarts是什么基础指南echart.js学习和使用_echarts入门教程

    什么是Echarts?简单来说呢它就是一个商业级数据图表,一个纯JavaScript的图标库。可以兼容绝大部分的浏览器,可以为前端开发提供一个直观、生动、可交互、可高度个性化定制的数据可视化图表。Echarts能实现哪些功能? 1.强大的Echarts提供创新的拖拽重计算2.数据视图、值域漫游等功能特性3.大大增强了用户体验4.并且赋予了用户对数据进行挖掘

    2020/04/03