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的安装包命令/yum 与 Rpm
1.Rpm安装包命令(以dhcp软件包为例)----Rpm安装软件包需要解决依赖性,因此特别麻烦(如图2被需要). rpm与yum安装的均为二进制软件包.类似于windows下载的软件包,可直接安装使 ...
- Leetcode 回溯法 典型例题
那些要求列举所有的情况,或者说所有的情况都要探讨一下的例题,一般都可以考虑回溯法. 当遇到一个可以用到回溯法的时候需要按照如下步骤进行: 1.确定问题一个可以用到回溯法的时候需要按照如下步骤进行: 1 ...
- compile openjdk7 in ubuntu OS
success: openjdk version "1.7.0-internal"OpenJDK Runtime Environment (build 1.7.0-internal ...
- 【转】c++ make_pair函数使用
[好记性不如烂笔头:在<C++ Templates>看到这个函数,发现正是前段时间写项目程序所要用到的,可惜当时还不知道有这个用法,当时是自己写了个结构体..]Utilities < ...
- Guns后台管理系统框架(毕业设计神器)
Guns后台管理系统, 基于Spring Boot + Maven构建 + MyBatis + MySql数据库 导入Eclipse即可使用 十分钟即可搞定,做毕业设计的好帮手啊 最终效果图 登陆页 ...
- Linux命令----uname查看系统信息
uname就是UNIXname的缩写 1.uname可以查询操作系统信息 [root@yuan ~]# uname Linux 2.uname -n显示系统的主机名 [root@yuan ~]# un ...
- 以黄门镇黄湾村某一扶贫文档为例——将Excel数据填入到已存在的Word模板
傻瓜可以写出机器读得懂代码,但写出让人能读懂的代码的是优秀程序员 作用:通过Excel文件中的一列数据作为文件名创建Word文档,并将Excel中的一行数据填一表,实现自动化 Excel的VBA宏代码 ...
- js 将文本转换为数据 string number
<span class="Span" > <p>123.81</p> <a> dejiw</a> </span&g ...
- JSP组件Telerik UI for JSP发布R1 2019 SP1|附下载
Telerik UI for JSP拥有由Kendo UI for jQuery支持的40+ JSP组件,同时通过Kendo UI for jQuery的支持能使用JSP封装包构建现代的HTML5和J ...
- IONIC和Cordova安装、打包踩过的坑
1.问题1:直接执行npm install -g cordova ionic,因为网络原因,执行不成功 解决方案:将npm映射到淘宝服务器:npm install -g cnpm --registry ...