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:'值', ...
随机推荐
- 逆袭之旅DAY20.XIA.程序调试
2018-07-16 20:25:50 F5:进入方法 F6:单步执行
- TNS
Oracle中TNS的完整定义:transparence Network Substrate透明网络底层,监听服务是它重要的一部分,不是全部,不要把TNS当作只是监听器 ORACLE当中,如果想访问某 ...
- 原生js(form)验证,可以借鉴下思路,应用到工作中
我在工作中时常使用form验证,在目前的公司做的表单验证用的angular的form组件,对于一个有追求的前端,或者应用在移动端写个form验证,引入angular或者jquery组件等验证,难免显得 ...
- swiftlint 你所要知道的所有!!
swiftin Should the opening brace of a function or control flow statement be on a new line or not ?:) ...
- SpringMVC防止表单重复提交
最近公司上线,有同志进行攻击,表当防重复提交也没有弄,交给我 ,本人以前也没弄过,知道大概的思路,但是那样实在是太麻烦了,虽然后面试过使用过滤器加拦截器实现,不过还是有点小麻烦. 后来在网上搜索后发现 ...
- 创建自己的docker基础镜像
1.下载镜像 centos7 docker pull centos: 2.创建容器加载镜像 docker run -i -t --name centos7 centos: docker run 参数详 ...
- 集成学习-xgboost
等同于xgboost是个准曲率很高的集成学习框架,在很多比赛中成绩优异. 大多数的集成学习都使用决策树作为基分类器,主要是因为本身要训练多个分类器,而决策树速度很快,总体时间相对较少. 决策树 在讲x ...
- rgba 和 opacity 的对比.
rgba 中 的 a 指的是透明度: 1. rgba 的 设置的 透明度 不会被子级 元素继承; opacity 设置的透明度会被子级元素继承 . 因此 ,有时候 使用 rgba 会比 opa ...
- php优秀框架codeigniter学习系列——异常和错误处理机制
这篇介绍下CI框架的异常和错误处理机制. 在入口文件index.php中,根据设置的环境参数设置error_reporting的范围,和是否显示错误. 在CI初始化程序CodeIgniter.php中 ...
- ibatis集成封装之路(to mysql)
hello <tx:annotation-driven transaction-manager=" "/> 插入记录ID的坑 https://renjieguixion ...