Vue3 模板语法

最新推荐文章于 2024-09-23 09:52:32 发布

star walkin

最新推荐文章于 2024-09-23 09:52:32 发布

阅读量400

点赞数

分类专栏： Vue3

原文链接：https://www.runoob.com/vue3/vue3-template-syntax.html

版权

Vue3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Vue 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

Vue 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

插值

文本

数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值：

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="hello-vue" class="demo">
  {{ message }}
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>

{{…}} 标签的内容将会被替代为对应组件实例中 message 属性的值，如果 message 属性的值发生了改变，{{…}} 标签内容也会更新。

如果不想改变标签的内容，可以通过使用 v-once 指令执行一次性地插值，当数据改变时，插值处的内容不会更新。

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

Html

使用 v-html 指令用于输出 html 代码：

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="example1" class="demo">
    <p>使用双大括号的文本插值: {{ rawHtml }}</p>
    <p>使用 v-html 指令: <span v-html="rawHtml"></span></p>
</div>

<script>
const RenderHtmlApp = {
  data() {
    return {
      rawHtml: '<span style="color: red">这里会显示红色！</span>'
    }
  }
}

Vue.createApp(RenderHtmlApp).mount('#example1')
</script>
</body>

属性

v-bind是一个 vue 指令，用于绑定 html 属性，如下：

<div id="app">
    <p v-bind:title="title">html属性不能使用双大括号形式绑定，只能使用v-bind指令</p>
</div>
......
var vm = new Vue({
    el: '#app',
    data: {
        title: 'title content'
    }
});

这里的 html 最后会渲染成：

<div id="app">
    <p title="title content">html属性不能使用双大括号形式绑定，只能使用v-bind指令</p>
</div>

上面这种 v-bind 这也是我们对于 vue 指令最初的理解，但实际上，vue 指令的预期值（如 v-bind:class=“classProperty” 中，v-bind 是指令，: 后面的 class 是参数，而 classProperty 则在官方文档中被称为“预期值”），除了像上面那样绑定一个字符串类型变量，其实它是支持一个单一 JavaScript 表达式（v-for 除外）。

所以在这里，我们就可以有更多的选择，例如：

执行运算

<div id="app">
    <p v-bind:title="t1 + ' ' + t2">html属性不能使用双大括号形式绑定，只能使用v-bind指令</p>
</div>
......
var vm = new Vue({
    el: '#app',
    data: {
        t1: 'title1',
        t2: 'title2'
    }
});

最后渲染的结果：

<div id="app">
    <p title="title1 title2">html属性不能使用双大括号形式绑定，只能使用v-bind指令</p>
</div>

执行函数等

<div id="app">
    <p v-bind:title="getTitle()">html属性不能使用双大括号形式绑定，只能使用v-bind指令</p>
</div>
......
var vm = new Vue({
    el: '#app',
    data: {
        getTitle: function () {
            return 'title content';
        }
    }
});

最后渲染的结果：

<div id="app">
    <p title="title content">html属性不能使用双大括号形式绑定，只能使用v-bind指令</p>
</div>

支持的数据类型

上面的内容，指令预期值得到的都是字符串类型的数据，但实际上，我们知道 js 有很多数据类型，它如果放入其中呢？

对象类型

<div id="app">
    <p v-bind:title="obj">content</p>
</div>
......
var obj = {};
var vm = new Vue({
    el: '#app',
    data: {
        obj: obj
    }
});

为什么一来就选择对象类型呢？答案是它比较有代表性，它渲染结果如下：

<div id="app">
    <p title="[object Object]">content</p>
</div>

诶，这个怎么有点眼熟？有点像…没错！对象的 toString 方法的返回值！为了验证我们的猜想，我们进行进一步的测试：

<div id="app">
    <p v-bind:title="obj">content</p>
</div>
......
var obj = {};
 
obj.toString = function () {
    return 'edited in toString!';
};
 
var vm = new Vue({
    el: '#app',
    data: {
        obj: obj
    }
});

上面这里修改了 obj 的 toString 方法（但准确的说，这里不是修改，而是添加。一开始的 obj 对象上自身是没有 toString 方法的，它继承了 Object.prototype.toString，但这里我们执行 obj.toString = function… 实际上是为它添加了一个 toString 方法，使得它执行的时候，不用再去调用继承自 Object 的方法），渲染结果如下：

<div id="app">
    <p title="edited in toString!">content</p>
</div>

这里就进一步证实了我们的猜想。

数组类型

数组类型的 toString 方法和对象类型的有所不同，它将返回和执行 arr.join(’,’) 相同的结果。如 [1, 2, 3].toString() 将返回 “1,2,3”。下面进行测试：

<div id="app">
    <p v-bind:title="arr">content</p>
</div>
......
var vm = new Vue({
    el: '#app',
    data: {
        arr: [1, 2, 3]
    }
});

渲染结果如下：

<div id="app">
    <p title="1,2,3">content</p>
</div>

仍然跟预期结果一样。

其它类型

number 类型，正常执行 toString，包括数字0，结果都正常渲染成对应的字符串；
boolean 类型，true 正常渲染成字符串 “true”，但 false 虽然执行 toString 方法将返回 “false”
字符串，但是却没有渲染出来；
null / undefined 类型，二者没有 toString 方法，也没有渲染出来。

显然，在执行 toString 方法之前，vue 内部应该先做了类型校验，满足条件才输出。而且这里不是简单的真 / 假值校验，因为、0 虽为假值，但最终却像真值一样渲染了出来。具体如何实现，可能需要参考 vue 的源码了，这里不再深究。

以下实例判断 use 的值，如果为 true 使用 class1 类的样式，否则不使用该类：

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
.class1{
  background: #444;
  color: #eee;
}
</style>
</head>
<body>
<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>
const app = {
  data() {
    return {
      use: false
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>
</body>

表达式

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

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
    {{5+5}}<br>
    {{ ok ? 'YES' : 'NO' }}<br>
    {{ message.split('').reverse().join('') }}
    <div v-bind:id="'list-' + id">菜鸟教程</div>
</div>
    
<script>
const HelloVueApp = {
  data() {
    return {
      ok: true,
      message: 'RUNOOB!!',
      id: 1
    }
  }
}
 
Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>

表达式会在当前活动实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效:

<!--  这是语句，不是表达式：-->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

指令

指令是带有 v- 前缀的特殊属性。

指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子：

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
    <p v-if="seen">现在你看到我了</p>
</div>
    
<script>
const app = {
  data() {
    return {
      seen: true /* 改为false，信息就无法显示 */
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>
</body>

这里， v-if 指令将根据表达式 seen 的值( true 或 false )来决定是否插入 p 元素。

v-if 这个属性主要是来干什么的呢,它的用途是哪些？

v-if使用一般有两个场景：

多个元素通过条件判断展示或者隐藏某个元素，或者多个元素
进行两个视图之间的切换

下面写了两个例子，是Vue官方的简单实例。

第一个实例实现了 type等于不同值，A，B，C 三个元素的展示情况。
第二个例子实现了，点击按钮实现两个视图的切换。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue中v-if的常见使用</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<script>
window.onload = function(){

    //创建一个vue实例
    var app = new Vue({
        el: '#app',
        data: {
            type:'C',
            loginType:'username'
        },
        methods:{
            changeloginType(){
                let self = this;
                if(self.loginType=='username'){
                    self.loginType = ''
                }else{
                    self.loginType = 'username'
                }
            }
        }
    })
}

</script>
<body>
    <div id="app">
        <div style="color:red">v-if的简单实用</div>
        <template>
            <div v-if="type == 'A'">
                A
            </div>
            <div v-else-if="type=='B'">
                B
            </div>
            <div v-else>
                C
            </div>
        </template>
        <div style="color:green">v-if的弹框切换</div>
        <template v-if="loginType === 'username'">
            <label>用户名：</label>
            <input placeholder="Enter your username" key="username-input">
        </template>
        <template v-else>
            <label>密码：</label>
            <input placeholder="Enter your email address" key="email-input">
        </template>
        <button @click="changeloginType">切换状态</button>
    </div>
</body>
</html>

效果图：
在这里插入图片描述
另外还有其它很多指令，每个都有特殊的功能。例如，v-for 指令可以绑定数组的数据来渲染一个项目列表：

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.text }}
    </li>
  </ol>
</div>
<script>
const app = {
  data() {
    return {
      sites: [
        { text: 'Google' },
        { text: 'Runoob' },
        { text: 'Taobao' }
      ]
    }
  }
}

Vue.createApp(app).mount('#app')
</script>
</body>

参数

参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
    <p><a v-bind:href="url">菜鸟教程</a></p>
</div>
    
<script>
const HelloVueApp = {
  data() {
    return {
      url: 'https://www.runoob.com'
    }
  }
}
 
Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

另一个例子是 v-on 指令，它用于监听 DOM 事件：

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

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

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

在这里参数是监听的事件名。

修饰符

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

<form v-on:submit.prevent="onSubmit"></form>

用户输入

在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>

<script>
const app = {
  data() {
    return {
      message: 'Runoob!'
    }
  }
}

Vue.createApp(app).mount('#app')
</script>
</body>

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

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

以下实例在用户点击按钮后对字符串进行反转操作：

<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转字符串</button>
</div>
    
<script>
const app = {
  data() {
    return {
      message: 'Runoob!'
    }
  },
  methods: {
    reverseMessage() {
      this.message = this.message
        .split('')
        .reverse()
        .join('')
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>
</body>

缩写

v-bind 缩写

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

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

v-on 缩写

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

star walkin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录