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 01:36
下一篇 2020/03/23 01:37

您可能感兴趣的内容

  • 更快学习 JavaScript 的 6 个思维技巧入门指南_技巧菜鸟教程网

    我们在学习JavaScript,或其他任何编码技能的时候,往往是因为这些拦路虎而裹足不前:有些概念可能会造成混淆,尤其当你是从其他语言转过来的时候。找不到时间(有时是动力)学习。很容易忘记已经理解了的东西。工具多又在不断变化,所以不知道从哪里开始。幸运的是,这些拦路虎是可以被识别,并消灭的。在这篇文章中,我将介绍六个思维技巧来帮助你更快地学习JavaScri

    2020/03/29
  • Flutter异步加载:Future,async/await菜鸟攻略_加载小白指南

    概念Future对象表示异步操作的结果,我们通常通过then()来处理返回的结果async用于标明函数是一个异步函数,其返回值类型是Future对象await用来等待耗时操作的返回结果,这个操作会阻塞到后面的代码三种方式async/awaitFutureFutureBuilderasync/await被async修饰的函数,会返回一个Futured对象

    2020/03/29
  • HTML5全局属性汇总小白教程_html5小白攻略

    局部属性和全局属性 局部属性:有些元素能规定自己的属性,这种属性称为局部属性。比如link元素,它具有的局部属性有href、 rel、 hreflang、 media、 type、 sizes这六个。全局属性:可以用来配置所有元素共有的行为,这种属性称为全局属性,可以用在任何一个元素身上。1、accesskey属性使用accesskey属性可以设定一个或几

    2020/04/06
  • 解决异步编程的方法:promise与await小白知识_异步菜鸟知识

    promise是什么?Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。简单来说,promise的作用就是将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。

    2020/03/21
  • monaco-editor菜鸟攻略_一个基于浏览器的代码编辑器

    monaco-editor菜鸟攻略 官方网址:https://microsoft.github.io/monaco-editor/ GitHub:https://github.co…

    2020/03/06
  • nodejs的jekins部署使用教程_node小白教程

    第一步gitlab项目仓库给jekins服务器分配一个账号develop权限用于拉取代码。分支为master。第二步jekins配置打包脚本。npm install –registry=https://registry.npm.taobao.org
    rm -rf 项目名.tar.gz
    tar cvf 项目名.tar.gz *思路就是拉取最新代码后,安装相关

    2020/04/03
  • 在react中实现打印功能菜鸟教程网_打印基础教程

    我们知道,window.print()可以调起打印功能,但是直接用window.print()如果直接打印的话,没有样式,而且默认打印的是整个网页的内容。解决的方法可以用iframe方式引入需要打印的区域,并把样式添加进去,然后把iframe标签定位到看不到的地方去。搜了一下,已经有人造好了轮子,react-to-print插件就是这么做的。一.使用方法下载

    2020/03/23
  • 为什么要初始化css样式?使用指南_样式新手入门

    为什么要初始化css样式1.浏览器差异不同浏览器对有些标签的默认值是不同的,如果没对css初始化会出现浏览器之间的页面显示差异2.提高编码质量如果不初始化,整个页面做完会很糟糕,重复的css样式很多最简单的初始化方法是:(不建议)* {padding: 0; margin: 0;}淘宝样式 样式初始化body, h1, h2, h3, h4, h5, h6,

    2020/03/29
  • Quill 实践指南入门基础_指南指南攻略

    quill 定制富文本编辑器很多时候