Vue系统指令（一）

插值表达式 {{}}
v-cloak
v-text
v-html
v-bind：属性绑定机制
v-on：事件绑定机制
- `v-on:click`：点击事件
- `v-on`的简写形式
v-on的事件修饰符
- v-on的常见事件修饰符
简单了解Node中的MVC与前端中的MVVM之间的区别

插值表达式 {{}}

数据绑定最常见的形式就是使用“Mustache”语法（双大括号）的文本插值。
{{}}中每个绑定都只能包含单个表达式.

<span>Message: {{ msg }}</span>

v-cloak

v-cloak：保持和元素实例的关联，直到结束编译后自动消失。
使用 v-cloak 能解决插值表达式闪烁的问题

<style>[v-cloak] {display: none;}</style>
<p v-cloak>+++++++++{{msg}}-----------</p>

v-text

v-text可以将一个变量的值渲染到指定的元素中
默认 v-text 是没有闪烁问题的,因为它是放在属性里的
差值表达式只会替换自己的这个占位符，并不会把整个元素的内容清空。v-text会覆盖元素中原本的内容。

v-html

v-text v-html 会覆盖元素中原本的内容,但是插值表达式只会替换直接的这个占位符,不会把整个元素的内容清空

v-bind：属性绑定机制

v-bind：是Vue中提供的用于绑定属性的指令
注意： v-bind：指令可以被简写为 ：要绑定的属性； v-bind中可以写合法的JS表达式
V-bind 只能实现数据的单向绑定，从M自动绑定到V，无法实现数据的双向绑定

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./lib/vue.js"></script><style>[v-cloak] {display: none;}</style>
</head>
<body><div id="app"><!-- 使用 v-cloak 能解决插值表达式闪烁的问题 --><p v-cloak>+++++++++{{msg}}-----------</p><h4 v-text='msg'>=========</h4><!-- 默认 v-text 是没有闪烁问题的 --><!-- v-text v-html 会覆盖元素中原本的内容,但是 插值表达式 只会替换直接的这个占位符,不会把整个元素的内容清空 --><br><div>{{msg2}}</div><div v-text='msg2'></div><div v-html='msg2'>123123123</div><!-- v-bind： 是Vue中提供的用于绑定属性的指令 --><input type="button" value="按钮"  v-bind:title="mytitle"><!-- 注意： v-bind：指令可以被简写为  ：要绑定的属性；  v-bind中可以写合法的JS表达式 --><input type="button" value="简写" :title='mytitle'><br><br><input type="button" value="按钮" :title='mytitle' v-on:click="show"><input type="button" value="缩写" :title='mytitle' @click="show"></div><script>var vm = new Vue({el: '#app',data: {msg: '123',msg2: '<h1>让晚风轻轻吹送了落霞</h1>',mytitle: '玉树临风美少年，揽镜自顾夜不眠'},methods: {  //这个methods属性中定义了当前Vue实例所有可用的方法show: function() {alert("yiu yun di ta ~")}}})</script>
</body>
</html>

v-on：事件绑定机制

`v-on:click`：点击事件


<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><!--vue的版本：2.5.15--><script src="vue.js"></script></head><body><!--这个div区域就是MVVM中的 View--><div id="div1"><!-- 给button节点绑定按钮的点击事件 -->{{name}}<button v-on:click="change">改变name的值</button></div></body><script>//new出来的对象就是MVVM中的 View Modulevar myVue = new Vue({el: '#div1', //当前vue对象将接管上面的div区域data: { //data就是MVVM中的 modulename: 'smyhvae'},//注意，下方这个 `methods` 是Vue中定义方法的关键字，不能改//这个 methods 属性中定义了当前Vue实例所有可用的方法methods: {change: function() { //上面的button按钮的点击事件this.name += '1';}}});</script></html>

`v-on`的简写形式

<input type="button" value="按钮" :title='mytitle' v-on:click="show">
<input type="button" value="缩写" :title='mytitle' @click="show">

v-on的事件修饰符

v-on的常见事件修饰符

v-on提供了很多事件修饰符来辅助实现一些功能。

.stop阻止冒泡。本质是调用event.stopPropagation()
.prevent阻止默认事件（默认行为）。本质是调用event.preventDefault()
.capture添加事件监听器时，使用捕获的方式（也就是说，事件采用捕获的方式，而不是采用冒泡的方式）
.self只有当事件在该元素本身触发时（比如不是子元素），才会触发回调
.once事件只触发一次
.{keyCode | keyAlias}只当事件是从侦听器绑定的元素本身触发时，才触发回调
.native监听组件根元素的原生事件

一个事件，允许同时使用多个事件修饰符。

.self只会阻止自己身上冒泡事件的发生，并不会阻止真正的冒泡行为 .self不能代替.stop

M是放数据的，V是展示数据的，bind从M中拿出来当然放不回去，model可以实时存取

          <!-- click事件 --><button v-on:click="doThis"></button><!-- 缩写 --><button @click="doThis"></button><!-- 内联语句 --><button v-on:click="doThat('hello', $event)"></button><!-- 阻止冒泡 --><button @click.stop="doThis"></button><!-- 阻止默认行为 --><button @click.prevent="doThis"></button><!-- 阻止默认行为，没有表达式 --><form @submit.prevent></form><!--  串联修饰符 --><button @click.stop.prevent="doThis"></button>

简单了解Node中的MVC与前端中的MVVM之间的区别

MVC是后端的分层开发概念；
- M：model层，处理数据crud
- V：view 视图层，可以理解为前端页面
- C：controller 业务逻辑层
MVVM是前端视图层的概念，主要关注与 视图层分离，也就是说：MVVM把前端的视图层，分为了三部分 Model, View, VM ViewModel

Vue系统指令（一）相关推荐

Vue-基本语法和系统指令
Vue最简单小例子演示使用步骤: 1.导入Vue文件: 2.创建Vue实例对象,设置属性(el.data等等): 3.使用模板语法把数据渲染到页面 <body><div id=&qu ...
第三章系统指令与汇编程序设计 3.1 单片机指令系统
第三章系统指令与汇编程序设计 3.1 单片机指令系统 3.1.1 寻址空间及常用符号 3.1.2 寻址方式 3.1.3 数据传送与交换指令 3.1.4 算术运算指令 3.1.5 逻辑操作指令 3.1 ...
手机linux系统指令大全,Linux系统指令大全
送给初学的穷人:Linux系统指令大全 cat 使用权限:所有使用者使用方式:cat [-AbeEnstTuv] [--help] [--version] fileName 说明:把档案串连接后传到 ...
vue自定义指令封装节流_Vue自定义指令封装节流函数的方法示例
节流函数是web前端开发中经常用到的一个开发技巧,在input实时搜索,滚动事件等,为了避免过多消耗性能,我们都会使用节流函数.在<JavaScript高级程序设计>一书中有这样的一个例子 ...
vuejs 指令封装 button 加载效果_这些Vue自定义指令，让你的项目开发爽到爆
受 AngularJS 的启发,Vue 内置了一些非常有用的指令(比如v-html 和 v-once等),每个指令都有自身的用途.完整的指令列表可以在这里查看. 这还没完,更棒的是可以开发自定义指令. ...
Vue 自定义指令上报 Google Analytics 事件统计
发现问题一般前端开发离不开数据统计,我们经常需要接入统计服务以方便运营,例如现在需要统计一个按钮 <template><button @click="handleClic ...
（9）vue.js 指令（1）
一.vue.js指令介绍指令的本质就是 HTML 自定义属性,Vue.js 的指令就是以 v- 开头的自定义属性.我们HTML元素非为固有属性和自定义属性,固有属性就是自己元素本身就有的,比如id, ...
vue 自定义指令（directive）实例
一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href v-bind:class v-bind:title v-bind:bb 2.v-on:用于监听DOM事件: 例 ...
pyqt5 treeview鼠标右键菜单事件_【动手实践】使用 Vue 自定义指令实现右键菜单...
本文来自于神奇的程序员前言浏览器里右键时会有一个默认的菜单,在我的开源项目中正好有自定义右键菜单的需求,在npm库找了下与之相关的包,发现都是以组件形式实现的,感觉那种做法太过繁琐. 于是,我就 ...

Vue系统指令（一）

Vue系统指令（一）

插值表达式 {{}}

v-cloak

v-text

v-html

v-bind：属性绑定机制

v-on：事件绑定机制

`v-on:click`：点击事件

`v-on`的简写形式

v-on的事件修饰符

v-on的常见事件修饰符

简单了解Node中的MVC与前端中的MVVM之间的区别

Vue系统指令（一）相关推荐

最新文章

热门文章

Vue系统指令（一）

Vue系统指令（一）

插值表达式 {{}}

v-cloak

v-text

v-html

v-bind：属性绑定机制

v-on：事件绑定机制

v-on:click：点击事件

v-on的简写形式

v-on的事件修饰符

v-on的常见事件修饰符

简单了解Node中的MVC与前端中的MVVM之间的区别

Vue系统指令（一）相关推荐

最新文章

热门文章

`v-on:click`：点击事件

`v-on`的简写形式