美文网首页react & vue & angular
Vue.js 基础-02-模板语法（常用指令v-html/v-b

Vue.js 基础-02-模板语法（常用指令v-html/v-b

作者: 玄德公笔记 | 来源:发表于2022-09-23 22:05 被阅读0次

@[toc]

前言：
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

1. 插值

1.1 插入文本

  • 语法

使用 {{……}}

<div id="app">
  <p>{{ message }}</p>
</div>
  • 示例
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CROW SONG</title>
  <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <p>{{ message }}</p>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      }
    })
  </script>
</body>

</html>

1.2 插入表达式

Vue.js 都提供了完全的 JavaScript 表达式支持

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CROW YUAN</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<style>
  .class1 {
    background: #444;
    color: #eee;
  }
</style>


<body>
  <div id="app">
    {{5+5}}<br>
    {{ ok ? 'YES' : 'NO' }}<br>
    {{ message.split('').reverse().join('') }}
    <div v-bind:class="'class' + id">{{message}}</div>
  </div>


  <script>
    new Vue({
      el: '#app',
      data: {
        ok: false,
        message: '鸦啼正落花',
        id: 1
      }
    })
  </script>
</body>

</html>

  • 结果显示


    image.png

2. 常用指令

指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上

2.1 v-html（插入html）

  • 语法
<div id="app">
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>青囊经</h1>'
  }
})
</script>
  • 示例
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CROW SONG</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <div v-html="message"></div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        message: '<h1>青囊经</h1>'
      }
    })
  </script>
</body>

</html>

2.2 v-bind（插入属性）

  • 示例
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CROW YUAN</title>
</head>
<style>
  .class1 {
    background: #444;
    color: #eee;
  }
</style>

<body>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

  <div id="app">
    <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
    <br><br>
    <div v-bind:class="{'class1': use}">
      v-bind:class 指令
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        use: false
      }
    });
  </script>
</body>

  • 结果显示


    image.png
image.png

2.3 v-if

在后边“ vue.js 的条件语句”中会详细说明

  • 示例
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>遁甲天书</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <p v-if="show">甲</p>
    <template v-if="ok">
      <h1>三奇六仪</h1>
      <p>三奇：乙丙丁</p>
      <p>六仪：戊己庚辛壬癸</p>
    </template>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        show: true,
        ok: true
      }
    })
  </script>
</body>
</html>

  • 结果显示


    image.png

2.4 v-model （双向绑定数据）

该指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

  • 示例
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CROW YUAN</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        message: '姓名'
      }
    })
  </script>
</body>

</html>

  • 结果显示（用户输入前）


    image.png
  • 结果显示（用户输入后）

用户在输入框输入自己姓名，data.message 的值也跟着改变——输入框外也显示了用户姓名。

image.png

2.5 v-on（监听事件）

按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应

  • 示例
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CROW YUAN</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">回文</button>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        message: '鸦啼正落花'
      },
      methods: {
        reverseMessage: function () {
          this.message = this.message.split('').reverse().join('')
        }
      }
    })
  </script>
</body>

</html>
  • 输出

点击后文字反向


image.png

3. 参数和修饰符

3.1 参数

关于常用参数，我们将在后文详解介绍指令时讲解。

  • 语法
    参数在指令后以冒号指明
  • 语法示例
pre><a v-bind:href="url">玄德公的笔记</a></pre>
  • 完整示例

告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CROW YUAN</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <pre><a v-bind:href="url">玄德公的笔记</a></pre>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        url: 'https://blog.csdn.net/xingzuo_1840'
      }
    })
  </script>
</body>

</html>
  • 结果显示
image.png

3.2 修饰符

修饰符是以半角句号. 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

  • 语法示例
<input v-model.lazy="message">
  • 完整示例

v-model同步输入框的值和数据。lazy修饰符将其转变为change事件再同步。
下例

  • 如果不加修饰符，则输入一个字母 上边的<p>{{ message }}</p>输出改变一个字母
  • 加上lazy修饰符之后，焦点离开输入框之，上边的<p>{{ message }}</p>输出才改变。
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CROW YUAN</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <p>{{ message }}</p>
    <input v-model.lazy="message">
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        message: '姓名'
      }
    })
  </script>
</body>

</html>

  • 输入前


    image.png

  • 输入后


    image.png

4. 缩写

Vue.js 为两个最为常用的指令提供了特别的缩写

4.1 v-bind 缩写

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

4.2 v-on 缩写

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

相关文章

  • Vue.js 基础-02-模板语法（常用指令v-html/v-b

    @[toc] 前言：Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vu...

  • 2017-3-27 VUE

    Vue.js 模板语法 1、使用 {{...}}（双大括号）的文本插值 2、使用 v-html 指令用于输出 ht...

  • （4）打鸡儿教你Vue.js

    模板语法： html使用 v-html 指令用于输出 html 代码 v-on 指令，它用于监听 DOM 事件： ...

  • (32)Vue模板语法

    模板语法 文本： v-once一次性地插值，当数据改变时，插值处的内容不会更新 v-html 指令 v-if 指令...

  • Vue.js常用指令

    (一）vue常用的指令 1.数据渲染：v-text、v-html、{{}} 2.条件渲染 控制模板隐藏:v-sho...

  • vue模板语法 v-html指令

    vue模板语法{{}} 双大括号 插值 在html里面其中值来自于Vue实例对象的data属性里面（必须在data...

  • 千锋vue基础教程2020

    一. Vue 基础 1. 模板语法 (1)插值 a.文本 {{}} b.纯HTML v-html ，防止XSS,c...

  • Vue.js

    最基础语法 生命周期 使用生命周期函数在不同的阶段执行不同代码 模板语法 输出原始HTML v-html v-if...

  • vue学习笔记：一、vue基础语法

    1、模板语法 Mustache语法：{{ msg }} Html赋值：v-html=“” 绑定属性：v-bind:...

  • 【Vue】常用指令之v-html

    ?【Vue】学习养成记，【程序员必备小知识】 ? 今日小知识——Vue常用指令之v-html v-html指令其实...

网友评论

    本文标题：Vue.js 基础-02-模板语法（常用指令v-html/v-b

    本文链接：https://www.haomeiwen.com/subject/darxvrtx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    react & vue & angular

    关于我们|服务条款|联系我们|Vue.js 基础-02-模板语法（常用指令v-html/v-b|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！