Vue的Temlate语法

最新推荐文章于 2023-03-23 09:32:43 发布
最新推荐文章于 2023-03-23 09:32:43 发布
阅读量370 收藏 1
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41555595/article/details/105336478
版权

Vue的Temlate语法

1.插值

插值的定义

就是在data中定义了一些属性的值插入到DOM中渲染显示。

语法名称语法格式语法用途
Mustache{{属性名称}}将data属性中的值插入到DOM中
v-once指令<标签体 v-once>{{属性名}}你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定
v-html指令<标签体 v-html='属性名'>输出真正的 HTML
v-text指令<标签体 v-text='属性名'>输出的是文本，和Mustache基本一致
v-pre指令<标签体 v-pre='属性名'>就是想让标签体内的东西原封不动的展示，不进行解析
v-cloak指令<标签体 v-cloak>在vue解析之前有这个属性的标签是不会显示的，display:none,vue解析之后就会将v-cloak删掉

Mustache:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Interpolation</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <div id="app">
    <!--Mustache语法-->
    <span>{{msg}}</span><br/>
    <span>{{msg}}!</span><br/>
    <!--大括号内可以有简单的表达式-->
    <span>{{name + ' : ' + phone}}</span><br/>
    <!--可以在大括号里面进行四则运算-->
    <span>{{money + 1000}}</span><br/>
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        msg: 'msg',
        name: '张三',
        phone: '333',
        money: 4000,
      }
    })
  </script>
</body>
</html>

在这里插入图片描述
v-once:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Interpolation</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <div id="app">
    <!--Mustache语法-->
    <span>{{msg}}</span><br/>
    <span>{{msg}}!</span><br/>
    <!--大括号内可以有简单的表达式-->
    <span>{{name + ' : ' + phone}}</span><br/>
    <!--可以在大括号里面进行四则运算-->
    <span>{{money + 1000}}</span><br/>
    <span v-once>{{msg}}</span>
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        msg: 'msg',
        name: '张三',
        phone: '333',
        money: 4000,
      }
    })
  </script>
</body>
</html>

在这里插入图片描述

v-html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Interpolation</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <div id="app">
    <!--Mustache语法-->
    <span>{{msg}}</span><br/>
    <span>{{msg}}!</span><br/>
    <!--大括号内可以有简单的表达式-->
    <span>{{name + ' : ' + phone}}</span><br/>
    <!--可以在大括号里面进行四则运算-->
    <span>{{money + 1000}}</span><br/>
    <span v-once>{{msg}}</span>
    <!--可以将html形式得字符串，以html得格式渲染-->
    <span v-html="title"><span><br/>
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        msg: 'msg',
        name: '张三',
        phone: '333',
        money: 4000,
        title: '<h1>Interpolation</h1>'
      }
    })
  </script>
</body>
</html>

在这里插入图片描述
v-text:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Interpolation</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <div id="app">
    <!--Mustache语法-->
    <span>{{msg}}</span><br/>
    <span>{{msg}}!</span><br/>
    <!--大括号内可以有简单的表达式-->
    <span>{{name + ' : ' + phone}}</span><br/>
    <!--可以在大括号里面进行四则运算-->
    <span>{{money + 1000}}</span><br/>
    <span v-once>{{msg}}</span>
    <!--可以将html形式得字符串，以html得格式渲染-->
    <span v-html="title"></span><br/>
    <span v-text="text"></span><br/>
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        msg: 'msg',
        name: '张三',
        phone: '333',
        money: 4000,
        title: '<h1>Interpolation</h1>',
        text: 'v-text指令'
      }
    })
  </script>
</body>
</html>

在这里插入图片描述

v-pre:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Interpolation</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <div id="app">
    <!--Mustache语法-->
    <span>{{msg}}</span><br/>
    <span>{{msg}}!</span><br/>
    <!--大括号内可以有简单的表达式-->
    <span>{{name + ' : ' + phone}}</span><br/>
    <!--可以在大括号里面进行四则运算-->
    <span>{{money + 1000}}</span><br/>
    <span v-once>{{msg}}</span>
    <!--可以将html形式得字符串，以html得格式渲染-->
    <span v-html="title"></span><br/>
    <!--v-text-->
    <span v-text="text"></span><br/>
    <!--v-pre-->
    <span v-pre>{{msg}}</span><br/>
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        msg: 'msg',
        name: '张三',
        phone: '333',
        money: 4000,
        title: '<h1>Interpolation</h1>',
        text: 'v-text指令'
      }
    })
  </script>
</body>
</html>

在这里插入图片描述

小结：
v-text 与 Mustache不同之处
1.当页面的数据过大或者网络不好，又或者js延缓执行，Mustache是会暴露你写在DOM中的Mustache表达式的如：{{msg}}当然可以和v-cloak联用解决这个问题,而v-text指令则不会，它会直接隐藏。
2.v-text不够灵活，它会直接覆盖标签体内的内容。

2.绑定

绑定的定义：

将data中的属性的值，绑定到标签属性上不同于插值绑到标签体内。

语法名称语法格式语法用途
v-bind指令<标签体 v-bind:属性名称='值'>将data中的属性的值，绑定到标签属性上
v-bind的语法糖<标签体 :属性名称='值'>其实就是v-bind指令的简写
v-for指令<标签体 v-for=‘(元素，index) in 数组名称’>在该需要的循环添加的标签上添加
v-on指令<标签体 v-on:[事件名称]='[调用的方法名称]'>给该标签的事件绑定Vue中的方法
v-on的语法糖<标签体 @[事件名称]='[调用的方法名称]'>v-on指令的简写

v-bind:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Binding</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <div id="app">
    <!--将data属性中的值绑定到href属性上-->
    <!--v-bind的简写-->
    <a v-bind:href="ahref">跳转</a>
    <a :href="ahref">baidu</a>
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        ahref: 'https://www.baidu.com/'
      }
    })
  </script>
</body>
</html>

在这里插入图片描述
按跳转之后就到了百度了
在这里插入图片描述
在这里插入图片描述
绑在class上：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Binding</title>
  <link rel="stylesheet" type="text/css" href="../css/vuecss.css">
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <div id="app">
    <!--将data属性中的值绑定到href属性上-->
    <!--v-bind的简写-->
    <a v-bind:href="ahref" v-bind:class="aclass">跳转</a>
    <a :href="ahref" :class="aclass">baidu</a>
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        ahref: 'https://www.baidu.com/',
        aclass: 'binding'
      }
    })
  </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
给class绑定一个对象：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Binding</title>
  <link rel="stylesheet" type="text/css" href="../css/vuecss.css">
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <div id="app">
    <!--将data属性中的值绑定到href属性上-->
    <!--v-bind的简写-->
    <a v-bind:href="ahref" v-bind:class="{binding : isBinding, fontClass : isFontClass}">跳转</a>
    <a :href="ahref" :class="aclass">baidu</a>
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        ahref: 'https://www.baidu.com/',
        aclass: 'binding',
        isFontClass: true,
        isBinding: true,

      }
    })
  </script>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
当然也可以通过调用方法实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Binding</title>
  <link rel="stylesheet" type="text/css" href="../css/vuecss.css">
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <div id="app">
    <!--将data属性中的值绑定到href属性上-->
    <!--v-bind的简写-->
    <a class="title" v-bind:href="ahref" v-bind:class="getClasses()">跳转</a>
    <a :href="ahref" :class="aclass">baidu</a>
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        ahref: 'https://www.baidu.com/',
        aclass: 'binding',
        isFontClass: true,
        isBinding: true,
      },
      methods: {
        getClasses: function () {
          return {binding : isBinding, fontClass : isFontClass};
        }
      }
    })
  </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
往绑定的class传入数组

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Binding</title>
  <link rel="stylesheet" type="text/css" href="../css/vuecss.css">
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <div id="app">
    <!--将data属性中的值绑定到href属性上-->
    <!--v-bind的简写-->
    <a class="title" v-bind:href="ahref" v-bind:class="getClasses()">跳转</a>
    
    <a :href="ahref" :class="[binding, fontClass]">baidu</a>
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        ahref: 'https://www.baidu.com/',
        aclass: 'binding',
        isFontClass: true,
        isBinding: true,
        binding: 'binding',
        fontClass: 'fontClass'
      },
      methods: {
        getClasses: function () {
          return {binding : this.isBinding, fontClass : this.isFontClass};
        }
      }
    })
  </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
将对象绑定到style中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BindingStyle</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <div id="app">
    <!--style绑定对象的格式:styel="{key(css属性名) : value(css的属性值)}"-->
    <div :style="{'font-size' : '100px'}" v-text="msg"></div>
    <div :style="{fontSize : defindFontSize}" v-text="msg"></div>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        msg: 'Style',
        defindFontSize: '100px'
      }
    })
  </script>
</body>
</html>

在这里插入图片描述

将数组绑定到style

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BindingStyle</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <div id="app">
    <!--style绑定对象的格式:styel="{key(css属性名) : value(css的属性值)}"-->
    <div :style="{'font-size' : '100px'}" v-text="msg"></div>
    <div :style="{fontSize : defindFontSize}" v-text="msg"></div>
    <!--style绑定数组-->
    <div :style="[baseStyle, {fontSize : defindFontSize}, {color: defindColor}]" v-text="msg"></div>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        msg: 'Style',
        defindFontSize: '100px',
        defindColor: 'red',
        baseStyle: {'font-style': 'italic'}
      }
    })
  </script>
</body>
</html>

在这里插入图片描述

v-for:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Location</title>
    <script type="text/javascript" src="../js/vue.js"></script>

</head>
<body>
    <div id="app">
        <ol>
            <li v-for="item in locations">{{item}}</li>
        </ol>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                locations: ['北京', '上海', '广州', '深圳']
            }
        });
    </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
v-on:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Now Time</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
    <h1>当前时间: {{nowTime}}</h1>
    <!--这里的v-on:click之间不要空开,不然事件监听会失效-->
    <!--v-on:用于绑定事件,可以语法糖简写:@click,即代替v-on-->
        <button v-on:click="refeshTime">刷新当前时间</button>
        <button @click="refeshTime">刷新当前时间</button>
    </div>
    <script>
    var app = new Vue({
        el: "#app",
        data: {
            //值得注意的是在data里面起名字的时候不要起Vue的关键，不然响应式渲染会失败，如：date, dateTime
            nowTime: Date.now().toString()
        },
        //用于定义定义方法
        methods: {
            refeshTime: function () {
                var that = this;
                that.nowTime = Date.now().toString();
            }
        }
    })
    </script>
</body>
</html>

在这里插入图片描述

禁止喧哗
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue基础语法练习源码
12-09
本套资源，是在html文件中测试的一些vue基础语法，包括过滤器、定义插件、列表渲染等语法。此资源适用于初学vue的小伙伴，用于加深对vue语法的熟悉。
Vue系列之—Element UI 表单自定义效验规则
热门推荐
zhou139856的博客
07-03 1万+
介绍Vue项目中表单验证规则使用和常见验证方法
Vue.js语法详解：从入门到精通
m0_55416028的博客
03-23 1547
本文介绍了Vue.js的一些核心概念和语法，包括组件、模板、数据绑定、计算属性、生命周期钩子和指令。指令以`v-`开头，后面跟着指令的名称，例如`v-if`、`v-for`和`v-bind`。在本文中，我们将深入探讨Vue.js的语法，帮助读者更好地理解和应用Vue.js。如果你想深入学习Vue.js，可以查看官方文档或者其他相关资料，这些资源可以帮助你更好地掌握Vue.js的知识。在上述示例中，我们定义了一个简单的Vue.js组件，并在该组件中使用了常见的生命周期钩子。关注我，持续分享更多优质好文！
vue-admin-template
weixin_50613714的博客
05-23 5791
vue-element-admin 介绍 vue-element-admin是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。 官方网址：https://panjiachen.github.io/vue-element-admin-site/zh/guide/#%E5%8A%9F%E8%83%BD 目录结构 ├── build
Vue模板的使用，vue中使用js表达式
m0_50641264的博客
09-24 619
vue使用js表达式
vue语法.rar
08-16
二、Vue的数据驱动---mvvm模式的介绍 Vue是一款轻量级的渐进式前端框架，主要功能： 1、模板渲染/数据同步 2、组件化、模块化 3、扩展功能：路由 等等 Vue资源： 中文官网：https://cn.vuejs.org/ Github源码...
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
Vue语法.xmind
12-18
一款清楚明白的vue语法 xmind文档
vue3语法记录 vue3语法记录
04-20
vue3语法记录vue3语法记录vue3语法记录vue3语法记录
Vue条件判断
qq_41555595的博客
08-06 3004
Vue条件判断 1. v-if <div id="app"> <h1 v-if="showed">Hello World1!</h1> <h1 v-if="!showed">Hello World2!</h1> </div> <script> const vue = new Vue({ el: '#app', data: { show
Vue循环遍历
qq_41555595的博客
08-07 2697
Vue循环遍历 1.v-on介绍 作用 循环遍历 预期 Array | Object | number | string | Iterable (2.6 新增) 用法 alias in expression ## 2.v-for 遍历数组 <div id="app"> <ul> <li v-for="name in names">{{name}}</li>
Vue监听事件:v-on
qq_41555595的博客
08-06 703
Vue监听事件:v-on 1.v-on介绍 作用 绑定事件监听器 缩写 @ 预期 Function | Inline Statement | Object 参数 event 2.v-on的基本是用 <div id="app"> <span v-text="count"></span> <button v-on:click="i
Vue的计算属性
qq_41555595的博客
04-07 392
计算属性 定义： 用于对data中属性的值惊醒运算 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Complute</title> <script type="text/javascript" src="../js/...
npm安装Vue(Windows)
qq_41555595的博客
03-18 245
npm安装Vue(Windows) 1. 安装前须知： 名称 作用 npm Node.js下的包管理器 webpack 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包 vue-cli 用户生成Vue工程模板。(帮助用户开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要npm install就...
Vue表单绑定: v-model
qq_41555595的博客
08-10 231
Vue表单绑定: v-model 双向绑定 v-model = v-bind + @input(事件) 1.v-model的基本基本使用 <div id="app"> <input type="text" v-model="msg"> {{msg}} </div> <script> const vue = new Vue({ el: '#app', data: { m
Vue的基本使用案例
qq_41555595的博客
08-07 117
Vue的基本使用案例 1.当鼠标经过一行时显示不一样的颜色 <style> .active{ background: red; } </style> <div id="app"> <ul> <!-- 这样只能拿到属性的value,不能拿到key--> <li v-for="(name, index) in names" :key="name" :class="{active : showActive(
Vue入门
qq_41555595的博客
04-05 75
Vue入门 1.简介 什么是Vue Vue是一套用于构建用户界面的渐进式 （将vue作为项目的一部分嵌套进去，例如重构jQuery的项目，可以没重构保留原有的jQuery，重构用Vue，可以一点点的引用进去）框架。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结...
android手机应用源码Imsdroid语音视频通话源码.rar
最新发布
05-20
android手机应用源码Imsdroid语音视频通话源码.rar
vue mounted语法
10-24
在Vue中，mounted是一个生命周期钩子函数，它会在Vue实例挂载到DOM元素上后立即执行。在mounted函数中，我们可以访问到Vue实例的数据和方法，并且可以进行一些DOM操作或者发起异步请求等操作。通常情况下，我们会在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值