Vue
文章平均质量分 63
vue的知识集合
前端新手W
这个作者很懒,什么都没留下…
展开
-
将父组件的props一起传给子组件
<child-component v-bind="$props"></child-component>原创 2021-09-06 10:24:39 · 199 阅读 · 0 评论 -
vue鼠标移入移除带动画事件实例
vue鼠标移入移除事件实例文章目录vue鼠标移入移除事件实例效果图:一. 技术分析二.实例的实现分析1. 初始状态2. 鼠标移入状态3. 鼠标移出状态三.源代码四.举一反三的例子效果图:一. 技术分析vue所有的鼠标事件:单击@click=‘click’按下@mousedown=‘down’抬起@mouseup=‘up’双击@dblclick=‘dblclick’移动@mousemove=‘move’移除@mouseout=‘out’离开原创 2020-08-20 14:03:35 · 6661 阅读 · 4 评论 -
十二.vue-resourse实现get,post,jsonp请求
文章目录vue-resourse实现 get, post, jsonp请求请求JSONP的实现原理vue-resource的配置步骤:vue-resourse实现 get, post, jsonp请求请求当发起get请求之后, 通过 .then来设置成功的回调函数.通过 result.body 拿到服务器返回的成功的数据console.log(result.body);手...原创 2019-12-11 09:13:08 · 194 阅读 · 0 评论 -
十一. vue实例的生命周期函数
文章目录`vue`实例的生命周期vue实例的生命周期从Vue实例创建、运行 、到销毁期间, 总是伴随着各种各样的事件, 这些事件统称为声明周期.声明周期钩子: 就是生命周期事件的别名而已.生命周期钩子 = 生命周期函数 = 生命周期事件主要的生命周期函数分类:创建声明周期的生命周期函数:1. new Vue(): var vm = new Vue({})表示开始创建一个Vue...原创 2019-12-11 09:10:16 · 222 阅读 · 0 评论 -
十.指令
文章目录指令-directive一.自定义指令让文本框获取焦点1.`jQuery`写法-focus2.自定义全局指令-`Vue.directive`3.自定义局部指令-`directives`4.函数简写指令-directive一.自定义指令让文本框获取焦点1.jQuery写法-focus$(selector).focus();2.自定义全局指令-Vue.directiveVue...原创 2019-12-11 09:08:32 · 122 阅读 · 0 评论 -
九.钩子函数
文章目录钩子函数一.钩子函数二.钩子函数参数钩子函数一.钩子函数一个指令定义对象提供几个钩子函数:bind: 只调用一次, 指令第一次绑定到元素时立即执行这个bind函数. 只能绑定一次, 所以只能调用一次.inserted: 表示元素插入到父节点(DOM)中的时候, 会执行inserted函数. (仅保证父节点存在, 但不一定已被插入文档中)update: 当VNode更新的时候,...原创 2019-12-11 09:07:24 · 966 阅读 · 1 评论 -
八.过滤器
文章目录过滤器一.概念二.全局过滤器三.私有过滤器-filter过滤器一.概念Vue.js允许自定义过滤器, 可被用作一些常见的文本格式化. 过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示;// 过滤器用的时候的格式 {{ name | 浏览器的名称 }}//过滤器中的function,...原创 2019-12-11 09:06:07 · 220 阅读 · 0 评论 -
七.vue基础-表单输入绑定
文章目录七.vue基础-表单输入绑定一.基础用法文本多行文本复选框单选按钮选择框二.值绑定七.vue基础-表单输入绑定一.基础用法可以使用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定.v-model会忽略所有的表单元素的value、checked和selected特性的初始值而总是将Vue实...原创 2019-12-11 09:01:32 · 378 阅读 · 0 评论 -
六.vue基础-事件处理
文章目录六.vue基础-事件处理一.监听事件二.事件处理方法三.内联处理器中的方法四.事件修饰符五.按键修饰符六.系统修饰键七.鼠标按钮修饰符六.vue基础-事件处理一.监听事件可以用v-on指令监听DOM事件, 并在触发时运行一些JavaScript代码.<div id="example_1"> <button v-on:click="counter += 1"...原创 2019-12-11 09:00:04 · 272 阅读 · 0 评论 -
五.Vue基础-计算属性(computed)和监听属性(watch)
文章目录五.Vue基础-计算属性(computed)和监听属性(watch)一.计算属性二.计算机属性的读取和设置三.监听属性四.计算属性和监听属性的区别五.Vue基础-计算属性(computed)和监听属性(watch)一.计算属性计算属性的返回值在同一时间之内, 如果同时被多次使用, 计算属性只会计算一次, 即多次使用返回的是同一结果.因此计算属性适用于同一时间网页中多个地方使用同一...原创 2019-12-11 08:57:36 · 292 阅读 · 0 评论 -
四.vue基础-class和style绑定
文章目录四.vue基础-class和style绑定一.class与style绑定二.绑定HTML Class三.绑定内联样式四.vue基础-class和style绑定一.class与style绑定class列表和style内联样式都是属性, 所以我们可以用v-bind处理:通过表达式计算出字符串结果(拼接字符串).表达式结果的类型除了字符串之外, 还可以是对象或数组.二.绑定HTML...原创 2019-12-11 08:55:55 · 227 阅读 · 0 评论 -
三.vue基础-指令大全
文章目录vue基础-指令大全一. v-text 更新textContent二.v-html 解析HTML标签三.v-pre 跳过编译过程四.v-cloak 关联实例结束编译五.v-once 渲染一次六.v-if v-else-if v-else判断语句七.v-show条件展示元素八.v-for根据遍历数组来进行渲染九.v-bind 动态的绑定一个或者多个特性十.v-model 双向数据绑定十一.v...原创 2019-12-02 18:17:38 · 369 阅读 · 0 评论 -
二.Vue基础-Vue模板语法
文章目录二.`Vue`基础-`Vue`模板语法一.插值标签属性绑定二.指令二.Vue基础-Vue模板语法一.插值数据绑定最常见的形式就是使用Mustache语法(双大括号)的文本插值: <div id="app"> <h3>{{msg}}</h3> </div>Mustache标签将会被替代为对应数据对象上...原创 2019-12-02 18:16:34 · 174 阅读 · 0 评论 -
一.Vue基础:一Vue实例
文章目录一.Vue基础:一Vue实例一.构造器二.属性与方法一.Vue基础:一Vue实例一.构造器每一个Vue.js都是通过构造函数Vue创建一个Vue的根实例启动,通过Vue实例完成对model和view层数据的处理var vm = new Vue({ //选项})Vue参考MVVM的设计理念, 实现model(模型)层和view(观察)层数据的双向绑定, 即vie...原创 2019-12-02 18:14:45 · 149 阅读 · 0 评论