Vue学习——语法简介

概述

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

Vue示例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello Vue.js</title>
    </head>
    <body>
        <!-- view -->
        <div id="app">
            <!-- 简单的文本插值 -->
            <p>{{message}}</p>
            <!-- 使用JavaScript表达式 -->
            <p>{{message.toUpperCase()}}</p>
            <!-- 以普通文本形式输出HTML代码 -->
            <p>{{spanHtml}}</p>
            <!-- 输出HTML代码 -->
            <p v-html="spanHtml"></p>
            <!-- 使用v-bind指令对HTML元素的属性进行绑定 -->
            <a v-bind:href="url">新浪网</a>
        </div>

        <script src="vue.js"></script>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    message: "Hello Vue.js",
                    url: "http://www.sina.com.cn/",
                    spanHtml: "<span style='color : red'>HTML元素，以红色字体显示</span>"
                }
            })
        </script>
    </body>
</html>

Vue实例

在一个使用Vue.js框架的页面应用程序中，至少要创建一个Vue实例，语法为new Vue()，Vue实例充当了MVVM模式中的ViewModel。在创建Vue实例时，需要传入一个选项对象，该对象可以包含数据、方法、组件生命周期钩子等。

在上述代码示例中，将Vue实例赋给了变量vm，在实际开发中并不需要如此，这里只是为了便于后面内容的讲解

在选项对象中，通过el属性绑定要渲染的View，el: '#app'表示该Vue实例将挂载到<div id="app">...</div>这个元素；data属性指定一个Model，所有的数据都在该数据对象中定义。

除了使用el属性指定Vue实例要挂载的元素外，还可以使用vm.$mount()方法手动挂载Vue实例

使用vm.$mount()方法返回实例本身

var vm = new Vue({...})
vm.$mount('#app')
// 或者
var vm = new Vue({...}).$mount('#app')

定义了Vue实例后，就可以通过插值来进行数据绑定了。

插值

数据绑定最常见的形式就是使用Mustache语法（双花括号）的文本插值。

Mustache标签会被替换为Vue实例中数据对象上的属性值。当绑定的数据对象的值发生变化，插值处的内容就会被更新。

使用Chrome浏览器，查看上述代码，结果显示如下图：

image

切换到Console窗口，输入vm.message = "welcome you"，执行后内容发生同步更新，结果显示如下图：

image

如果绑定的数据中包含HTML代码，那么使用Mustache语法（双花括号）将把HTML代码以普通文本的方式进行输出，也就是说，Vue内部对HTML代码进行了字符转移。例如上述代码中，在数据对象中定义了spanHtml属性，其值是一段HTML代码，因此在页面渲染{{spanHtml}}时会直接输出HTML代码。

如果要输出真正的HTML代码，以便浏览器能够正常解析，需要使用v-html指令。——关于指令，可以参考“Vue学习——指令(一)”这一系列

Mustache语法不能作用于HTML元素的属性上，要解决HTML元素属性值的绑定问题，需要使用v-bind指令。

使用v-bind指令将url属性和<a>元素的href属性进行了绑定。因此可以在Chrome浏览器的控制台窗口中改变url的值。

除了绑定简单的属性值外，对于所有的数据绑定，Vue.js还提供了完全的JavaScript表达式支持。

这些表达式会在所属Vue实例的数据作用域下作为JavaScript被解析。但是要注意的是，每个绑定都只能包含单个表达式

在插值语法中使用JavaScript表达式示例

<!-- 以下表达式可以正常使用 -->
{{a + b}}
{{isLogin ? username : 'not login'}}
{{message.split('').reverse().join('')}}
<div v-bind:id="'list-' + id"></div>

<!-- 以下情况不会生效 -->
<!-- 这是语句，不是表达式 -->
{{var a = 1}}
<!-- if语句也不会失效，可以使用三元表达式来代替 -->
{{if (ok) {return message} }}

最后编辑于：2020.09.04 08:22:02