Vue的模板语法介绍

躺平的乐子人

已于 2023-06-07 15:14:42 修改

阅读量371

点赞数 1

分类专栏： Vue2 文章标签： vue.js javascript 前端

于 2022-10-29 23:27:29 首次发布

本文链接：https://blog.csdn.net/weixin_73368873/article/details/127593696

版权

Vue2 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

模板语法是什么

理解模板语法前，我们先确定什么是模板。在Vue认为，实现视图功能的是容器，而Vue实例的数据绑定到模板的语法则称为模板语法。
使用模板语法优点如下：
1.简洁漂亮，模板语法避开了和Dom的交互，语法更为简洁（前面说的Vue操作虚拟Dom去影响真实的Dom，开发人员只需要使用Vue的模板语法就可以实现对Dom的操作）
2.有巨大性能优势。Vue使用底层机制对模板进行优化：

在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作

模板语法分类

插值表达式

功能：用于在标签体内
写法：{{xxx}}。xxx是Js表达式，且可以直接读取到data的所有属性
下面是一个小例子，展示了如何用插值语法把数据和模板绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
</head>
<body>
     <!--引入Vue2-->
     <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js">
    </script>
   <!--准备Vue容器-->
    <div id="root1">
        <h1>{{name}}</h1>
     </div>
 </div>
    <script>
        
        new Vue({
            el:'#root1',
            //下面指定数据存储
            //对象式
            data:{
               name: '绑定的形式一'
               
            }
        })
      

     
    </script>
    
</body>
</html>

补充：JS表达式是指直接返回值的语句，例如a+b，a

指令语法

功能：用于解析标签属性（包括：标签属性，标签内容，绑定事件等）,给标签属性/标签体动态绑定值

v-bind

v-bind可以给标签属性动态绑定值，使得标签属性如变量般，支持自定义修改

<body>
    <div id="app">數據
        <a v-bind:href="url">数据</a><br>
        <a v-bind:href="personInfo.url">谷歌</a>
        <img v-bind:src="personInfo.src"/>
        

    </div>
    <script type="text/javascript" >
        
 //创建应用 createApp
 const { createApp } = Vue
createApp({
    data() {
        return {
        message: 'Hello Vue!',
        url:'https://www.bilibili.com/',
        personInfo:{
            name:'lin',
            age:21,
            url:'https://www.google.com/',
            src:'a1.jpg'
        }
        }
    }
    }).mount('#app')

        

    </script>
</body>

常见的指令合集

<div id="app">
        <p>{{ message }}</p>
        <p v-cloak>{{cloak}}</p>
            <!-- 单向绑定
                v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
                如果数据中有HTML标签会将html标签一并输出
                注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的
                值-->
            <p v-text=" message"></p>
            <!-- 用法和v-text 相似 但是他可以将HTML片段填充到标签中
                 可能有安全问题, 一般只在可信任内容上使用 v-html ，永不用在用户提交的内容上
                 它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析
                 后输出。 -->
            <p v-html="HTMLElement"></p>
            <!-- 不允许修改页面元素-->
            <p  v-once>{{once}}</p><br>
             <!-- 当数据发生变化的时候，视图也就发生变化
                  当视图发生变化的时候，数据也会跟着同步变化
 -->
            <input v-model="MyData1" /><br>
            <input v-bind:value="MyData2" /><br>
            <button @click="getData">获取数据</button>
         </div>
 
    <script>