a标签的属性绑定:

v-once:就是第一次渲染什么就是什么,不会随着其他改变而改变,简言之就是绑定他不让他的值改变

防止跨站脚本攻击

如果你觉得安全的话,可以不要让变量的值显示成字符串

解决方法是:v-html='变量'

小结总结:v-once    v-bind    v-html

5
Vue基础语法-数据双向绑定

事件对象的使用方法:

直接在定义方法时候传参也可以,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的指令绑定、事件、冒泡的更多相关文章

  1. vue中<select>绑定事件

    <div id="app"> <select v-model="selectItem" @change="selectFn($eve ...

  2. vue中组件绑定事件时是否加.native

    组件绑定事件时 1. 普通组件绑定事件不能添加.native, 添加后事件失效 2. 自定义组件绑定事件需要添加.native, 否则事件无效 <template> <!-- < ...

  3. vue中指令绑定的v-if逻辑结构

    <!-- if判断 --> <div id="app2"> <p v-if="seen"> <!-- 给p标签绑定指令 ...

  4. vue获取v-on绑定事件的触发对象

    <span @click="fn" id="foo">xxx</span> fn(e){ console.log(e);//展开查看e. ...

  5. vue中click阻止事件冒泡,防止触发另一个事件

    在使用el-upload组件时,在其中放置了一个删除按钮的图片. 当点击图片,本想只删除上传的视频,但是意外触发了el-upload中的事件 解决办法:用stop,结果只删除当前预览,不触发上传事件. ...

  6. vue学习笔记(一)关于事件冒泡和键盘事件 以及与Angular的区别

    一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...

  7. vue 的事件冒泡

    一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...

  8. vue指令与事件修饰符

    一.条件渲染指令 vue中提供了两个指令可以用于判断是否要显示元素,分别是v-if和v-show. 实例: <!DOCTYPE html> <html lang="en&q ...

  9. vue样式操作与事件绑定

    Vue笔记 1 Vue实例 (VM) var vm = new Vue({    el:'#app', //挂载元素        //数据    data: {        title:'值', ...

随机推荐

  1. git开发过程的配置和使用

    git开发过程的使用 1.创建仓库 2.新建项目,填写项目名称等信息 3.初始化仓库,创建git仓库 git init 4.配置个人信息(配置过可忽略) git config --global use ...

  2. 普通程序员,三年成为年薪70w架构师,只因做到了这些

    每个程序员.或者说每个工作者都应该有自己的职业规划,如果你不是富二代,不是官二代,也没有职业规划,希望你可以思考一下自己的将来.今天给大家分享的是一篇来自阿里Java架构师对普通程序员的职业建议,希望 ...

  3. JQuery button控制div或者section

    一.项目你需求 点击左边导航栏的某个按钮,右边内容栏显示出,相应的内容 效果如图   二.html与css.jQuery 1.div模式 <!DOCTYPE html PUBLIC " ...

  4. day06 小数据池,再谈编码

    今日所学 一.  小数据池 二.  is 和==的区别 三.  编码的问题 一.小数据池的作用 用来缓存数据 可以作用的数据类型: 整数(int), 字符串(str), 布尔值(bool). 什么是块 ...

  5. .net core 之Hangfire任务调度

    Hangfire可用作任务调度,类似延迟任务.队列任务.批量任务和定时任务等. 一.nuget Hangfire包 找到Hangfire.AspNetCore和Hangfire.SqlServer包, ...

  6. java的类class 和对象object

    java 语言的源代码是以类为单位存放在文件中,已public修饰的类名须和存放这个类的源文件名一样.而 一个源文件中只能有一个public的类,类名的首字母通常为大写. 使用public修饰的类可以 ...

  7. Innodb引擎简介

    一.锁 二.什么情况出现阻塞 1.频繁更改的表,出现了慢查询 2.频繁访问的表,出现了备份等(表级锁) 三.查看运行情况 show engine innodb status; 四.关键参数 innod ...

  8. vue中使用sass 做减法计算

    首先确认已安装sass依赖, yarn指令:yarn add sass-loader, style中写法如下: 注意calc(100% - 200px); 之间有两个空格的,

  9. vue-cli快速构建vue项目模板

    vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. 1.使用npm安装vue-cli 需要先装好vue 和 webpack(前提是已经安装了nodejs,否则连npm都用不了 ...

  10. 手机号的 AES/CBC/PKCS7Padding 加解密

    前言:接口中上次的手机号码和密码是传入的加密的,模拟自动化的时候也需要先对数据进行加密 1.各种语言实现 网上已经各种语言实现好的AES加密,可以点击查看:http://outofmemory.cn/ ...