【猿说VUE】初试模板语法，开启VUE编码之旅

模板语法

官网描述：

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

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

4.1 插值

主要是将数据插入到html文件中，可以包含文本、html元素、元素属性、表达式等。类似使用jQuery操作DOM。

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

4.1.1 插入文本

数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值。大括号内标签将会被替代为对应数据对象上 msgbindtext 属性的值。无论何时，绑定的数据对象上 msgbindtext 属性发生了改变，插值处的内容都会更新。

    <div id="app">
      <h2>VUE插值之文本</h2> 
      <p>数据绑定最常见的形式就是使用双大括号的文本插值：{{msgbindtext}}</p>
    </div>


    <script type="text/javascript">
        const vm = new Vue({
            el: '#app',
            data: {
                msgbindtext: "插值文本"
            }
        })    
    </script>

4.1.2 插入html

通常我们使用双大括号（参考4.1.1）会将数据解释为普通文本，而非HTML代码。为了输出真正的HTML，可以使用 v-html 指令。如下示例中 span 的内容将会被替换成为属性值 msgbindhtml，直接作为HTML显示，此时将会忽略解析属性值中的数据绑定。

    <div id="app">
      <h2>VUE插值之HTML</h2>
      <p>你需要使用v-html指令：<span v-html="msgbindhtml"></span></p>
    </div>

    <script type="text/javascript">
        const vm = new Vue({
            el: '#app',
            data: {
                msgbindtext: "插值文本",
                msgbindhtml: "<span style='color:red'>红色的v-html指令。</span>"
            }
        })    
    </script>

4.1.3 插入属性

如果需要设定HTML元素的属性时应该使用v-bind指令。但是对于布尔attribute (因为布尔类型只要存在就意味着值为 true)，v-bind工作起来略有不同，如下：

<button v-bind:disabled="isButtonDisabled">Button</button>

如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled 属性甚至不会被包含在渲染出来的button控件中。

下面是一段示例代码：

<div id="app">
  <h2>VUE插值之属性</h2>
  <p><label>点击变换颜色：</label> <input id="ipAttribute" type="checkbox" v-model="useFlag"> 
  <div id="divAttribute" v-bind:class="{'clsChange': useFlag}">使用v-bind指令改变颜色属性</div>
  </p>
</div>

<script type="text/javascript">
    const vm = new Vue({
        el: '#app',
        data: {
            msgbindtext: "插值文本",
            msgbindhtml: "<span style='color:red'>红色的v-html指令。</span>",
            useFlag: false
        }
    })    
</script>

4.1.4 插入表达式

模板中数据绑定除了支持简单的属性键值外，Vue.js还提供了的JavaScript表达式的支持。这些表达式将会在所属Vue实例的数据作用域下作为被解析成JavaScript 。使用限制：每个绑定只能包含单个表达式，不支持JavaScript语句和控制流程。

官方提醒：模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。

    <div id="app">
      <h2>VUE插值之表达式</h2>
      <p>四则运算表达式： {{ (3 + 6) * 2}}</p>
      <p>三目运算表达式： {{ useFlag ? 'YES' : 'NO'}}</p>
      <p>对象方法表达式： {{ msgReverse.split(',').reverse().join(',')}}</p>
      <p>v-bind绑定表达式：<a v-bind:href="blogUrl + 'gavinbj'">黑白猿博客</a></p>
    </div>

	<script type="text/javascript">
      const vm = new Vue({
        el: '#app',
        data: {
          msgbindtext: "插值文本",
          msgbindhtml: "<span style='color:red'>红色的v-html指令。</span>",
          useFlag: false,
          msgReverse: "1,2,3,4",
          blogUrl: "https://blog.csdn.net/"
        }
      })    
    </script>

4.2 指令

指令是带有 v- 前缀的特殊attribute。指令属性的预期值是单个JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。

4.2.1 VUE指令基础

看如下代码示例：

    <div id="app">
      <h2>VUE指令</h2>
      <p v-if="showFlag">通过指令控制标签是否显示</p>
      <hr>
      <h2>VUE指令之带参数</h2>
      <p><a v-bind:href="bolgUrlGavin">黑白猿博客</a></p>
      <hr>
      <h2>VUE指令之修饰符</h2>
      <p><div v-on:click.stop="stopUp">阻止向上冒泡</div></p>
      <p></p>
    </div>
    
        
    <script type="text/javascript">
      const vm = new Vue({
        el: '#app',
        data: {
          bolgUrlGavin: "https://blog.csdn.net/gavinbj",
          showFlag: true
        },
        methods: {
          stopUp(){
            alert("阻止向上冒泡事件");
          }
        }
      })

基本：v-if 指令将根据表达式 showFlag 的值的真假来控制文字的显示和隐藏。
参数：在指令后以冒号来表示。上面代码中v-bind指令被用来响应地更新HTML属性，此时href即为指令的参数，v-bind指令将该元素的href属性与表达式 bolgUrlGavin的值进行绑定。
修饰符：以半角点号 . 指明的特殊后缀，用于表明该指令需要使用特殊方式进行绑定。上面代码中.stop即为修饰符，通知v-on指令对于触发的事件调用event.stopPropagation()。

4.2.2 数据双向绑定

v-model指令用来在input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。按钮的事件我们可以使用v-on监听事件，并对用户的输入进行响应。

    <div id="app">
      <h2>VUE指令之双向数据绑定</h2>
      <p>双向绑定显示内容：{{msgBindTwo}}</p>
      <input v-model="msgBindTwo">
      <hr>
      <h2>VUE指令之绑定事件监听</h2>
      <button v-on:click="stopUp">指令事件</button>
      <button @click="stopUp">指令事件缩写方式</button>
      <p></p>
      <p></p>
    </div>

    <script type="text/javascript">
      const vm = new Vue({
        el: '#app',
        data: {
          msgBindTwo: "双向绑定显示内容"
        },
        methods: {
          stopUp(){
            alert("阻止向上冒泡事件");
          }
        }
      })
    </script>

4.2.3 过滤器

Vue.js允许自定义过滤器，可以用于常见的文本内容格式化，由“管道符”指示，通常添加在JavaScript表达式的尾部。过滤器主要用在两个地方：双大括号插值和v-bind表达式。

<!-- 在两个大括号中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

我们来看一个基础使用方法的示例：

    <div id="app">
      <h2>VUE指令之过滤器</h2>
      <p>此处显示自定义过滤器处理后的字符串：{{ msgnote | upfilter }}</p>
    </div>

	<script type="text/javascript">
      const vm = new Vue({
        el: '#app',
        data: {
          msgnote: "i am gavin！"

        },
        methods: {
        },
        filters: {
          upfilter: function(value){
            return value.toUpperCase();
          }
        }
      })
    </script>

注意：过滤器函数接受表达式的值作为第一个参数。

扩展内容：过滤器可以串联使用
{{ message | filterA | filterB }}
过滤器是 JavaScript 函数，因此可以接受参数：
{{ message | filterA('arg1', arg2) }}
这里，message 是第一个参数，字符串 ‘arg1’ 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

4.3 缩写

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的属性。当你在使用 Vue.js 为现有标签添加动态行为时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application)时，v- 前缀也变得没那么重要了。因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

4.3.1 `v-bind`缩写

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

4.3.2`v-on`缩写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

官网说明：缩写看起来可能与普通的 HTML 略有不同，但 : 与 @ 对于属性名来说都是合法字符，在所有支持Vue的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记中。缩写语法是完全可选的，但随着你更深入地了解它们的作用，你会庆幸拥有它们。

4.4 完整代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>N002:VUE模板语法</title>
  </head>

  <style>
    .clsChange {
      background: #444;
      color: #eee;
    }
  </style>
  <body>
    <div id="app">
      <h2>VUE插值之文本</h2> 
      <p>数据绑定最常见的形式就是使用双大括号的文本插值：{{msgbindtext}}</p>
      <hr>
      <h2>VUE插值之HTML</h2>
      <p>你需要使用v-html指令：<span v-html="msgbindhtml"></span></p>
      <hr>
      <h2>VUE插值之属性</h2>
      <p><label>点击变换颜色：</label> <input id="ipAttribute" type="checkbox" v-model="useFlag"> 
        <div id="divAttribute" v-bind:class="{'clsChange': useFlag}">使用v-bind指令改变颜色属性</div>
      </p>
      <hr>
      <h2>VUE插值之表达式</h2>
      <p>四则运算表达式： {{ (3 + 6) * 2}}</p>
      <p>三目运算表达式： {{ useFlag ? 'YES' : 'NO'}}</p>
      <p>对象方法表达式： {{ msgReverse.split(',').reverse().join(',')}}</p>
      <p>v-bind绑定表达式：<a v-bind:href="blogUrl + 'gavinbj'">黑白猿博客</a></p>
      <hr color=#987cb9 SIZE=5>
      <h2>VUE指令</h2>
      <p v-if="showFlag">通过指令控制标签是否显示</p>
      <hr>
      <h2>VUE指令之带参数</h2>
      <p><a v-bind:href="bolgUrlGavin">黑白猿博客</a></p>
      <hr>
      <h2>VUE指令之修饰符</h2>
      <p><div v-on:click.stop="stopUp">阻止向上冒泡</div></p>
      <hr>
      <h2>VUE指令之双向数据绑定</h2>
      <p>双向绑定显示内容：{{msgBindTwo}}</p>
      <input v-model="msgBindTwo">
      <hr>
      <h2>VUE指令之绑定事件监听</h2>
      <button v-on:click="stopUp">指令事件</button>
      <button @click="stopUp">指令事件缩写方式</button>
      <hr>
      <h2>VUE指令之过滤器</h2>
      <p>此处显示自定义过滤器处理后的字符串：{{ msgnote | upfilter }}</p>
    </div>


    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
      const vm = new Vue({
        el: '#app',
        data: {
          msgbindtext: "插值文本",
          msgbindhtml: "<span style='color:red'>红色的v-html指令。</span>",
          useFlag: false,
          msgReverse: "1,2,3,4",
          blogUrl: "https://blog.csdn.net/",
          bolgUrlGavin: "https://blog.csdn.net/gavinbj",
          showFlag: true,
          msgBindTwo: "双向绑定显示内容",
          msgnote: "i am gavin！"

        },
        methods: {
          stopUp(){
            alert("阻止向上冒泡事件");
          }

        },
        filters: {
          upfilter: function(value){
            return value.toUpperCase();
          }
        }

      })
    
    </script>

  </body>
</html>

【猿说VUE】初试模板语法，开启VUE编码之旅

模板语法

4.1 插值

4.1.1 插入文本

4.1.2 插入html

4.1.3 插入属性

4.1.4 插入表达式

4.2 指令

4.2.1 VUE指令基础

4.2.2 数据双向绑定

4.2.3 过滤器

4.3 缩写

4.3.1 `v-bind`缩写

4.3.2`v-on`缩写

4.4 完整代码

SQL优化-20231016

【環境部署】華爲雲ECS安裝Tomcat8（CentOS 7.4）

【猿說VUE】初識VUE，帶你打開VUE之門

【SpringBoot 2學習筆記】《七》SpringBoot2數據庫訪問之JDBC（JdbcTemplate）

【環境部署】使用Navicat DB將數據從Oracle遷移到MySQL

【SpringBoot 2學習筆記】《十四》SpringBoot2 大話註解

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

【猿说VUE】初试模板语法，开启VUE编码之旅

模板语法

4.1 插值

4.1.1 插入文本

4.1.2 插入html

4.1.3 插入属性

4.1.4 插入表达式

4.2 指令

4.2.1 VUE指令基础

4.2.2 数据双向绑定

4.2.3 过滤器

4.3 缩写

4.3.1 v-bind缩写

4.3.2v-on缩写

4.4 完整代码

4.3.1 `v-bind`缩写

4.3.2`v-on`缩写