Vue的Temlate语法

最新推荐文章于 2022-03-10 09:40:33 发布
最新推荐文章于 2022-03-10 09:40:33 发布
阅读量418 收藏 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>

在这里插入图片描述

禁止喧哗
关注
专栏目录
vue-pattern-input：使用RegExp限制输入
02-18
Vue模式输入 Vue组件使用RegExp限制用户的输入。 就像本机输入元素一样，您可以添加maxlength class属性。 您也可以使用v-model 。 English | 目录 现场演示 只需单击： 。 包含什么 在下载文件中，您将找到以下目录和文件，对公用资产进行逻辑分组，并提供已编译和最小化的变体。 您会看到以下内容： vue-pattern-input/ ├── ... ├── src/ │ └── /component │ └── pattern-input.vue // core └── /view └── demo.html 参数声明 范围 类型 默认 必需的 描述 regExp 正则表达式 空值 错误的 用于：String.prototype.replace（正则表达式，替换） 替换 细绳 '' 错误的 用于：String.p
vue使用el-form的rules里面的pattern进行校验
weixin_44111803的博客
03-09 7463
vue使用el-form的rules里面的pattern进行校验校验手机号校验电话号码校验只能输入数字、字母校验只能输入数字、字母、特殊字符强校验密码必须包含数字、字母、特殊字符，且长度为6-16位校验链接校验身份证号校验邮箱 校验手机号 {pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,message: "请输入正确的手机号码",trigger: "blur"} 校验电话号码
七个意想不到的vue pattern
凝视深渊
09-17 3426
周末在家刷如懿传，顺带在youtube看了一个7-secret-patterns-about-vue的视频，讲得还蛮有意思的，确实有些地方意想不到。更多内容参见作者的github仓库。 productivity Boosts smart watchers component Registration module Registration radical Tweaks cleaner v...
el-input验证规则
ALDNOAH_K的博客
03-10 5333
rules: { people: [ { required: true, message: "请输入权重", trigger: "blur" }, { pattern: /^(?:0|[1-9][0-9]?|100)(\.[0-9]{0,2})?$/, message: "只能为0-100之间的整数", }, ], } 其他的input..
【vue】elementUI form表单验证-正则验证-pattern
yushanyue的博客
05-21 2063
// 正则验证 rules: { stockpile: [ { required: true, message: "请输入库存", trigger: "blur" }, { pattern: /^[1-9]\d*$/, message: '请输入大于0的整数', trigger: 'change' } ], }
vue基础语法练习源码
12-09
首先，让我们深入了解Vue的基础语法。Vue实例是整个应用的核心，它通过`new Vue()`创建。在HTML文件中，我们通常使用`<script>`标签引入Vue库，并创建实例，将DOM元素与Vue实例绑定。例如： ```html ...
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文档
vue模板语法-插值详解
08-31
Vue 模板语法 - 插值详解 Vue 模板语法 - 插值详解是 Vue 框架中的一种模板语法，用于在 Vue 模板中插入动态数据。插值是 Vue 模板语法中的一种基本语法，用于将数据绑定到模板中。 文本插值 在 Vue 模板语法中，...
vue中template的三种写法
菩提本无树的博客
11-23 1007
第一种（使用模板字符串）早期字符串拼接年代 <div id="app"></div> new Vue({ el: "#app", template: '<div>\ <h1>{{message}}</h1>\ <div>', data: {
VUE rules 验证
wh710107079的博客
05-06 9426
一.在组件上定义一个:rules 1.rules el-form ref="dataForm" :rules="rules" :model="dataForm" size="mini" label-width="110px" &gt...
在vue中使用rules的定义和校验规则
asdfghjkl521947的博客
09-18 5万+
表单内容里面定义属性: <From ref="rulesForm" :model="rulesForm" :label-width="100" :rules="rules"> <FormItem label="名称" prop="name"> <Input v-model="rulesForm.name" placeholder="名称"/> </FormItem> 在data()里面写具体的规则: rules { n
[vue] element-ui 中表单验证使用正则pattern
Dorcas_FE的博客
05-05 9865
rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ], mobile: [ { pattern: /^1([38][0-9]|4[579]|5[0-3,5-9...
vue动画 使用animate实现动画
qq_42477147的博客
08-21 1万+
第一步：下载依赖 npm install animate.css --save 第二步：script中引入 import animate from "animate.css"; 第三步：使用 完整代码： <template> <div class="hello"> <input type="button" value="button" @click="...
vue中的template标签
热门推荐
u013594477的专栏
06-22 13万+
1.template标签，HTML5提供的新标签，更加规范和语义化 ；可以把列表项放入template标签中，然后进行批量渲染 &amp;lt;template id=&quot;tem&quot;&amp;gt; &amp;lt;div id=&quot;app&quot;&amp;gt; &amp;lt;h1 id=&quot;title&quot;&
【Vue】template 模板用法
qq_45677671的博客
03-30 6万+
文章目录一、在HTML5中二、在JavaScript中三、在Vue中写在vue构造器里写在template标签里写在script标签里（官方推荐） 一、在HTML5中 template标签：其内容隐藏在客户端之外 该内容在加载页面是不会呈现，不会渲染出任何信息 相当于自带属性：template {display: none;} <body> <template> <!-- 该标签内容是不可见的 --> 内容模板元素 </
模板(template)使用介绍
qq_24946843的博客
03-31 1万+
我们已经学过重载(Overloading)，对重载函数而言,C++的检查机制能通过函数参数类型的不同及所属类的不同，正确的调用重载函数。例如，为求两个数的最大值，我们定义max()函数需要对不同的数据类型分别定义不同重载(Overload)版本。 但如果在主函数中，我们分别定义了char a,b;那么在执行max(a,b);时 程序就会出错，因为我们没有定义char类型的重载版本。现在，我们...
前端模板template-web简单使用
你不知道你不知道的事
09-09 4万+
template-web M：template-web是什么东西，有什么作用？ Z： 这是一个模板引擎，简单来说就是构建一个模板，让其生成html的js代码。如果不用该js，手动来操作，我们可能需要繁杂的拼接html标签，还要做for循环。 M：具体使用的方式是怎么样的呢？ Z：这里有个demo &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang='en'&amp;gt;...
vue2语法升级到vue3语法工具
最新发布
05-20
Vue 2 和 Vue 3 的语法有很多不同，虽然可以手动逐步升级，但是使用工具可以更加方便和高效。以下是一些工具： 1. Vue CLI ：Vue CLI 是一个官方提供的命令行工具，可以快速创建 Vue 项目，并且支持 Vue 2 和 Vue 3...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值