vue指令

v-on指令

https://cn.vuejs.org/v2/guide/events.html

作用：绑定事件
语法：v-on:click="say" or v-on:click="say('参数', $event)"
简写：@click="say"
说明：绑定的事件从methods中获取
案例：跑马灯

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

事件修饰符

.stop 阻止冒泡，调用 event.stopPropagation()
.prevent 阻止默认行为，调用 event.preventDefault()
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身（比如不是子元素）触发时，才会触发事件
.once 事件只触发一次

按键修饰符

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

v-for

列表渲染

作用：基于源数据多次渲染元素或模板块

<!-- 1 基础用法 -->
<div v-for="item in items">{{ item.text }}
</div><!-- item 为当前项，index 为索引 -->
<p v-for="(item, index) in list">{{item}} -- {{index}}</p>
<!-- item 为值，key 为键，index 为索引 -->
<p v-for="(item, key, index) in obj">{{item}} -- {{key}}</p>
<p v-for="item in 10">{{item}}</p>

代码演示：

<body><!-- v-for 作用：遍历数组或者对象，把值显示到页面上。语法：v-for="值 in 数组"v-for="(值, 下标） in 数组"v-for="值 in 对象"v-for="(值, 键） in 对象"--><div id="app"><ul><li v-for="item in list">{{item}}</li></ul><ul><li v-for="(item, index) in list">{{item}} ------{{index}}</li></ul><ul><li v-for="item in friends">姓名：{{item.name}}   年龄：{{item.age}}</li></ul><ul><li v-for="(item, key) in user">{{key}}--------{{item}}</li></ul></div><script src="vue.js"></script><script>const vm = new Vue({el: '#app',data: {list: ['张三', '李四', '王五'],friends:[{name: '隔壁老王', age: 68},{name: '楼下小黑', age: 30},{name: '楼上老李', age: 58},],user: {name: '张飞',age: 38}},})</script>
</body>

key属性

推荐：使用 v-for 的时候提供 key 属性，能够提升列表渲染的性能
说明：使用 key，VUE会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
vue key
vue key属性的说明

<div v-for="item in items" :key="item.id"><!-- 内容 -->
</div>

代码演示：

  <body><!-- v-for:注意：1、一定要绑定key属性2、key属性要值唯一3、保证key属性值不变--><div id="app"><button @click="fn">修改</button><ul><!-- 不可以用数组下标绑定到keyitem.id 数据库的主键（唯一且不变）--><li v-for="(item, index) in list" :key="item">{{item}}</li></ul></div><script src="vue.js"></script><script>const vm = new Vue({el: '#app',data: {msg: 'hahhahaha',list: ['刘德华', '张学友', '郭富城', '黎明']},methods: {fn() {// this.msg = 'hahhahaha' + Math.random()// this.list.push('谭咏麟')this.list.unshift('谭咏麟')},},})</script></body>

v-if 和 v-show

条件渲染
v-if：根据表达式的值的真假条件，销毁或重建元素
v-show：根据表达式之真假值，切换元素的 display CSS 属性

<p v-show="isShow">这个元素展示出来了吗？？？</p>
<p v-if="isShow">这个元素，在HTML结构中吗？？？</p>

代码演示：

<body><!-- v-if 作用：控制元素在页面上的显示和隐藏。v-if="true"v-show作用：控制元素在页面上的显示和隐藏。v-show="true"区别：v-if ：通过创建和删除dom元素的方式 实现显示和隐藏v-show ： 通过操作样式 来实现 显示和隐藏应用场景：1、频繁进行显示和隐藏切换的时候 使用v-show2、明确知道第一次渲染 的时候 是显示或者隐藏的时候用v-if--><div id="app"><h1>vue的例子</h1><p v-if="isshow">v-if</p><p v-show="isshow">v-show</p></div><script src="vue.js"></script><script>const vm = new Vue({el: '#app',data: {isshow: true}})</script>
</body>

v-else与v-else-if指令

v-else和v-else-if指令用于指定其他的条件，需要配合v-if使用。

<p v-if="isShow">登录</p>
<p v-else>注册</p><p v-if="isShow">登录</p>
<p v-else-if="条件"></p>
<p v-else>注册</p>

注意：

1. v-else必须紧跟在v-if或者v-else-if的后面

代码演示：

<body><!-- v-else指令1、一定要和v-if搭配出现2、v-else必须和v-if 紧邻v-else-if多条件判断--><div id="app"><h1>vue的例子</h1><div v-if="age >= 18">成年人可以看：惊悚片、恐怖片、悬疑片</div><div v-else-if="age >=16">小青年看点刺激的：海贼王、进击的巨人、柯南</div><div v-else>小孩子就去看动画片去吧：花园宝宝、小猪佩奇、汪汪队</div></div><script src="vue.js"></script><script>const vm = new Vue({el: '#app',data: {age: 30}})</script>
</body>

v-text指令

解释：更新元素的 textContent/innerText。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。

<h1 v-text="msg"></h1>

v-html指令

解释：更新DOM对象的innerHTML,html标签会生效

<h1 v-html="msg"></h1>

在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。

提升性能：v-pre

v-pre: 指令所在的标签内容不会被vue解析

说明：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

<span v-pre>{{ this will not be compiled }}</span>

提升性能：v-once

v-once：只解析一次

说明：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<span v-once>This will never change: {{msg}}</span>

v-cloak指令

不需要表达式
用法：

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
```
[v-cloak] {display: none;
}
```
```
<div v-cloak>{{ message }}
</div>
```

指令总结

经常使用：

v-bind
v-on
v-model
v-for
v-if

偶尔使用：

v-else
v-else-if
v-show
v-text
v-html

基本不用：

v-pre
v-once
v-cloak

样式处理-class和style

使用方式：v-bind:class="expression" or :class="expression"
表达式的类型：字符串、数组、对象（重点）
语法：

<!-- 1 -->
<!-- 重点 -->
<div v-bind:class="{ active: true }"></div> ===>
<div class="active"></div><!-- 2 -->
<div :class="['active', 'text-danger']"></div> ===>
<div class="active text-danger"></div><!-- 3 -->
<div v-bind:class="[{ active: true }, errorClass]"></div> ===>
<div class="active text-danger"></div>--- style ---
<!-- 1 -->
<div v-bind:style="{ color: activeColor, 'font-size': fontSize + 'px' }"></div>
<!-- 2 将多个 样式对象 应用到一个元素上-->
<!-- baseStyles 和 overridingStyles 都是对象 -->
<div v-bind:style="[baseStyles, overridingStyles]"></div>

案例：todomvc

todomvc 网站：

http://todomvc.com/

todomvc vue版本地址：

http://todomvc.com/examples/vue/

案例源代码已经上传至资源，文件压缩包名称叫：vue第2天-todomvc案例.zip

vue第2天知识点：v-if和v-show、v-else和v-else-if、v-text和v-html、v-pre和v-once、v-cloak、指令总结、案例-todomvc相关推荐

vue面试题，知识点汇总(有答案)
一. Vue核心小知识点 1.vue中 key 值的作用 key 的特殊属性主要用在 Vue的虚拟DOM算法,在新旧nodes对比时辨识VNodes.如果不使用key,Vue会使用一种最大限度减少动态 ...
Vue的50个知识点
Vue的50个知识点文章目录 Vue的50个知识点 1. Vue的优点?Vue的缺点? 2.为什么说Vue是一个渐进式框架? 3.Vue和Rect的异同点? 4.MVVM是什么?和MVC有什么区别呢 ...
Vue 2.x 常用知识点笔记（万字笔记）
Vue 2.x 笔记常用知识点笔记,有错误欢迎指点哦~ 字数超过了一万字,得细品目录 Vue 2.x 笔记 1.新建Vue实例 2.阻止生成生产提示 3.模板语法 3.1 插值语法 3.2 指令语 ...
vue一些比较重要知识点的复习
文章目录 Vue的MVVM模型知道什么是MVVM MVVM的关系 MVVM优点假如面试问到我说说看MVVM,我可能会这样子回答 Vue的绑定键盘鼠标操作和在组件使用上的要点 Vue的事件操作(v- ...
vue经验 - 细节小知识点汇总（更新中...）
1. $refs 数据这么绑定的: 然后在created中抛出来,猜猜看看打印的是两个什么? 结果如下: 第一个跑出来了,第二个,却undefiend,没有东西?!... 后来去官网查看$refs的解 ...
vue引入id3_vue常见知识点
一.vue的双向绑定原理(vue的原理.简单说一下双向数据绑定) vue是采用数据劫持结合发布者-订阅者模式的方式,通过object.defineProperty()来劫持各个属性的setter和ge ...
Vue移动端项目知识点
1.项目_创建 1.1创建项目 (建议使用cmd终端) vue create hmtt 1.2采用自定义方式去创建项目上下箭头切换, 回车确认, 空格选中 ? Please pick a prese ...
vue中细枝末节的知识点总结
JS 文件中访问vuex,操控vuex 由于在main.js文件中,vuex是挂载在window.vm上的所以vue项目中的js文件访问vuex的写法 window.vm.$store.state. ...
总结vue 需要掌握的知识点
使用的开发工具是webstorm,它是默认就安装好了vuejs插件,idea要使用的话,需要安装一下该插件一.快速搭建项目vue-cli 脚手架(Vue2.0) 1.Vue CLI使用前提 –Nod ...
【vue框架】vue2 知识点整理
脚手架文件结构 ├── node_modules ├── public │ ├── favicon.ico: 页签图标 │ └── index.html: 主页面 ├── src │ ├── asse ...

vue第2天知识点：v-if和v-show、v-else和v-else-if、v-text和v-html、v-pre和v-once、v-cloak、指令总结、案例-todomvc

vue指令

v-on指令

事件修饰符

按键修饰符

v-for

key属性

v-if 和 v-show

v-else与v-else-if指令

v-text指令

v-html指令

提升性能：v-pre

提升性能：v-once

v-cloak指令

指令总结

样式处理-class和style

案例：todomvc

vue第2天知识点：v-if和v-show、v-else和v-else-if、v-text和v-html、v-pre和v-once、v-cloak、指令总结、案例-todomvc相关推荐

最新文章

热门文章