Vue-(2)模板语法

作者: 物非0人非 | 来源:发表于2021-08-17 15:13 被阅读0次

Vue-(2)模板语法
Vue-模板语法
vue-语法2
Vue3+TS Day02 - 基础指令 Mustache、v-
模板语法2
《二》、Vue核心——基本使用
前端常用解析模板引擎
vue基础语法
beego 模版语法
02-Flask之模板&模型

前言

示例：

<template>
  <div >
    <!-- 展示传递的数据 -->
    <p>{{ name }} {{ age }}岁</p>
    <p>{{ site }}</p>
    <p>{{ url }}</p>
    <p>{{ des }}</p>
  </div>
</template>

<script>
export default {
 name: "测试测试惺惺惜惺惺",
  data(){
   return {
    site: "响彻天堂",
    url: "https://www.jianshu.com/p/89e200d6ac60",
    des: "来学习，分享~",
  }
  },
  created() {
    this.getParams();
  },

  methods: {
    getParams() {
      // 上个页面 取到路由带过来的参数 （萨卡斯基 和38）
      this.name = this.$route.params.name; 
      this.age = this.$route.params.age;
      // 打印 传递的数据
      console.log(this.$route.params);
    },

    show() {},
  },
};
</script>

<style scoped>
p {
  color: blueviolet;
}
</style>

结果如下：

一：文本

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值
Vue的使用举例1：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
    <div id="vue_det">
        <h1>标题 : {{site}}</h1>
        <h1>路径 : {{url}}</h1>
        <h1>说明 : {{details()}}</h1>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#vue_det',
            data: {
                site: "菜鸟教程",
                url: "www.runoob.com",
                alexa: "10000"
            },
            methods: {
                details: function() {
                    return  this.site + " - 学的不仅是技术，更是梦想！";
                }
            }
        })
    </script>
</body>
</html>

结果如下：

上面的代码作简要说明：

Vue的使用举例2：
当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
    <div id="vue_det">
        <h1>site : {{site}}</h1>
        <h1>url : {{url}}</h1>
        <h1>Alexa : {{alexa}}</h1>
    </div>
    <script type="text/javascript">
    // 我们的数据对象
    var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
    var vm = new Vue({
        el: '#vue_det',
        data: data
    })
    
    // 它们引用相同的对象！
    document.write(vm.site == data.site) // true
    document.write("<br>")
        
    // 设置属性也会影响到原始数据
    vm.site = "Runoob"
    document.write(data.site + "<br>") // Runoob
        
    data.alexa = 1234
    document.write(vm.alexa) // 1234
        
    </script>
</body>
</html>

结果如下：

Vue的使用举例3：
除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>

<body>
    <div id="vue_det">
        <h1>site : {{site}}</h1>
        <h1>url : {{url}}</h1>
        <h1>Alexa : {{alexa}}</h1>
    </div>
    <script type="text/javascript">
    // 我们的数据对象
    var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
    var vm = new Vue({
        el: '#vue_det',
        data: data
    })

    document.write(vm.$data === data) // true
    document.write("<br>")
    document.write(vm.$el === document.getElementById('vue_det')) // true
    </script>
</body>
</html>

结果如下：

二：Html

使用v-html 指令用于输出 html 代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div v-html="message"></div>
   <div >{{message}}</div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>菜鸟教程</h1>'
  }
})
</script>
</body>
</html>

运行如果：

三：属性

HTML 属性中的值应使用 v-bind指令。
以下实例判断use的值，如果为 true 使用 class1 类的样式，否则不使用该类：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
</head>
<style>
.class1{
  background: #444;
  color: #eee;
}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
  <br><br>
  <div v-bind:class="{'class1': use}">
    v-bind:class 指令
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      use: false
  }
});
</script>
</body>

运行如果：

四：表达式

Vue.js 都提供了完全的 JavaScript 表达式支持

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    {{5+5}}<br>
    {{ ok ? 'YES' : 'NO' }}<br>
    {{ message.split('').reverse().join('') }}
    <div v-bind:id="'list-' + id">菜鸟教程</div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    ok: true,
    message: 'RUNOOB',
    id : 1
  }
})
</script>
</body>
</html>

运行结果：

10
YES
BOONUR
菜鸟教程

五：指令

指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子：
这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p v-if="seen">现在你看到我了</p>
    <template v-if="ok">
      <h1>菜鸟教程</h1>
      <p>学的不仅是技术，更是梦想！</p>
      <p>哈哈哈，打字辛苦啊！！！</p>
    </template>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true,
    ok: true
  }
})
</script>
</body>
</html>

运行结果：

六：参数

参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <pre><a v-bind:href="url">菜鸟教程</a></pre>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    url: 'http://www.runoob.com'
  }
})
</script>
</body>
</html>

v-bind 缩写
Vue.js 为两个最为常用的指令提供了特别的缩写：

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

运行结果：

七：用户输入

在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  }
})
</script>
</body>
</html>

运行结果：

v-model 指令用来在input、select、textarea、checkbox、radio等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
按钮的事件我们可以使用v-on监听事件，并对用户的输入进行响应。
以下实例在用户点击按钮后对字符串进行反转操作：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转字符串</button>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>
</body>
</html>

v-on 缩写
Vue.js为两个最为常用的指令提供了特别的缩写：

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

运行结果：

八：过滤器

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：
Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：

<!-- 在两个大括号中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

过滤器函数接受表达式的值作为第一个参数。
以下实例对输入的字符串第一个字母转为大写：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  {{ message | capitalize }}
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'runoob'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>
</body>
</html>

运行结果：

过滤器可以串联：

{{ message | filterA | filterB }}

过滤器是 JavaScript 函数，因此可以接受参数：

{{ message | filterA('arg1', arg2) }}

九：修饰符

1、事件修饰符

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self会阻止所有的点击，而 v-on:click.self.prevent只会阻止对元素自身的点击。

2，v-model的修饰符

<1> .lazy
默认情况下，v-model同步输入框的值和数据。可以通过这个修饰符，转变为在change事件再同步。

<input v-model.lazy="msg">

<2> .number
自动将用户的输入值转化为数值类型

<input v-model.number="msg">

<3> .trim
自动过滤用户输入的首尾空格

<input v-model.trim="msg">

3，键盘事件的修饰符
在我们的项目经常需要监听一些键盘事件来触发程序的执行，而Vue中允许在监听的时候添加关键修饰符：

<input v-on:keyup.13="submit">

对于一些常用键，还提供了按键别名：

<input @keyup.enter="submit">      <!-- 缩写形式 -->

全部的按键别名：

<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

与按键别名不同的是，修饰键和keyup事件一起用时，事件引发时必须按下正常的按键。换一种说法：如果要引发keyup.ctrl，必须按下ctrl时释放其他的按键；单单释放ctrl 不会引发事件。

<!-- 按下Alt + 释放C触发 -->
<input @keyup.alt.67="clear">
 
<!-- 按下Alt + 释放任意键触发 -->
<input @keyup.alt="other">

<!-- 按下Ctrl + enter时触发 -->
<input @keydown.ctrl.13="submit">

4，element的修饰符 (面试回答加分)
对于elementUI的input，我们需要在后面加上.native, 因为elementUI对input进行了封装，原生的事件不起作用。

<input v-model="form.name" placeholder="昵称" @keyup.enter="submit">

<el-input v-model="form.name" placeholder="昵称" @keyup.enter.native="submit"> </el-input>

Vue-(2)模板语法
前言文本Html属性表达式指令参数用户输入过滤器修饰符示例：结果如下： image.png 一：文本数据绑...
Vue-模板语法
模板语法 Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的...
vue-语法2
class class和style的绑定也是用v-bind或者：,vuejs对此做了专门的增强，表达式结果的类型除...
Vue3+TS Day02 - 基础指令 Mustache、v-
一、Vue 模板语法 1、如何在 vscode 中添加代码片段？ 2、什么是模板语法？ 3、Mustache 双大...
模板语法2
《二》、Vue核心——基本使用
一、Vue的基本使用 1、编码 2、理解 Vue 的 MVVM 3、模板语法（1）、模板语法的理解 Ⅰ、动态的...
前端常用解析模板引擎
1. Mustache 模板项目官方在github上的语法文档语法： 2.doT 模板项目官方在github上...
vue基础语法
vue常用基础语法：一、模板语法 1.vue使用基于html的模板语法，智能计算出最少需呀重复渲染的组件；2.数...
beego 模版语法
beego 模板语法指南本文讲述 beego 中使用的模板语法，与 go 模板语法基本相同。基本语法 go 统...
02-Flask之模板&模型
一、模板模板概念 Jinja2 模板语法结构标签 block 静态资源的加载结构标签 extends 结构标...

Vue-(2)模板语法

前言

一：文本

二：Html

三：属性

四：表达式

五：指令

六：参数

七：用户输入

八：过滤器

九：修饰符

相关文章

Vue-(2)模板语法

Vue-模板语法

vue-语法2

Vue3+TS Day02 - 基础指令 Mustache、v-

模板语法2

《二》、Vue核心——基本使用

前端常用解析模板引擎

vue基础语法

beego 模版语法

02-Flask之模板&模型

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读