Vue模板语法

2021/9/6 6:09:11

本文主要是介绍Vue模板语法,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

目录

  • 模板语法
    • 一、指令
      • 1. v-cloak 指令用法
      • 2. 数据绑定指令
      • 3. 双向数据绑定指令
    • 二、事件绑定
      • 1. Vue如何处理事件
      • 2. 事件函数的调用方式
      • 3. 事件函数参数传递
      • 4. 事件修饰符
      • 5. 按键修饰符
      • 6. 自定义按键修饰符
    • 三、属性绑定
      • 1. Vue如何动态处理属性
      • 2. v-model 的低层实现原理分析
    • 四、样式绑定
      • 1. class样式处理
      • 2. style样式处理
    • 五、分支循环结构
      • 1. 分支结构
      • 2. v-if 与 v-show 的区别
      • 3. 循环结构

模板语法

  • 指令
  • 事件绑定
  • 属性绑定
  • 样式绑定
  • 分支循环结构

一、指令

1. v-cloak 指令用法

<div v-cloak>  {{ msg }}  </div>
  • 插值表达式存在的问题:“闪动”
  • 如何解决该问题:使用 v-cloak 指令
  • 解决该问题的原理:先隐藏,替换好值之后再显示最终的值

2. 数据绑定指令

  • v-text
    ① 相比插值表达式更加简洁
  • v-html
    ① 存在安全问题
    ② 本网站内部数据可以使用,来自第三方的数据不可以用
  • v-pre
    ① 显示原始信息,跳过编译过程(分析编译过程)
<div id="app" >
    <p v-text= "msg" >哈哈哈</p>
    <p v-html= "msg" >哈哈哈</p>
    <p v-pre= "msg" >哈哈哈</p>
</div>



<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
	new Vue({
		el: "#app", //element的缩写,选择器
        data: { //定义数据模型
        	msg: "<span style='color: red'>小张</span>",
        }
	});
</script>

页面显示:
在这里插入图片描述

3. 双向数据绑定指令

  • v-model
<input type='text' v-model='name'/>

eg:

  • v-once 只编译一次
<div id="app">
	<p v-once>原始值:{{ msg }}</p>
    <p>更改值:{{ msg }}</p>
    <input type="text" v-model="msg">
</div>


<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
	new Vue({
		el: "#app", //element的缩写,选择器
        data: { //定义数据模型
        	msg: "Hello World!",
        }
	});
</script>

页面效果:
在这里插入图片描述

二、事件绑定

eg:简单加法计算器

1. Vue如何处理事件

  • v-on指令用法
<input type='button' v-on:click='num++'/>
  • v-on指令简写
<input type='button' @click='num++'/>

2. 事件函数的调用方式

  • 直接绑定函数名称
<button v-on:click='say'>Hello</button>
  • 调用函数
<button v-on:click='say()'>Hello</button>

3. 事件函数参数传递

  • 普通参数和事件对象
<button v-on:click='say("hi",$event)'>Say hi</button>

4. 事件修饰符

  • .stop 阻止冒泡
<a v-on:click.stop= "handle"> 跳转 </a>
  • .prevent 阻止默认行为
<a v-on:click.prevent= "handle"> 跳转 </a>

5. 按键修饰符

  • .enter 回车键
<input v-on:keyup.enter='submit'>
  • .delete 删除键
<input v-on:keyup.delete='submit'>

6. 自定义按键修饰符

  • 全局 config.keyCodes 对象
Vue.config.keyCodes.f1 = 112

三、属性绑定

1. Vue如何动态处理属性

  • v-bind指令用法
<a v-bind:href='url'> 跳转 </a>
  • 缩写
<a :href='url'> 跳转 </a>

2. v-model 的低层实现原理分析

<input v-bind:value="msg" v-on:input="msg=$event.target.value">

四、样式绑定

1. class样式处理

  • 对象语法
<div v-bind:class="{ active: isActive }"></div>
  • 数组语法
<div v-bind:class="[activeClass, errorClass]"></div>

2. style样式处理

  • 对象语法
<div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div>
  • 数组语法
<div v-bind:style="[baseStyles, overridingStyles]"></div>

五、分支循环结构

1. 分支结构

  • v-if
  • v-else
  • v-else-if
  • v-show
<p v-show="true">输入的成绩对应的等级是:</p>
<p v-if="score>=90">优秀</p>
<p v-else-if="score>=70">良好</p>
<p v-else-if="score>=60">及格</p>
<p v-else>不及格</p>

2. v-if 与 v-show 的区别

  • v-if 控制元素是否渲染到页面

  • v-show 控制元素是否显示(已经渲染到了页面)

3. 循环结构

  • v-for 遍历数组
<li v-for='item in list'>{{item}}</li>

<li v-for='(item,index) in list'>{{item}} + '------' +{{index}}</li>
  • key 的作用:帮助 Vue 区分不同的元素,从而提高性能
<li :key='item.id' v-for='(item,index) in list'>{{item}} + ' '------' {{index}}</li>
  • v-for 遍历对象
<div v-for='(value, key, index) in object'></div>
  • v-if 和 v-for 结合使用
<div v-if='value==12' v-for='(value, key, index) in object'></div>


这篇关于Vue模板语法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程