Vue模版语法

已于 2025-03-10 15:15:31 修改
阅读量1.1k 收藏 28
点赞数 36
分类专栏： Vue2 文章标签： Vue2
于 2025-03-10 14:25:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_74350516/article/details/146153726
版权

模版语法

2.1.1、插值语法
  1. 代码示例
<body>
    <!-- 准备容器 -->
    <div id="app">
        <!-- 在data中声明的 -->
        <!--1、 data中声明的变量 -->
        <h1>{{msg}}</h1>
        <h1>{{sayHello()}}</h1>
        <!-- 不在data中的变量不可以 -->
        <!-- <h1>{{i}}</h1> -->
        <!-- <h1>{{sum()}}</h1> -->

        <!-- 2、常量 -->
        <h1>{{100}}</h1>
        <h1>{{'hello vue!'}}</h1>
        <h1>{{3.14}}</h1>

        <!--3、 javascript表达式 -->
        <h1>{{1 + 1}}</h1>
        <h1>{{msg + 1}}</h1>
        <h1>{{'msg' + 1}}</h1>
        <h1>{{gender? '男' : '女'}}</h1>
        <h1>{{number + 1}}</h1>
        <h1>{{msg.split('').reverse().join('')}}</h1>

        <!-- 错误的：不是表达式，这是语句。 -->
        <!-- <h1>{{var i = 100}}</h1> -->

        <!-- 4、在白名单里面的 -->
        <h1>{{Date}}</h1>
        <h1>{{Date.now()}}</h1>
        <h1>{{Math}}</h1>
        <h1>{{Math.ceil(3.14)}}</h1>
    </div>

    <!-- vue程序 -->
    <script>
        // 用户自定义的一个全局变量
        var i = 100;
        // 用户自定义的一个全局函数
        function sum() {
            console.log("sum.....");
        }

        new Vue({
            el: "#app",
            data: {
                number: 1,
                gender: true,
                msg: "abcdef", // msg是在data中声明的变量
                sayHello: function () {
                    console.log("hello vue!");
                },
            },
        });
    </script>
</body>
  1. 代码总结
    {{可以写什么}}
  2. data中声明的变量，函数，数组，等都可以
  3. 常量
  4. 只要是合法的javascript表达式都可以，注意js语句不行，赋值语句，if，for等
  5. 模版表达式都被放在沙盒中，只能访问全局变量的一个白名单，如：Math和Date
    ‘Infinity,undefined,NaN,isFinite,isNaN,’
    ‘parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,’
    ‘Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,’
    ‘require’
    此外，插值语法在实际应用中，还可以用于展示复杂数据结构，如对象的属性等，如 {{user.name}} （假设 user 是在 data 中定义的对象）。
2.1.2、指令语法
  1. 什么是指令？有什么作用？
    指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。例如，通过 v-if 指令可以根据表达式的值动态决定某个元素是否显示在页面上，极大地增强了页面的动态性和交互性。
  2. Vue框架中的所有指令的名字都以“v-”开始。
  3. 插值是写在标签体当中的，那么指令写在哪里呢？
    Vue框架中所有的指令都是以HTML标签的属性形式存在的，
    例如：<span 指令是写在这里的>{{这里是插值语法的位置}}
    注意：虽然指令是写在标签的属性位置上，但是这个指令浏览器是无法直接看懂的。是需要先让Vue框架进行编译的，编译之后的内容浏览器是可以看懂的。
  4. 指令的语法规则：
    完整的语法格式：
    <HTML标签 v-指令名:参数=“javascript表达式”></HTML标签>
    javascript表达式：
    之前在插值语法中{{这里可以写什么}}，那么指令中的表达式就可以写什么，当然{{}}不需要写
    不是所有的指令都有参数和表达式：
    有的指令，不需要参数，也不需要表达式，例如：v-once
    有的指令，不需要参数，但是需要表达式，例如：v-if=“表达式”
    有的指令，既需要参数，又需要表达式，例如：v-bind:参数=“表达式”
  5. v-once 指令
    作用：只渲染元素一次。随后的重新渲染，元素及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
    例如，在展示一些不需要频繁更新的版权信息、固定的标题等场景中，使用 v-once 可以减少不必要的渲染操作，提高页面性能。
  6. v-if=“表达式” 指令
    作用：表达式的执行结果需要是一个布尔类型的数据：true或者false
    true：这个指令所在的标签，会被渲染到浏览器当中。
    false：这个指令所在的标签，不会被渲染到浏览器当中。
<body>
    <!-- 准备一个容器 -->
    <div id="app">
        <h1>{{msg}}</h1>
        <!-- 只会渲染一次，msg更改数据，也不会再次渲染 -->
        <h1 v-once>{{msg}}</h1>
        <h1 v-if="a > b">v-if测试：你看我出不出现</h1>
    </div>
    <!-- vue程序 -->
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: "Hello Vue!",
                a: 10,
                b: 11,
            },
        });
    </script>
</body>
2.1.3、v-bind指令详解
  1. 这个指令是干啥的？
    它可以让HTML标签的某个属性的值产生动态的效果。例如，在图片标签中，通过 v-bind:src 可以根据数据的变化动态加载不同的图片，实现图片的动态展示。
  2. v-bind指令的语法格式：
    <HTML标签 v-bind:参数=“表达式”></HTML标签>
  3. v-bind指令的编译原理？
    编译前：
    <HTML标签 v-bind:参数=“表达式”></HTML标签>
    编译后：
    <HTML标签 参数=“表达式的执行结果”></HTML标签>
    注意两项：
    第一：在编译的时候v-bind后面的“参数名”会被编译为HTML标签的“属性名”
    第二：表达式会关联data，当data发生改变之后，表达式的执行结果就会发生变化。所以，连带的就会产生动态效果。
  4. v-bind因为很常用，所以Vue框架对该指令提供了一种简写方式：
    只是针对v-bind提供了以下简写方式：
<img  :src="imgPath">
  1. 什么时候使用插值语法？什么时候使用指令？
    凡是标签体当中的内容要想动态，需要使用插值语法。
    只要向让HTML标签的属性动态，需要使用指令语法。
<body>
    <!-- 准备一个容器 -->
    <div id="app">
        <!-- 注意：以下代码中 msg 是变量名。 -->
        <!-- 注意：原则上v-bind指令后面的这个参数名可以随便写。 -->
        <!-- 虽然可以随便写，但大部分情况下，这个参数名还是需要写成该HTML标签支持的属性名。这样才会有意义。 -->
        <span v-bind:xyz="msg"></span>

        <!-- 这个表达式带有单引号，这个'msg'就不是变量了，是常量。 -->
        <span v-bind:xyz="'msg'"></span>

        <!-- v-bind实战 -->
        <img src="../img/1.jpg" /> <br />
        <img v-bind:src="imgPath" /> <br />

        <!-- v-bind简写形式 -->
        <img :src="imgPath" /> <br />

        <!-- 这是一个普通的文本框 -->
        <input type="text" name="username" value="zhangsan" /> <br />
        <!-- 以下文本框可以让value这个数据变成动态的：这个就是典型的动态数据绑定。 -->
        <input type="text" name="username" :value="username" /> <br />

        <!-- 使用v-bind也可以让超链接的地址动态 -->
        <a href="https://www.baidu.com">百度1</a> <br />
        <a :href="url">百度2</a> <br />

        <!-- 不能采用以下写法，会报错-->
        <!-- <a href="{{url}}">百度3</a>  -->
    </div>
    <!-- vue程序 -->
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: "Hello Vue!",
                imgPath: "../img/1.jpg",
                username: "章三",
                url: "https://www.baidu.com",
            },
        });
    </script>
</body>
2.1.4、 v-model详解
  1. v-bind和v-model这两个指令都可以完成数据绑定。
  2. v-bind是单向数据绑定。
    data ===> 视图
    例如，在展示用户信息的页面中，从 data 中获取用户的姓名等信息展示在页面上，当 data 中的信息改变时，页面会更新显示，但页面上的操作不会影响 data 中的数据。
  3. v-model是双向数据绑定。
    data <===> 视图
    在表单输入场景中，如用户在输入框中输入内容，data 中的对应数据会实时更新；同时，当 data 中的数据被其他操作修改时，输入框中的内容也会相应改变。
  4. v-bind可以使用在任何HTML标签当中。
    v-model只能使用在表单类元素上，例如：input标签、select标签、textarea标签。
    为什么v-model的使用会有这个限制呢？
    因为表单类的元素才能给用户提供交互输入的界面。v-model指令通常也是用在value属性上面的。（change事件或者input事件）
  5. v-bind和v-model都有简写方式：
    v-bind简写方式：
    v-bind:参数=“表达式” 简写为 :参数=“表达式”
    v-model简写方式：
    v-model:value=“表达式” 简写为 v-model=“表达式”
<body>
    <!-- 准备一个容器 -->
    <div id="app">
        <!-- 完整写法 -->
        v-bind指令：<input type="text" v-bind:value="name1" /><br />
        v-model指令：<input type="text" v-bind:value="name2" /><br />

        <!-- 报错了，v-model不能使用在这种元素上。 -->
        <!-- <a v-model:href="url">百度</a> -->

        <!-- 简写 -->
        v-bind指令：<input type="text" :value="name1" /><br />
        v-model指令：<input type="text" v-model="name2" /><br />

         <!-- 联动改变 -->
        v-bind消息1：<input type="text" :value="msg" /><br />
        v-model消息2：<input type="text" v-model="msg" /><br />
    </div>

    <!-- vue程序 -->
    <script>
        new Vue({
            el: "#app",
            data: {
                name1: "zhangsan",
                name2: "wangwu",
                url: "https://www.baidu.com",
                msg: "Hello Vue!",
            },
        });
    </script>
</body>
2.1.5、用户片段

安装插件：JavaScript (ES6) code snippets
为JavaScript、TypeScript、HTML、React和Vue提供了ES6的语法支持。
第一步：
在这里插入图片描述
第二步：
在这里插入图片描述
第三步：配置片段
html.json中设置html环境下的代码片段

// 配置信息
"Print to console": {
  // 给片段设置的简写
  "prefix": "log",
  // 配置片段
  "body": [
    // ,分割开每行代码  $1 鼠标聚焦的地方 
  "console.log('$1');",
  "$2"
  ],
  // 片段描述信息（可删除）
  "description": "Log output to console"
}

具体配置如下：

{
    "h5 template": {
        "prefix": "vv", // 对应的是使用这个模板的快捷键
        "body": [
            "<!DOCTYPE html>",
            "<html lang=\"en\">",
            "<head>",
            "\t<meta charset=\"UTF-8\">",
            "\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
            "\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
            "\t<title>Document</title>",
            "\t<script src='https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js'></script>",
            "</head>\n",
            "<body>",
            "\t<div id =\"root\"> </div>\n",
            "\t<script>",
            "\tVue.config.productionTip = false//阻止vue 在启动时生成生产提示",
            "\t var vm = new Vue({",
            "\t\tel: '#root',",
            "\t\tdata() {return{}},",
            "\t\tmethods: {}",
            "\t });",
            "\t</script>",
            "</body>\n",
            "</html>"
        ],
        "description": "vue学习模版" // 模板的描述
    }
}

在javascript.json 中配置js的片段

    // 配置信息
    "create vue instance": {
        // 给片段设置的简写
        "prefix": "v1",
        // 配置片段
        "body": [
            "\t var vm = new Vue({",
            "\t\tel: '#root',",
            "\t\tdata: {'$1'},",
            "\t });",
        ],
        // 片段描述信息（可删除）
        "description": "vm"
    },
Vue模版语法（初学Vue之v-指令语法）
百赢出品，必属精品
04-18 966
在Vue.js中，v-开头的指令是用来添加动态行为到你的HTML元素或者组件上的。这些指令可以被应用到普通的HTML元素上，也可以用在Vue.js组件上。v-开头的指令是Vue.js中用来添加动态行为到HTML元素或者组件上的。将HTML属性绑定到Vue实例的数据上。创建双向数据绑定，用于表单控件元素。根据条件渲染元素。循环渲染列表。绑定事件监听器，触发响应函数。根据条件控制元素的显示和隐藏。跳过元素和子元素的编译过程，用于显示原始Mustache标签。
vue模板语法
yzq102873的博客
09-02 1009
vue模板语法
Vue模板语法
qq_62331938的博客
09-02 2637
本篇文章将要分享的内容为Vue的模板语法。
2.1、模版语法
最新发布
weixin_59152833的博客
12-09 864
{{可以写什么}}
02.Vue2.x Vue模版语法
每天进步一点点！！！
04-22 297
Vue模版语法
Vue实例和模版语法.md
09-24
在学习Vue.js的过程中，掌握Vue实例的创建和模板语法是非常重要的基础知识。Vue实例是Vue应用的核心，所有的Vue功能都是围绕着Vue实例进行的。创建一个新的Vue实例是构建Vue应用的第一步，实例中通常会包含应用的...
vue3.0h5模版下载
06-05
Vue 3.0 是 Vue.js 的最新重大更新，带来了许多性能提升、语法优化和新功能。这个“vue3.0h5模版下载”可能是一个预配置的Vue 3项目模板，特别针对移动端H5应用开发，帮助开发者快速启动他们的项目。 Vue 3.0 的...
Vue中的模板语法
weixin_46486125的博客
10-08 386
Vue使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有Vue的模板都是合法的 HTML，所以能被遵循规范的浏览器和HTML解析器解析。 一，插值的几种方式 1，文本插值，使用双大括号{{}} js代码： var vm = new Vue({ el:"#app", data:{ text:“文本” } }) html代码： {{text}} // 文本 2，原始html 双大括号会将数据解析成普通文本，而不是html代码。为了输出真正的html，需要使用 v-html
Vue的模板语法
小认真靖哥哥的博客
08-19 875
Vue的模板语法
【Vue】模板语法
sishihao的博客
08-21 1451
在html中通过{{}}（双大括号）中可以把Vue对象中的数据插入到网页中。并且只要Vue对象上对应的值发生改变了，那么html中双大括号中的值也会立马改变。ref } from 'vue' let username = ref('张三') function onModifyUsername() {
vue模板语法(上)
trasewell的博客
08-01 390
目录： 1. 插值 2. 指令 3. 过滤器 4. 计算属性及监听属性 由于本节讲解的知识比较简单，就主要体现在代码中了（注释） 1.插值 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/vue/2.6....
vue的模板语法
weixin_45111741的博客
09-17 268
（） 1.插值 1.1 文本 {{msg}} 1.2 获取 HTML片段 使用v-html指令用于输出html代码 1.3 给属性绑值 HTML属性中的值应使用v-bind指令 1.4 表达式 Vue提供了完全的JavaScript表达式支持 {{str.substr(0,6).toUpperCase()}} {{ number + 1 }} {{ ok ? ‘YES’ : ‘NO’ }} 我的I...
Vue 模板语法
金溪的博客
07-03 316
如果你熟悉虚拟DOM并且偏爱JavaScript的原始力量, 也可以不用模块, 直接写渲染函数, 使用可选的JSX语法. 1. 插值 (1) 文本 数据绑定最常见的形式就是使用"Mustache"语法(双大括号)的文本插值: <span>Message: {{ msg }}</span> mustache标签将会被替代为对应数据对象上msg属性的值, 无论何时,...
vue template模版语法
10-10
Vue.js 的模板语法是一种声明式编程的方式，它允许开发者使用HTML-like的结构，并结合数据绑定和组件化来构建用户界面。以下是Vue模板的一些核心特性： 1. **数据绑定**：通过`{{ expression }}`，你可以将变量或...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值