Vue入门——模板语法

最新推荐文章于 2022-10-16 10:30:37 发布

SachinLee

最新推荐文章于 2022-10-16 10:30:37 发布

阅读量241

点赞数 1

分类专栏： vue 文章标签： vue vue入门

本文链接：https://blog.csdn.net/Mystic_Lee/article/details/94406729

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Vue入门——模板语法

模板语法

模板语法

本文写作初衷，最近给同事分享了一下 Vue 的入门教程，但是，感觉在分享过程中，讲得比较乱，没有达到预期的效果；另外，在翻看官方文档中，发现有很多知识原来自己没有注意的地方，因此，通过本系列文章巩固一下自己的学习。

个人觉得 vue 官方文档已经讲解的非常好了，更详细内容请查看：https://cn.vuejs.org/

模板语法，就是动态的 HTML 页面，包含一些 js 代码，双大括号表达式、指令（v-bind 等）

1 双大括号

<span>{{message}}</span>

相当于 v-text 指令：；

另外，双大括号可以调用对象的方法，也可以直接在双大括号中使用 JavaScript 表达式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <!--view -->
    <div id="app">
        <input v-model="message">
        <br>
        {{add(message)}}
        <br>
        {{ message.split(' ').reverse().join(',') }}
    </div>
    <script>
        // vm  实例
        const vm = new Vue({
            el : '#app', // element
            data : { // model
                message : 'Hello world'
            },
            methods: {
                add(str) {
                    return str + " aaa"
                }
            }
        })
    </script>
</body>
</html>

2 原始 HTML

双大括号会将数据解释为普通文本，而非 HTML 代码。有时候，我们可能会在数据中保存部分的 HTML 标签，例如：换行符  ；这时候，如果使用双大括号，会看到标签被当做文本展示，而不是作为换行标签，我们可以使用 v-html 指令，将数据作为 HTML 代码展示：

<!--view -->
<div id="app">
    <input v-model="message">
    {{message}}
    <span v-html="message"></span>
</div>
<script>
    // vm  实例
    const vm = new Vue({
        el : '#app', // element
        data : { // model
            message : 'Hello <br> world'
        },
        methods: {
            add(str) {
                return str + " aaa"
            }
        }
    })
</script>

3 指令：数据绑定

双大括号语法，无法作用在 HTML 特性上，这种情况下，我们会使用 v-bind 指定，

主要作用，指定属性值，
通常的写法： v-bind:xxx=‘yyy’
简写：:xxx='yyy'

<input :disabled="isButtonDisabled"/>
<script>
    // vm  实例
    const vm = new Vue({
        el : '#app', // element
        data : { // model
            message : 'Hello <br> world',
            isButtonDisabled: true
        },
        methods: {
            add(str) {
                return str + " aaa"
            }
        }
    })
</script>

3 指令：事件绑定

v-bind 主要绑定属性值，而我们的 HTML 元素通常还有一些时间，例如，按钮的点击事件等。在 vue 中，我们可以使用 v-on 绑定事件：

通常的写法：v-on:keyup=‘xxx’ 或 v-on:keyup=‘xxx(参数)’
简写： @keyup=‘xxxx’

<!--view -->
<div id="app">
    <button @click="handleClick">点我</button>
</div>
<script>
    // vm  实例
    const vm = new Vue({
        el : '#app', // element
        data : { // model
            message : 'Hello <br> world',
            isButtonDisabled: true
        },
        methods: {
            handleClick() {
                alert('点击事件')
            }
        }
    })
</script>

4 动态参数

上边的指令，都是给指定的属性绑定值，或者给指定的事件绑定方法，Vue 2.6 之后，甚至允许我们绑定一个动态的属性，具体写法如下

<a v-bind:[attributeName]="url"> ... </a>

这里 attributeName 也会作为 JavaScript 表达式动态求值，如果 data 中 attributeName 为 href 那么，就相当于 <a v-bind:href="url"> ... </a> ；另外，需要注意的是，url 作为绑定的值，也是一个 JavaScript 表达式，如果是一个指定的字符串而不是在 data 中声明的，需要使用在添加引号，表示是一个字符串。

<div :[aaa]="'color:#F00'">{{message}}</div>
<script>
    // vm  实例
    const vm = new Vue({
        el : '#app', // element
        data : { // model
            message : 'Hello <br> world',
            aaa: 'style'
        }
    })
</script>

另外，需要注意的是，参数部分（即上边的 attributeName），是作为 HTML 中的属性名称，因此不能有引号和空格。

SachinLee

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门——模板语法

Vue入门——模板语法模板语法1 双大括号2 原始 HTML3 指令：数据绑定3 指令：事件绑定4 动态参数模板语法模板语法，就是动态的 HTML 页面，包含一些 js 代码，双大括号表达式、指令（v-bind 等）1 双大括号{{message}} 相当于 v-text 指令：<span v-text="message"&...
复制链接

扫一扫

专栏目录