![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 80
wang_NiFeng
这个作者很懒,什么都没留下…
展开
-
vue 移动端拨打电话
方法:window.location.href = 'tel://' + 电话号码;——对安卓支持;iOS不支持iOS需要多加一个a标签;写法:<div class="contact-line contact-tel"> <div>手机号</div> <div class="tel">{{tel}}</div> <div @click="callTel()">拨打</div> &原创 2020-07-24 16:28:57 · 1393 阅读 · 0 评论 -
vue 点击实现复制功能
使用插件:clipboard.js地址:https://clipboardjs.com/npm安装:npm install clipboard --save使用:<div class="contact-line"> <div>微信号</div> <div class="tel">{{wechat}}</div> <div class="wechat-copy" :data-clipboard-tex.原创 2020-07-24 15:49:28 · 622 阅读 · 0 评论 -
axios相关
传参方式:get请求方式将需要入参的数据作为params属性的值,最后整体作为参数。传递参数必须用{params:{'name':'111', 'age': '12'}}形式,加parmas。axios.get(url, {params: params}) .then((data) => { console.log(data) }) .c...原创 2019-08-12 18:16:10 · 328 阅读 · 0 评论 -
vue中created、mounted、computed、methods区别与执行顺序
computed是在DOM执行完成后立马执行(如:赋值) created执行时挂载阶段还没有开始,模版还没有渲染成html,所以无法获取元素。created钩子函数主要用来初始化数据。 mounted钩子函数一般用来向后端发起请求,拿到数据后做一些业务处理。该函数在模版渲染完成后才被调用。DOM操作一般是在mounted钩子函数中进行。 methods方法有一定的触发条件,如click等。...原创 2019-08-19 11:12:38 · 18146 阅读 · 1 评论 -
图片水平或垂直滚动
在vue项目中引用外部插件VueImgSlider.vue:import VueImgSlider from '../components/VueImgSlider.vue'export default { name: 'website-about', components: { 'vue-img-slider': VueImgSlider }, ...原创 2019-08-01 21:06:29 · 635 阅读 · 1 评论 -
Mac构建vue项目及问题存在问题
1、检测npm、node是否安装成功: npm -v node -v2、升级npm $ sudo npm install npm -g3、安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org4、安装webpack ...原创 2019-07-29 20:15:54 · 384 阅读 · 0 评论 -
Vue实例方法
一、实例属性 1、组件树访问(1)$parent——用来访问当前组件实例的父实例。(2)$root——用来访问当前组件树的根实例,如果当前组件没有父实例,$root表示当前实例本身。(3)$children——用来访问当前组件实例的直接子组件实例。(4)$refs——用来访问使用了v-ref指令的子组件。2、DOM访问(1)$el——用来访问挂载当前组件实例的D...原创 2018-12-11 11:49:11 · 534 阅读 · 0 评论 -
过渡
当插入或删除包含在 transition 组件中的元素时,Vue 将会做以下处理:(1)自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名。(2)如果过渡组件提供了 JavaScript 钩子函数,这些钩子函数将在恰当的时机被调用.(3)如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画,DOM 操作 (插入/删除) ...原创 2018-12-10 23:00:32 · 234 阅读 · 0 评论 -
Class与Style绑定
在v-bind用于class和style时,Vue.js专门增强了它。表达式的结果类型除了字符串以外,还可以是对象或数组。1、绑定HTML Class(1)对象语法如:<div id="id1" class="static" v-bind:class="{'didi-orange':isRipe,'didi-green':isNotRipe}"></div>...原创 2018-12-10 16:05:41 · 295 阅读 · 0 评论 -
过滤器
1、过滤器过滤器——本质上都是函数。作用在于用户输入数据后,它能够进行处理,并返回一个数据结果。使用管道符(|)进行连接。如:{{'abc' | uppercase}} //'abc' => 'ABC'Vue.js支持在任何出现表达式的地方添加过滤器。如:在{{}}的表达式 在绑定指令的表达式后调用如:<span v-text="message" | upperc...原创 2018-12-10 11:50:38 · 188 阅读 · 0 评论 -
计算属性
1、计算属性 计算属性——当其依赖属性的值发生变化时,这个属性的值会自动更新,与其相关的DOM部分也会同步自动更新。<div id="id1"> <input type="text" v-model="didi"> <input type="text" v-model="family">原创 2018-12-09 20:39:44 · 1285 阅读 · 0 评论 -
表单输入绑定
可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。1、文本<div id="id1">...原创 2018-12-07 15:52:36 · 201 阅读 · 0 评论 -
事件处理
1、事件修饰符 .stop .prevent .capture .self .once .passive 注:修饰符可以串联,使用修饰符时顺序很重要;相应的代码会以同样的顺序产生如:<!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a><!-...原创 2018-12-07 15:40:34 · 151 阅读 · 0 评论 -
计算属性和侦听器
1、计算属性缓存 VS 方法将一个函数定义为计算属性和方法得到的结果是相同的。但不同的是计算属性是基于它们的依赖进行缓存的,只是在相关依赖发生改变时才会重新求值。//方法methods: { reversedMessage: function () { return this.message.split('').reverse().join('') }}//计算属性...原创 2018-12-07 15:33:11 · 131 阅读 · 0 评论 -
组件基础
1、基本示例<div id="id1"> <button-counter></button-counter></div>//定义一个名为button-counter的新组件 Vue.component('button-counter',{ data:function () { re...原创 2018-12-07 18:21:34 · 160 阅读 · 0 评论 -
vue——内部指令
指令是特殊的带有前缀v-的特性。指令的值限定为绑定表达式,指令的职责就是当其表达式的值改变时把某些特殊的行为应用到DOM上。v-ifv-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。false——移除;true——生成一个元素如果想切换多个元素,可以把<template>元素当作包装元素切换v-if模块时,有局部编译/卸载过程。v-if是惰性的—...原创 2018-11-13 16:09:45 · 214 阅读 · 0 评论