最新文章
- MySQL中, group by 和 order by 一起使用会有排序问题,group by 和 order by 同时使用时要注意的地方
- Vue学习笔记(10) ——Vue组件中的data和methods
- Vue学习笔记(9) ——Vue组件创建的几种方式
- Vue学习笔记(8) ——Vue实例的生命周期
- Vue学习笔记(7) —— 过滤器 filter的基本使用
- Vue学习笔记(6) ——v-if指令和v-show指令
- Vue学习笔记(5) —— v-for指令和key属性
- Vue学习笔记(5) —— Vue中样式-class样式和style样式
- Vue学习笔记(4) —— v-model指令,双向数据绑定
- Vue学习笔记(3) —— Vue事件修饰符
关注我


Vue学习笔记(2) —— v-cloak、v-text、v-html、插值表达式{{}}、v-bind、v-on的学习
- 分类:WEB前端
- 时间:2020-10-01
- 共1382人围观
Vue官方对应文档:API——Vue.js
一、v-cloak 指令
当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。
在简单项目中,使用 v-cloak 指令是解决屏幕闪动的好方法。但在大型、工程化的项目中(webpack、vue-router)只有一个空的 div 元素,元素中的内容是通过路由挂载来实现的,这时我们就不需要用到 v-cloak 指令。
二、v-text指令和v-html指令
1、v-text指令,用于渲染普通文本,无论何时,绑定的数据对象上 msg属性发生了改变,插值处的内容都会更新。
2、v-html指令,如果你想输出真正的 HTML,你需要使用 v-html指令,v-text仅渲染标签,不能解析 HTML 代码标签。
3、v-text指令和{{}}表达式渲染数据,不解析HTML标签。
4、v-html指令不仅可以渲染数据,而且可以解析HTML标签。
三、插值表达式{{}}
主要作用是进行数据绑定,最常见的形式是使用“Mustache”语法(双大括号)的文本插值。例如:<span>Message:{{msg}}</span>Mustache标签将会被替代为对应数据对象上msg属性(msg定义在data对象中)的值。无论何时,绑定的数据对象上msg属性发生了改变,插值处的内容都会更新。
插值表达式{{}}对JavaScript表达式支持
{{number + 1}} {{ok===true ? 'yes' : 'no'}} {{message.split('').reverse().join('')}}
四、v-bind指令
v-bind用于绑定数据和元素属性(如href属性和class属性等等)
v-bind指令由于使用频繁,通常将v-bind:属性名=" "的格式简写成 :属性名=" "
v-bind 的三种用法
1、直接使用指令v-bind
2、使用简化指令 :
3、在绑定的时候,拼接绑定内容::title="btnTitle + ', 这是追加的内容'"
五、v-on指令
v-on指令就是用于绑定事件的(如有个按钮,我想点击的时候执行一些操作)
v-on:事件名 可以简写为 @事件名
注意:后面的值是一个方法,可以写成myclick(),如没有参数也可以写成myclick。另外这种事件对应的方法不是定义在data里面,而是定义在vue实例的methods里
v-on指令的主要几种使用情况
一、直接绑定事件 @事件名="方法" => @click="onClick" methods:{ onClick:function(){ console.log('onClick') } } 二、绑定事件类 v-on="{事件:方法}" => v-on="{mouseenter:onEnter,mouseout:onOut}" methods:{ onEnter:function(){ console.log("onEnter") }, onOut:function(){ console.log("onOut") } } 三、阻止默认形为(提交时刷新) v-on:事件="方法($event)" => @submit="onSubmit($event)" methods:{ onSubmit:function(e){ e.preventDefault(); console.log("onSubmit") } } 四、阻止默认形为二(提交时刷新) v-on:事件.行为="方法" => @submit.prevent="onSubmit2" // @submit.stop="onSubmit2" methods:{ onSubmit2:function(){ console.log("onSubmit2") } } 五、键盘事件(最好配合阻止默认行为一起使用) v-on:事件.键值="方法" => @keyup.enter="onEnter" methods:{ onKeyup:function(){ console.log("onKeyup") } }
五、v-cloak、v-text、v-html、插值表达式{{}}、v-bind、v-on的示例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>v-cloak、v-text、v-html、插值表达式{{}}、v-bind、v-on的学习</title> 针对 v-cloak 指令 的样式 [v-cloak]{ display: none; } </head> <body> <div id="app"> <!-- 1. 如何定义一个基本的Vue代码结构 --> <!-- 2. 插值表达式 和 v-text --> <!-- 3. v-cloak --> <!-- 4. v-html --> <!-- 5. v-bind Vue提供的属性绑定机制 缩写是 : --> <!-- 6. v-on Vue提供的事件绑定机制 缩写是 @ --> <!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题 --> <p v-cloak>++++++++ {{ msg }} ----------</p> <h4 v-text="msg">==================</h4> <!-- 默认 v-text 是没有闪烁问题的 --> <!-- v-text会覆盖元素中原本的内容,但是 插值表达式 只会替换自己的这个占位符,不会把 整个元素的内容清空 --> <div>{{msg_h1}}</div> <div v-text="msg_h1"></div> <div v-html="msg_h1">1212112</div> <!-- v-bind: 是 Vue中,提供的用于绑定属性的指令 --> <input type="button" value="按钮1" v-bind:title="mytitle + '123'"> <!-- 注意: v-bind: 指令可以被简写为 :要绑定的属性 --> <!-- v-bind 中,可以写合法的JS表达式 --> <!-- Vue 中提供了 v-on: 事件绑定机制 --> <input type="button" value="按钮2" :title="mytitle + '123'" v-on:click="alert('hello')"> <input type="button" value="按钮3" @click="show"> </div> <script src="https://www.whmblog.cn/static/js/lib/vue-2.4.0.js"></script> <script> var vm = new Vue({ el: '#app', data: { msg: '123', msg_h1: '<h1>哈哈,我是一个大大的H1, 我大,我骄傲</h1>', mytitle: '这是一个自己定义的title' }, methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法 alert: function (alert_msg) { alert(alert_msg) }, show: function () { alert('Hello') } } }) </script> </body> </html>