vue2.0 之 directive指令 (自定义)

指令一.定义: 指令只一种可以附加到DOM元素的微命令(tiny commands). 它们通常以"v-"作为前缀, 以方便Vue知道你在使用一种特殊的标记, 从而确保语法的一致性. 如果你需要对HTML元素的低级别(low-level)访问来控制一些行为, 它们通常很有用. 五个钩子函数: bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作. inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 do…

vue2.0中v-on绑定自定义事件

vue中父组件通过prop传递数据给子组件,而想要将子组件的数据传递给父组件,则可以通过自定义事件的绑定. 每个Vue实例都实现了[事件接口],即: 1.使用 $on(eventName) 监听事件 2.使用 $emit(eventName) 触发事件父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件. html代码 <div id="container"> <my-component v-on:addpar="priceAll"…

vue2.0中v-on绑定自定义事件的理解

vue中父组件通过prop传递数据给子组件,而想要将子组件的数据传递给父组件,则可以通过自定义事件的绑定. 每个Vue实例都实现了[事件接口],即: 1.使用 $on(eventName) 监听事件 2.使用 $emit(eventName) 触发事件父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件. html代码: <div id="counter-event-example"> <p>{{ total }}</p> <…

vue2.0在页面中自定义组件模块，以及页面与组件之间的数据传递

1,在初始文件index.html中加入要引入的模块,注意驼峰命名的方式(我就是没写成驼峰,报错) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>my-first-…

vue2.0 通过v-html指令渲染的富文本无法修改样式的解决方案

在最近的vue项目中遇到的问题:v-html渲染的富文本,无法在样式表中修改样式: 比如下面的代码,div.descBox里面的p标签的color样式并不是"color: blue": <template> <div class="descBox" v-html='desc'></div> </template> <script> export default{ data(){ return { desc:…

vue2.0自定义指令

前面一片文章说了vue2.0过滤器,其实自定义指令跟过滤器非常相似,单就定义方式而言,其与过滤器完全一致,分为局部指令,和全局指令.不过就是filter改为directive的区别. 过滤器一般用于对一些常见文本的格式化,而自定义指令主要是为了对底层DOM实现操作,虽然说vue主要是以数据驱动视图,但是总有一些只能操作DOM的应用场景,例如最常见的:拖拽.此时,就是自定义指令大显身手的时候了. 在移动端,常见这么一个需求,以微信为例,在微信主屏左右滑动时候,可以随着滑动法相更改工具栏,也就是随着…

vue2.0变化

之前有很多的vue知识总结都是围绕1.0版本实现的,下面主要总结一下2.0相对于1.0的一些变化. 组件定义在vue1.0中,我们有使用vue.extend()来创建组件构造器继而创建组件实例,如下所示. <div id="box"> <aaa></aaa> </div> <script> var Aaa=Vue.extend({ template:'<h3>我是全局组件</h3>' }); Vue.…

Vue2.0 【第二季】第1节 Vue.directive自定义指令

目录 Vue2.0 [第二季]第1节 Vue.directive自定义指令一.什么是全局API? 二. Vue.directive自定义指令三.自定义指令中传递的三个参数四.自定义指令的生命周期 Vue2.0 [第二季]第1节 Vue.directive自定义指令一.什么是全局API? 全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive.说的简单些就是,在构造器外部用Vue提供给我们…

Vue2.0的变化，组件模板，生命周期，循环，自定义键盘指令，过滤器

组件模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </template> 现在: 必须有根元素,包裹住所有的代码例如: <script> var Home={ template:'#aaa' }; window.onload=function(){ new Vue({ el:'#box', data:{ msg:'welcome vue2.0' },…

Vue2.0 - 自定义指令 vue-directive

Vue.directive('指令',function(el,binding,vnode){ el.style='color:'+binding.value;}); el : 指令所绑定的元素,可以用来直接操作DOM.. binding: 一个对象,包含指令的很多信息. 自定义指令有五个生命周期: >1.bind : 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个绑定时执行一次的初始化动作. >2.inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存…

vue2.0 自定义指令

Vue指令 Vue的指令以v-开头,作用在HTML元素上,将指令绑定在元素上,给绑定的元素添加一些特殊行为. 例如: <h1 v-if="yes">Yes</h1> 其中,v-是Vue的标识,if是指令ID,yes是expression.yes是MVVM中的VM即ViewModel,当它的值发生变化,就会触发指令,改变View视图的显示. expression还可以使用内联的模式,任何依赖的属性发生变化时都会触发指令的执行.如: <h1 v-if=&quo…

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

回顾今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码的学习,简单的通过一些假的数据来展示了下个人博客的首页列表,不知道大家是否还记得昨天讲的什么,如果不太清楚呢,可以再回顾下<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础:使用Vue.js 来画博客首页(一)>,我们主要说到了,Vue的核心语法是什么,MVVM…

基于vue2.0前端组件库element中 el-form表单自定义验证填坑

eleme写的基于vue2.0的前端组件库: http://element.eleme.io 我在平时使用过程中,遇到的问题. 自定义表单验证出坑: 1: validate/resetFields 未定义. 原因: 1:要验证的DOM,还没有加载出来. 2:有可能this.$refs[ruleForm].validate() 方式不识别.需要使用: this.$refs.ruleForm.validate(); 解决方法 1: 要验证的DOM,还没有加载出来. this.ticketDialog…

CKEditor5 + vue2.0 自定义图片上传、highlight、字体等用法

因业务需求,要在 vue2.0 的项目里使用富文本编辑器,经过调研多个编辑器,CKEditor5 支持 vue,遂采用.因 CKEditor5 文档比较少,此处记录下引用和一些基本用法. CKEditor5官网 https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html CKEditor5 引入有四种编辑器可供下载,根据自己的需求选择,因为开发需求需要颜色笔,所以采用 Document editor. 如果之前有…

Vue2.0如何自定义时间过滤器

我们知道Vue2.0开始不再支持自带的过滤器,需要我们自己去自定义过滤器,方法如下: 我们可以自己定义一个时间过滤器,在此引用了一个日期处理类库(Moment.js)可以很快的实现我们要的结果.首先先安装这个类库的依赖,安装步骤官网上有详细说明在此不细说.主要就是看你想要转化成什么样的时间格式,一般来说我们从后台获取的应该都是时间戳,只需要很简单的几句代码即可,如图所示: 在html上的代码如下图所示: 这里的DateTime是后台获取的时间戳,t…

vue2.0移动端自定义性别选择提示框

这篇文章主要是简单的实现了vue2.0移动端自定义性别选择的功能,很简单但是经常用到,于是写了一个小小的demo,记录下来. 效果图: 实现代码: <template> <div class="app"> <div class="boy"> <input type="radio" name="radios" value="1" v-model="param…

Vue2.0 【第一季】第7节 v-bind指令

目录 Vue2.0 [第一季] 第7节 v-bind指令第7节 v-bind指令 v-bind缩写绑定CSS样式 Vue2.0 [第一季] 第7节 v-bind指令第7节 v-bind指令 v-bind是处理HTML中的标签属性的例如,我们绑定img上的src属性,进行动态赋值: html文件: <div id="app"> <img v-bind:src="imgSrc" width="200px" /> <…

Vue2.0 【第一季】第6节 v-model指令

目录 Vue2.0 [第一季] 第6节 v-model指令第6节 v-model指令一.一个最简单的双向数据绑定代码: 二.修饰符三.文本区域加入数据绑定四.多选按钮绑定一个值五.多选绑定一个数组六.单选按钮绑定数据 Vue2.0 [第一季] 第6节 v-model指令第6节 v-model指令 v-model指令,我理解为绑定数据源.就是把数据绑定在特定的表单元素上,可以很容易的实现双向数据绑定. 一.一个最简单的双向数据绑定代码: html文件: <div id="app…

Vue2.0 【第一季】第3节 v-for指令：解决模板循环问题

目录 Vue2.0 [第一季] 第3节 v-for指令:解决模板循环问题第三节 v-for 指令一.基本用法: 二.排序三.对象循环输出 Vue2.0 [第一季] 第3节 v-for指令:解决模板循环问题第三节 v-for 指令 v-for指令是循环渲染一组data中的数组,v-for 指令需要以 item in items 形式的特殊语法,items 是源数据数组并且item是数组元素迭代的别名. 一.基本用法: 模板写法 <li v-for="item in items&quo…

Vue2.0 【第一季】第2节 v-if v-else v-show 指令

目录 Vue2.0 [第一季]第2节 v-if v-else v-show 指令第二节 v-if v-else v-show 指令 2.1 v-if指令.v-else指令: 2.2 v-show的使用: Vue2.0 [第一季]第2节 v-if v-else v-show 指令第二节 v-if v-else v-show 指令 2.1 v-if指令.v-else指令: 是vue的一个内部指令,用在html中. 用来判断是否加载html的DOM,比如我们模拟一个用户登录状态,在用户登录后现实用…

vue2.0 如何自定义组件（vue组件的封装）

一.前言之前的博客聊过 vue2.0和react的技术选型:聊过vue的axios封装和vuex使用.今天简单聊聊 vue 组件的封装. vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼容性问题突出.像 Mint-UI 等说实话已经很不错了,但是坑也是不少,而且项目中很多功能仅凭这些也实现不了,这需要我们去封装自己的可复用组件. 二.封装组件的步骤 1. 建立组件的模板,先把架子搭起来,写写样式,考虑好组件的基本逻辑. os:思考1小时,码码10分钟,程序猿的准则. 2. 准备…

vue2.0有哪些变化

vue2.0之后有哪些变化: 1.每个组件模板template,不再支持片段代码之前: <template> <h3>vue-router+vue-loader</h3> <p>hshsh</p> </template> 现在:必须有根元素 <template> <div> <h3>vue-router+vue-loader</h3> <p>hshsh</p&…

Vue.2.0.5-自定义指令

简介除了默认设置的核心指令( v-model 和 v-show ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件--然而,有的情况下,你仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令.下面这个例子将聚焦一个 input 元素,像这样: 当页面加载时,元素将获得焦点.事实上,你访问后还没点击任何内容,input 就获得了焦点.现在让我们完善这个指令: // 注册一个全局自定义指令 v-focus Vue.directive('foc…

vue1.0和vue2.0的区别(二)

这篇我们继续之前的vue1.0和vue2.0的区别(一)继续说四.循环学过vue的同学应该知道vue1.0是不能添加重复数据的,否则它会报错,想让它重复添加也不是不可以,不过需要定义别的东西而vue2.0默认就支持添加重复数据,而且vue2.0还去掉了$index和$key这两个东西换成在循环里定义 v-for="val in array" 这是vue1.0 v-for="(val,index) in array" 这是vue2.0 五.自定义键盘指令 vue…

重开Vue2.0

目录: 内容: 一.Vue内部指令: 1.v-if v-else&v-show v-if与v-show都是选择性显示内容的指令,但是二者之间有区别: 1.v-if:判断是否加载,在需要的时候加载,减少服务器压力 2.v-show:调整css display属性,使客户端操作更加流畅 v-if: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&…

Vue2.0

Vue 1.0到2.0的变化: 1.在每个组件的模板中,不再支持片段代码组件中的模板: 之前: <template> <h3我是组件<strong>我是加粗模板</strong></h3> </template> 现在:必须有根元素包裹住所有代码 2.关于组件定义 Vue.extend 这种方式,在2.0里有一些改动,这种写法即使能用也不用 Vue.component(组件名称,{ data(){}, methods:{}, templa…

Vue2.0以后，有哪些变化

最近移动端项目版本升级,Vue由之前的1.0升级到2.3,那么,Vue2.0之后,有哪些细节的变化呢,现在总结如下: 1.在每个组件模板,不再支持片段代码组件中模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </template> 现在: 必须有根元素,包裹住所有的代码 <template id="aaa"> <div> &l…

vue2.0 vs vue1.0

1.每个组件模板不支持代码片段组件中模板之前<template> <h3>as</h3></template>现在必须要有根元素包裹住所有代码<template> <div> </div></template> 2.关于组件定义Vue.extendVue.component(组件名称,{ data(){} methods:{} template:{}}) 3.生命周期之前initcreatedbeforeC…

【重点突破】—— Vue1.0到Vue2.0的变化

前言: 本文参考作者:_So_ 和我是某慧的博文,重点梳理Vue1.0升级到Vue2.0后在开发中要注意的不同,以做学习. 组件模板不再支持片段代码,必须有一个顶级元素包裹,例如: Vue1.0: <template> <h3>h3标签</h3> <p>p标签</p> </template> Vue2.0: <template> <div> <h3>h3标签</h3>…

Vue2.0 基础入门

前言:" 今生遇汝,何其幸哉:于我蒙昧之时遇到你,于我大雾初透之时爱上你,于我大智初醒之时沉沦你. " 官网: 介绍 - Vue.js (vuejs.org) 指令与修饰符创建实例 <div id="app"> {{ message }} </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) 结果 Hello Vue! v-html <div…

【vue2.0 之 directive指令 (自定义)】的更多相关文章