Vue(三)指令
v-text:更新元素的text内容
- <template>
- <div class="about">
- <p v-text="msg"></p>
- <!--和下面效果一样-->
- <p>{{msg}}</p>
- </div>
- </template>
- <script>
- export default {
- components: {MyList},
- data: ()=> ({
- msg: '更新元素的 textContent。如果要更新部分的 textContent ,需要使用 {{ Mustache }} 插值。'
- })
- }
- </script>
页面:
v-html:更新元素的innerHTML,这里面的内容不会作为Vue模板编译
- <template>
- <div class="about">
- <!--v-html 内容不会被处理-->
- <p v-html="msg"></p>
- <!--v-text 内容会被作为vue模板编译-->
- <p v-text="msg"></p>
- </div>
- </template>
- <script>
- export default {
- data: ()=> ({
- msg: '<h1>在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击。</h1>' +
- '<h1>只在可信内容上使用 v-html,永不用在用户提交的内容上。</h1>'
- })
- }
- </script>
页面:
v-show:根据表达式之真假值,切换元素的 display
CSS 属性
- <template>
- <div class="about">
- <p v-show="flag" v-text="msg"></p>
- </div>
- </template>
- <script>
- export default {
- data: ()=> ({
- flag: true,
- msg: '根据表达式之真假值,切换元素的 display CSS 属性'
- })
- }
- </script>
页面:
v-if:根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
- <template>
- <div class="about">
- <p v-if="flag" v-text="msg"></p>
- </div>
- </template>
- <script>
- export default {
- data: ()=> ({
- flag: true,
- msg: '根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。'
- })
- }
- </script>
页面:
如果flag=false,那么元素不会被渲染
v-else:前一兄弟元素必须有 v-if 或 v-else-if
- <template>
- <div class="about">
- <p v-if="flag" v-text="msg"></p>
- <p v-else>我是穷逼</p>
- </div>
- </template>
- <script>
- export default {
- data: ()=> ({
- flag: false,
- msg: '我很有钱'
- })
- }
- </script>
页面:
v-else-if:前一兄弟元素必须有 v-if 或 v-else-if
- <template>
- <div class="about">
- <p v-if="flag == 1">{{msg}}</p>
- <p v-else-if="flag == 2">我假装我很有钱</p>
- <p v-else>我是穷逼</p>
- </div>
- </template>
- <script>
- export default {
- data: ()=> ({
- flag: 2,
- msg: '我很有钱'
- })
- }
- </script>
页面:
v-for
- <template>
- <div class="about">
- <div v-for="(item,index) in items">
- {{index}} -- {{ item }}
- </div>
- </div>
- </template>
- <script>
- export default {
- data: ()=> ({
- items: ['鱼香肉丝','宫保鸡丁','炖排骨']
- })
- }
- </script>
页面:
v-on:事件处理
缩写:@
修饰符:
- .stop - 阻止事件冒泡
- .prevent - 阻止默认事件
- .capture
- .self
- .once - 只触发一次回调。
- .passive
- .native - 监听组件根元素的原生事件。
- 按键修饰符
- .enter
- .tab
- .delete (捕获“删除”和“退格”键)
- .esc
- .space
- .up
- .down
- .left
- .right
- 系统修饰键
- .ctrl
- .alt
- .shift
- .meta - 在 Mac 系统键盘上,meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)
- 鼠标按钮修饰符
- .left
- .right
- .middle
代码
- <template>
- <div class="about" @click="parentClick">
- <button @click="aClick">普通点击事件</button>
- <br><br>
- <button @click.stop="bClick">阻止冒泡事件</button>
- <br><br>
- <a href="https://www.qq.com/" @click.stop.prevent="cClick">阻止默认事件</a>
- <br><br>
- <button @click.once="dClick">执行一次事件</button>
- <br><br>
- <input @keyup.enter="eClick" placeholder="有本事按Enter"/>
- <br><br>
- <input @click.stop.ctrl="fClick" placeholder="有本事按Ctrl+Click"/>
- <br><br>
- <input @keydown.ctrl.alt="gClick" placeholder="有本事按Ctrl+Alt"/>
- <br><br>
- <button @click.stop.left="hClick">鼠标左键事件</button>
- </div>
- </template>
- <script>
- export default {
- methods: {
- parentClick: function () {
- alert('父元素点击事件')
- },
- aClick: function () {
- alert('普通点击事件')
- },
- bClick: function () {
- alert('点击之后,不再继续冒泡到父元素')
- },
- cClick: function () {
- alert('点击之后,不再触发默认跳转事件')
- },
- dClick: function () {
- alert('只能点击一次,你再也不能看见我')
- },
- eClick: function () {
- alert('监听回车事件')
- },
- fClick: function () {
- alert('监听Ctrl+Click事件')
- },
- gClick: function () {
- alert('监听Ctrl+Alt事件')
- },
- hClick: function () {
- alert('监听鼠标左键事件')
- },
- }
- }
- </script>
页面:
v-bind:动态绑定
缩写: :
- <template>
- <div class="about">
- <!--绑定src属性-->
- <img :src="imgSrc"/>
- <!--绑定class:数组方式-->
- <div :class="[myClass]"></div>
- <!--绑定class:class 存在与否将取决于数据属性 active-->
- <div :class="[myClass,{'area-active': active}]"></div>
- <div style="text-align: center">
- <!--:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用单引号括起来) 来命名-->
- <span :style="{display: 'inline-block',width: width1 + 'px',height: width1 + 'px',backgroundColor: color1}"></span>
- <span :style="{display: 'inline-block',width: width2 + 'px',height: width2 + 'px',backgroundColor: color2}"></span>
- <!--:style 的数组语法-->
- <span :style="[styleObject]"></span>
- </div>
- </div>
- </template>
- <script>
- export default {
- data: ()=> ({
- styleObject: {
- display: 'inline-block',
- width: '150px',
- height: '150px',
- 'background-color': '#2990c4'
- },
- width1: 50,
- color1: '#12BC99',
- width2: 100,
- color2: '#9455bc',
- active: true,
- myClass: 'area',
- imgSrc: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=935292084,2640874667&fm=27&gp=0.jpg'
- })
- }
- </script>
- <style scoped>
- .area{
- margin: 8px auto;
- width: 50px;
- height: 50px;
- background-color: darkcyan;
- }
- .area-active{
- background-color: crimson;
- }
- </style>
页面:
v-model:表单绑定
- 限制:
- <input>
- <select>
- <textarea>
- components
- 修饰符:
- .lazy - 取代 input 监听 change 事件
- .number - 输入字符串转为有效的数字
- .trim - 输入首尾空格过滤
- <template>
- <div class="about">
- <div>Message is: {{msg}}</div>
- <br/>
- <input v-model="msg"/>
- <br/><br/>
- <!--textarea绑定-->
- <textarea v-model="msg" cols="80" rows="5"></textarea>
- <br/><br/>
- <!--复选-->
- <input type="checkbox" v-model="checked">
- <label for="checkbox">{{ checked }}</label>
- <br/><br/>
- <!--复选数组-->
- <div>
- <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
- <label for="jack">Jack</label>
- <input type="checkbox" id="john" value="John" v-model="checkedNames">
- <label for="john">John</label>
- <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
- <label for="mike">Mike</label>
- <br>
- <span>Checked names: {{ checkedNames }}</span>
- </div>
- <br/><br/>
- <!--单选数组-->
- <div>
- <input type="radio" id="one" value="One" v-model="picked">
- <label for="one">One</label>
- <br>
- <input type="radio" id="two" value="Two" v-model="picked">
- <label for="two">Two</label>
- <br>
- <span>Picked: {{ picked }}</span>
- </div>
- <br/><br/>
- <!--select的绑定-->
- <div>
- <select v-model="selected">
- <option v-for="option in options" v-bind:value="option.value">
- {{ option.text }}
- </option>
- </select>
- <span>Selected: {{ selected }}</span>
- </div>
- <br/><br/>
- <!--自动将用户的输入值转为数值类型-->
- <input type="number" v-model.number="age"/>
- <span>{{typeof age}}</span>
- <br/><br/>
- <!--自动过滤用户输入的首尾空白字符-->
- <input v-model.trim="msgs">
- <p>{{msgs}}</p>
- <!--取消实时同步-->
- <input v-model.lazy="lmsgs">
- <p>{{lmsgs}}</p>
- <br/><br/>
- </div>
- </template>
- <script>
- export default {
- data: ()=> ({
- age: 10,
- selected: '',
- options: [
- { text: 'One', value: 'A' },
- { text: 'Two', value: 'B' },
- { text: 'Three', value: 'C' }
- ],
- picked: [],
- checkedNames: [],
- checked: false,
- msg: '你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。',
- msgs: '',
- lmsgs: '',
- })
- }
- </script>
页面:
v-pre:跳过这个元素和它的子元素的编译过程。
- <template>
- <div class="about">
- <div v-pre>{{这里面的内容不会被编译}}</div>
- </div>
- </template>
- <script>
- export default {
- data: ()=> ({
- })
- }
- </script>
页面:
v-once:只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
- <template>
- <div class="about">
- <div v-once>{{msg}}</div>
- <input v-model="msg"/>
- </div>
- </template>
- <script>
- export default {
- data: ()=> ({
- msg: '这里只编译一次'
- })
- }
- </script>
页面
之后再改变数据模型,v-once部分不会再改变
Vue(三)指令的更多相关文章
- vue自定义指令,比onerror更优雅的方式实现当图片加载失败时使用默认图,提供三种方法
首先,来看下效果图(演示一下图片正常加载与加载失败时的效果) 在线体验地址:https://hxkj.vip/demo/vueImgOnerror/ 一.常规方法解决 我们都知道,img标签支持one ...
- vue的指令
我之前学了学angular 发现angular和vue的指令有点类似 先说一下 new Vue({ el: "#box", // element(元素) 当前作 ...
- vue之指令
一.什么是VUE? 它是构建用户界面的JavaScript框架(让它自动生成js,css,html等) 二.怎么使用VUE? 1.引入vue.js 2.展示HTML <div id=" ...
- vue之指令篇 ps简单的对比angular
这两天在开始vue的大型项目,发现和ng还是有许多不同,这里对比下两者的指令系统 难度系数:ng的指令难度大于vue:至少vue上暂时没发现@&=:require,compile,precom ...
- 第3章-Vue.js 指令扩展 和 todoList练习
一.学习目标 了解Vue.js指令的实现原理 理解v-model指令的高级用法 能够使用Vue.js 指令完成 todoList 练习(重点+难点) 二.todoList练习效果展示 2.1.效果图展 ...
- 第2章-Vue.js指令
一.学习目标 了解 什么 是 Vue.js 指令 理解 Vue.js 指令的 用途 掌握 Vue.js 指令的书写规范 能够 使用 Vue.js 指令完成部门页面交互效果(难点和重点) 二.指令的基本 ...
- Vue的指令以及组件化开发
一. 自定义指令 如何: 1. 创建指令 Vue.directive("指令名",{ inserted(elem){//指令所在的元素被加载到DOM树上后自动执行指令 //elem ...
- 使用Vue自定义指令实现Select组件
完成的效果图如下: 一.首先,我们简单布局一下: <template> <div class="select"> <div class="i ...
- Vue的指令和成员
目录 Vue的指令和成员 指令 表单 斗篷 条件 循环 成员 计算成员 监听成员 Vue的指令和成员 指令 表单 表单指令一般是和属性指令联合使用的,最常见的就是v-model="变量&qu ...
- Vue自定义指令 数据传递
在项目开发过程中,难免会遇到各种功能需要使用Vue自定义指令--directive 去实现 .关于directive的使用方式这里就不做过多的介绍了,Vue官方文档中说的还是听明白的.今天讲讲在使用V ...
随机推荐
- python 练习 后台返回当前时间
新建一个 current_time.html 文件, !cur_time! 用来替换 <!DOCTYPE html> <html lang="en"> &l ...
- Odoo 10的Linux安装
CentOS7安装Odoo10流程如下一.更新系统#yum clean all#yum update 二.安装 PostgreSQL 1.安装数据库#yum install postgresql po ...
- Webpack 4教程 - 第六部分 增强开发时体验
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://wanago.io/2018/08/06/webpack-4-course-part ...
- pyltp安装踩坑记录
LTP(Language Technology Platform)由哈工大社会计算与信息检索研究中心开发,提供包括中文分词.词性标注.命名实体识别.依存句法分析.语义角色标注等丰富. 高效.精准的自然 ...
- 安卓9.0系统机器(亲测有效)激活Xposed框架的步骤
对于喜欢玩手机的哥们来说,经常会用到xposed框架及其种类繁多功能无敌的模块,对于5.0以下的系统版本,只要手机能获得root权限,安装和激活xposed框架是非常简便的,但随着系统版本的持续更新, ...
- 荣耀5.0以上手机(亲测有效)激活xposed框架的经验
对于喜欢搞机的朋友而言,大多时候会使用到xposed框架及其种类繁多功能强悍的模块,对于5.0以下的系统版本,只要手机能获得Root权限,安装和激活xposed框架是非常简便的,但随着系统版本的不断迭 ...
- Ionic3关闭弹出页面,跳转到列表后刷新父页面
记得上次写过一篇如何弹出页面的文章,好像是2月28号ionic3 Modal组件那一篇,这篇也算那一篇的续集吧!这篇是弹出的页面关闭后刷新父页面的干活!上代码! 弹出页面:(关闭的时候可以传入值,再父 ...
- java 易错选择题 编辑中
1 System.out.println(int(a+b)); 编译错误 应该是(int)(a+b) 2 String s="john"+3; 是正确的,结果就是 john3 3 ...
- 【Python实战】模块和包导入详解(import)
1.模块(module) 1.1 模块定义 通常模块为一个.py文件,其他可作为module的文件类型还有".pyo".".pyc".".pyd&qu ...
- sprintboot 中占位符及多环境配置
(原) 关于springboot中多环境配置问题 1.在application.properties文件中通过 spring.profiles.active=... 选择系统所要加载的配置文件,这里的 ...