Vue学习笔记之02-Mustache语法以及一些指令

Mustache语法

又称大胡子语法就是用两个大括号来包裹变量从而挂钩Vue去解析里面的代码
比如

    <h2>{{message}}</h2><!-- Mustache语法中不仅仅可以直接写变量, 还可以写一些简单的表达式 --><h2>{{firstName + lastName}}</h2><h2>{{firstName}} + ' ' + {{lastName}}</h2><h2>{{first}} {{lastName}}</h2><h2>{{counter * 2}}</h2>

v-once指令 (不是很常用)

在某些情况下, 有一些元素我们不想它响应式地根据数据的改变而改变的时候, 给这个元素加上v-once指令后, 它就只会渲染一次, 之后就不会再渲染

<div id="app"><h2>{{message}}</h2> // 这个元素会动态响应渲染<h2 v-once>{{message}}</h2> // 这个元素不会动态响应渲染</div><script>const app = new Vue({el: "#app",data: {message: "你好"}})</script>

v-html指令

有时候服务器端传过来的数据并不是一个字符串而是一个html标签, 这个时候就可以用v-html指令来渲染这个标签
v-html指令不用Mustache语法, 这是为了安全的考虑而且这个指令一般用于信任的数据

<div id="app"><h2>{{url}}</h2><h2 v-html="url"></h2></div><script>const app = new Vue({el: "#app",data: {url: "<a href='http://www.baidu.com'>百度一下</a>"}})</script>

v-test指令

因为会覆盖原来标签里面得内容,而且不能进行字符串的拼接, 所有很少使用

<div id="app"><h2>{{message}}</h2><!-- 跟Mustache语法差不多, 但是Mustache语法用得多, 因为v-text使用不灵活, 会覆盖原来标签里面得东西 --><h2 v-test="message"></h2></div><script>const app = new Vue({el: "#app",data: {message: "你好"}})</script>

v-pre指令

把标签里面的东西原封不动的显示在页面, 带有这个指令的标签不进行Vue的处理

<div id="app"><h2>{{message}}</h2><h2 v-pre>{{message}}</h2><!-- 这个标签里面的东西就不会进入Vue渲染了 --></div><script>const app = new Vue({el: "#app",data: {message: "你好"}})</script>

v-cloak指令

在某些情况下, 浏览器可能会直接显示出未经过Vue渲染的代码
v-cloak指令会在vue渲染之前存在, 而在vue渲染之后自动删除
利用这个特性, 可以将代码通过CSS的属性选择器先把代码隐藏起来, 在vue渲染之后删除了这个指令, 代码自动就显示出来了, 增强用户体验, 但是以后vue的代码会有更好的方法解决这个问题,所以这个指令也不常用

v-bind指令

想要动态绑定标签的属性值, 不能直接用mustache语法, 而要用v-bind指令前缀
v-bind指令的语法糖是 :

<div id="app"><!-- 想要动态绑定标签的属性, 不可以直接用mustache语法, 而要用v-bind前缀 --><img v-bind:src="imgUrl" alt=""><!-- 语法糖写法 --><img :src="imgUrl" alt=""><!-- a标签也一样 --><a v-bind:href="aHerf">百度一下</a></div><script>const app = new Vue({el: "#app",data: {imgUrl: "https://cn.vuejs.org/images/logo.png",aHerf: "https://www.baidu.com"}})</script>

v-bind指令的对象语法 (用得较多)

v-bind还可以动态地绑定class, 达到动态绑定样式的效果
动态绑定的class, 里面传入一个对象, 键值对的形式 {key:value},key是一个类名,value是一个布尔值, 为true则为这个class添加这个key, 反之则不添加
动态绑定的class, 和静态的class可以共存的, 动态绑定的class不会覆盖静态的class

<div id="app"><!-- v-bind还可以动态地绑定class, 达到动态绑定样式的效果 --><!-- 动态绑定的class, 里面传入一个对象, 键值对的形式 {key:value},value是一个布尔值, 为true则为这个class添加这个key, 反之则不添加 --><h2 :class="{active : isActive, line : isLine}">你好呀</h2><!-- 动态绑定的class, 和静态的class可以共存的, 动态绑定的class不会覆盖静态的class --><h2 class="title" :class="{active : isActive, line : isLine}">你好呀</h2><button @click="btnClick()">按钮</button><!-- 如果class的内容过于复杂的话, 可以将class的内容放入methods中 --><h2 :class="getClasses()">你好呀</h2></div><script>const app = new Vue({el: "#app",data: {isActive: true,isLine: true},methods: {btnClick: function () {this.isActive = !this.isActive;},getClasses : function () { // 调用这个方法的时候返回一个对象return {active : this.isActive, line : this.isLine} // 方法中调用变量记得要加this}}})</script>

v-bind绑定class的数组写法 (不常用)

特点跟对象写法差不多

<div id="app"><!-- 数组写法 跟对象写法差不多 --><h2 :class="[active , line]">你好呀</h2><!-- 注意数组中的元素加引号和不加引号的区别, 加引号表示一个字符串, 不加引号表示一个变量 --><h2 :class="['active', 'line']"></h2><!-- 跟对象一样如果class过于复杂也可以, 写到methods里面 --><h2 :class="getClasses()"></h2></div><script>const app = new Vue({el: "#app",data: {active: "aaa",line: "bbb"},methods: {getClasses: function () {return [this.active, this.line] // 方法中调用变量记得加this}}})</script>

用v-bind动态绑定style (对象写法, 常用)

与动态绑定class写法差不多, 传入一个对象{key(属性名) : value(属性值)}
动态绑定的与静态编写的不会覆盖

<div id="app"><!-- 跟动态绑定class差不多, 传入一个对象 {key(属性名) : value(属性值)} --><h2 :style="{fontSize:'100px'}">你好呀</h2><!-- 传入参数的时候, 要注意引号的添加, 不加引号代表一个变量, 加了引号代表一个字符串, 绑定多个style用逗号隔开即可 --><h2 :style="{fontSize: finalSize, background : finalColor}">你好呀</h2></div><script>const app = new Vue({el: "#app",data: {finalSize: "100px", // 如果这里写的100 ,那么在标签内引入的时候记得要利用字符串拼接加上单位"px"finalColor: "red"}})</script>

用v-bind动态绑定style (数组写法, 我感觉这个写法很蠢, 不常用)

在数组中传入一个一个的对象, 对象是键值对写法, 与对象写法一致

<div id="app"><!-- 数组写法, 数组中传入一个对象,可以传入多个对象,逗号隔开, 对象写的是{key(属性名) : value(属性值)} --><h2 :style=[baseStyle]>你好啊</h2></div><script>const app = new Vue({el: "#app",data: {baseStyle: {backgroundColor: "red"}}})</script>

Vue学习笔记之02-Mustache语法以及一些指令相关推荐

Vue.js 基础语法入门语句 Vue学习笔记 v-model 双向数据绑定
Vue.js 基础语法,入门语句,Vue学习笔记学习网站:https://www.bilibili.com/video/BV15741177Eh vue 的体验响应式:数据一旦改变,视图就会响应改 ...
Vue学习笔记02——Vue路由
Vue学习笔记01--Vue开发基础一.初识路由 1.路由的作用 Vue的路由是前端路由,可以让组件之间互相切换. 2.vue-router.js文件 Vue的路由使用需要引入vue-router. ...
Vue学习笔记01——Vue开发基础
一.Vue实例配置选项选项说明 data Vue实例数据对象 methods 定义Vue中的方法 components 定义子组件 computed 计算属性 filters 过滤器 el 唯一根 ...
Vue学习笔记进阶篇——Render函数
本文为转载,原文:Vue学习笔记进阶篇--Render函数基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编 ...
Vue学习心得记录之模板语法
下面是我这半年以来总结的Vue学习笔记,帮助自己复习学习Vue的基本用法.有需要的同志可以参考下. Vue的模板语法 Vue有很简单的模板语法,这些Vue指令用来响应式改变渲染DOM可以快速入门上手这 ...
Vue学习笔记（三） —— 前后端交互
简介本文主要是为了介绍前端交互的相关知识,而严格来讲,这也不算是Vue的专属知识,但是却是必须要指定的.本文开始简单说了ajax.jquery 的方式,但是随着SPA开发模式的大火,相继出现了一些新 ...
day4 vue 学习笔记组件生命周期数据共享数组常用方法
系列文章目录 day1学习vue2笔记 vue指令 day2 学习vue2 笔记过滤器侦听器计算属性 axios day3 vue2 学习笔记 vue组件 day4 vue 学习笔记组件生命 ...
Liunx学习笔记 - 07 - 02 正则表达式与文件格式化处理
Liunx学习笔记 - 07 - 02 正则表达式与文件格式化处理 1 前言:啥是正则表达式简单来讲,正则表达式是处理字符串的方法,它是以行为单位来进行字符串的处理行为,正则表达式通过一些特殊符号的 ...
Vue学习笔记（三）Vue2三种slot插槽的概念与运用 | ES6 对象的解构赋值 | 基于Vue2使用axios发送请求实现GitHub案例 | 浏览器跨域问题与解决
文章目录一.参考资料二.运行环境三.Vue2插槽 3.1 默认插槽 3.2 具名插槽 3.3 作用域插槽 ES6解构赋值概念 & 作用域插槽的解构赋值 3.4 动态插槽名四.GitHu ...
「Vue 学习笔记 1」Vue 项目快速搭建，初始项目各个文件夹作用介绍和启动代码执行流程分析
「Vue 学习笔记 1」Vue 项目快速搭建,初始项目各个文件夹作用介绍和启动代码执行流程分析前言一.我的开发环境二.使用 Vue CLI (Vue 脚手架)快速搭建项目三.初始项目的目录结构 ...

Vue学习笔记之02-Mustache语法以及一些指令

Mustache语法

v-once指令 (不是很常用)

v-html指令

v-test指令

v-pre指令

v-cloak指令

v-bind指令

v-bind指令的对象语法 (用得较多)

v-bind绑定class的数组写法 (不常用)

用v-bind动态绑定style (对象写法, 常用)

用v-bind动态绑定style (数组写法, 我感觉这个写法很蠢, 不常用)

Vue学习笔记之02-Mustache语法以及一些指令相关推荐

最新文章

热门文章