vue的指令绑定、事件、冒泡
a标签的属性绑定:
v-once:就是第一次渲染什么就是什么,不会随着其他改变而改变,简言之就是绑定他不让他的值改变
防止跨站脚本攻击
如果你觉得安全的话,可以不要让变量的值显示成字符串
解决方法是:v-html='变量'
小结总结:v-once v-bind v-html
事件对象的使用方法:
直接在定义方法时候传参也可以,vue里传参默认就是传到第一个参数里面去,如果想要传第二个参数,
vue方法中想同时传两个参数
阻止冒泡:e.stopPropagation()这是传统的方法,但是vue给我们提供了一种新的方法,v-on:mousemove.stop=' '就可以直接防止冒泡了,这个叫做事件修饰符
就是更改孩子的时候不会触发到爸爸
阻止默认:vue里面的一个取消默认的事件,比如,点击之后会进入百度的页面的,但是加了v-on:click.prevent=" "之后就不跳转了
既阻止冒泡有阻止默认:v-on:mousemove.stop.prevent=" "就可以了
e.which是判断敲的是哪个键盘
绑定回车
获取当前输入的值,输入什么,下面的内容页跟着改变,注意:v-bind只是数据的单向绑定;v-on:input="change"是监听输入事件
v-model:数据的双向绑定,这是vue提供的数据双向绑定;他可以代替了v-bind:value="value" v-on:input="change"
函数methods和计算属性computed的区别:就是计算属性会区分开具体的事件,用来监听相应的数据的,当数据发生变化的时候就会执行相应的操作,而methods函数是当一个dom的数据发生改变的时候就会重新的去渲染一次,不会分析当前的count数据有没有关系
computed计算属性:vue里面提供的:第一种监听数据属性
与methods函数的区别:就是就是在dom传变量的时候是跟data里面的属性变量传值是一样的写法,他会分析里面的代码,用来监听一个场景
第二种监听属性:watch,可以在里面去写一个异步操作
watch属性,也是在vue实例里面的,是用来监听data里面的哪个属性值发生的改变,就会执行相应的函数:
第二个小结:v-on:click可以简写成@click; 同样v-bind:title也可以简写成:title
Vue基础语法-动态添加样式
动态的去改变HTML的属性以及css的样式,
可以在vue的实例中computed属性里面来动态的操作HTML和css的属性
动态的改变样式
也可以在计算属性computed去动态的改变:
也可以在绑定的时候以数组的形式多传几个参数。如下:
vue的指令绑定、事件、冒泡的更多相关文章
- vue中<select>绑定事件
<div id="app"> <select v-model="selectItem" @change="selectFn($eve ...
- vue中组件绑定事件时是否加.native
组件绑定事件时 1. 普通组件绑定事件不能添加.native, 添加后事件失效 2. 自定义组件绑定事件需要添加.native, 否则事件无效 <template> <!-- < ...
- vue中指令绑定的v-if逻辑结构
<!-- if判断 --> <div id="app2"> <p v-if="seen"> <!-- 给p标签绑定指令 ...
- vue获取v-on绑定事件的触发对象
<span @click="fn" id="foo">xxx</span> fn(e){ console.log(e);//展开查看e. ...
- vue中click阻止事件冒泡,防止触发另一个事件
在使用el-upload组件时,在其中放置了一个删除按钮的图片. 当点击图片,本想只删除上传的视频,但是意外触发了el-upload中的事件 解决办法:用stop,结果只删除当前预览,不触发上传事件. ...
- vue学习笔记(一)关于事件冒泡和键盘事件 以及与Angular的区别
一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...
- vue 的事件冒泡
一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...
- vue指令与事件修饰符
一.条件渲染指令 vue中提供了两个指令可以用于判断是否要显示元素,分别是v-if和v-show. 实例: <!DOCTYPE html> <html lang="en&q ...
- vue样式操作与事件绑定
Vue笔记 1 Vue实例 (VM) var vm = new Vue({ el:'#app', //挂载元素 //数据 data: { title:'值', ...
随机推荐
- Linux系统从零到高手的进阶心得
初次了解到Linux系统还是在我初中的时候,那时候正是在一个中二年龄,喜欢看小说,对于小说中出现的明显的非现实场景感到十分钦佩.羡慕,并常常幻想自己也有小说主人公那样的本领.那正是在这样一个充满幻想的 ...
- net资源1
.net core 例子 https://github.com/aspnet/Docs/tree/master/aspnetcore/fundamentals C#中使用Spire.docx操作Wor ...
- [转载]mysqlcreate新建用户host使用%,本地无法连接原因及解决方法
转载自 http://www.2cto.com/database/201307/225781.html mysql,因为root权限过高,所以新建一用户appadmin,权限仅为要用到的数据库.创建语 ...
- Saiku缓存处理(七)
Saiku缓存处理方案 Saiku默认是从缓存中读取数据的(如果缓存中有数据的话),所以用户看到的数据不一定是最新的,如果需要看到最新的的数据需要手动刷新数据或者更改配置信息. Saiku获取实时数据 ...
- iconfont.cn批量加入
iconfont.cn还没有一个批量加入的功能 以下是最新的图标批量加入购物车功能代码. var icons = document.querySelectorAll('.icon-gouwuche1' ...
- 《Python》常用模块之collections模块
内置的数据类型: int float complex str list tuple dict set 基础数据类型: int float complex str list tuple ...
- 自动化测试工具Telerik Test Studio发布R1 2019|附下载
Telerik Test Studio是一个用于功能性Web.桌面和移动测试的直观测试自动化工具,它能轻松地实现自动化测试.同时会为GUI.性能.加载和API测试提供完整的自动化测试解决方案. [Te ...
- Oracle触发器报错
Oracle编写触发器时,执行时候报错,错误提示信息如上图所示,类似这种一般都是触发器语句有语法错误.重新审核语句,并再次执行. 如果用的是pl/sql developer的话,可以查看当前用户下的对 ...
- 【Python】进程-控制块
一.进程控制块 PCB (Process Control Block): 存放进程的管理和控制信息的数据结构称为进程控制块.它是进程管理和控制的最重要的数据结构,每一个进程均有一个PCB,在创建进程时 ...
- 网络协议理论,http协议,数据结构,常用返回码
一.网络协议理论 先是DNS协议 将域名转化成IP地址 这个你要知道 域名只是人记着方便 计算机记的是IP 然后是TCPIP协议 数据在传输过程中可能要经过陆游器 涉及到的是ARP协议 将IP地址转换 ...