![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue.js
milli236
这个作者很懒,什么都没留下…
展开
-
vue项目前端渲染后台数据:图片和页面详情
1.从后台获取图片处理需要对图片字符拼接<img :src="host+'/'+list.pro_img" alt="">//<img :src="'http://www.xxx.com'+'/'+list.pro_img" alt="">data () { return { msg: 'Welcome to Home.vue Ap原创 2018-09-17 15:32:07 · 9942 阅读 · 0 评论 -
vuejs实现标签选项卡-动态更改css样式
html1. <ul class="header-list"> <li v-cloak v-for="(item,index) in headerList" v-on:click="selectMainTheme(index)"><a href="java:;" :class="{'active':idx == index}&qu原创 2018-05-31 11:22:23 · 11559 阅读 · 0 评论 -
vuejs页面刚加载时候有双括号
最近在用vue.js,因为它比angularjs要轻量,但是总是在页面初始化加载时出现大括号({}),后来查看了vue.js的文档找到了解决方案css[v-cloak] { display: none;} html<div v-cloak> {{ message }}</div>但是问题并没有彻底解决。发现,未渲染完,元素页面消失。虽然没有显示大括号了。但是页...原创 2018-05-31 11:07:15 · 3934 阅读 · 0 评论 -
vue.js用cdn引入
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-原创 2018-05-30 15:44:00 · 49189 阅读 · 1 评论 -
sublime如何高亮显示vue文件
1.准备语法高亮插件vue-syntax-highlight。下载地址:https://github.com/vuejs/vue-syntax-highlight 下载页面并下载: 解开压缩包vue-syntax-highlight-master,其内所有文件备用。 2.将vue-syntax-highlight植入sbulime。进入sublime,选择菜单项“Preferences->B...转载 2018-05-30 11:18:09 · 3497 阅读 · 2 评论 -
vux框架的安装使用
Vue中使用vux的配置,分为两种情况:一、根据vux文档直接安装,无需手动配置?12345npm install vue-cli -g // 如果还没安装vue init webpack my-projectName // 创建名为 my-project 的模板cd my-project // 进入项目np原创 2017-10-23 14:47:58 · 17830 阅读 · 3 评论 -
vuejs基础知识总结
1.数据库返回数据渲染dom。img图片src的问题 属性添加。v-bind缩写 : 不要花括号,需编译为字符。外加单引号2.同理绑定自定义属性3.上面2绑定事件获取自身元素的属性值, e.target 拿到点击的目标元素 而 event.currentTarget对象就是当前元素,vue传递event原创 2017-08-29 16:41:42 · 771 阅读 · 0 评论 -
vue里引用轮播插件:vue-awesome-swiper 轮播插件
1.文档地址: git地址 :https://github.com/surmon-china/vue-awesome-swiper安装npm install vue-awesome-swiper --save更换版本:先卸载最新的npm uninstall vue-awesome-swiper安装低版本npm install vue-awesome-swiper@2.6...原创 2018-07-26 14:17:47 · 3071 阅读 · 0 评论 -
vuejs2.0如何获取dom元素自定义属性值
1.设置定义属性值 :data-value=".." <ul class="header-ul"> <li class="flexcss" v-for="(list,index) in child" :data-value="list.name" @click="changeContent(index,list.name)&q原创 2017-11-10 15:49:40 · 7508 阅读 · 0 评论 -
vue动态组件加载
1.html <component :is="currentView" ></component>2.jsVue.component("child1", { template: '<p>hell child1</p>'})Vue.component("child2", { template: '<p>原创 2018-05-31 12:11:38 · 3314 阅读 · 0 评论 -
Vant的安装和配合引入Vue.js项目里
1.安装vantnpm i vant -S:这是简写形式。npm install vant --save:这是完整写法。如果你网络很慢的话,可以使用淘宝的源,但是不建议使用cnpm来进行安装。npm install vant --save --registry=https://registry.npm.taobao.org 淘宝镜像,速度快,安装后查看package.json文件里看是否安装完成 ...原创 2018-06-20 16:26:26 · 18369 阅读 · 1 评论 -
vue项目里使用vantUI框架使用轮播组件和懒加载出现元素跳动的问题
移动端开发过程发现:1.懒加载我局部使用报错。只好全局引入,也方便以后其他页面的使用main.js// or with options (options 为可选参数,无则不传)import { Lazyload } from 'vant'; Vue.use(Lazyload, { preLoad: 0, error: 'static/img/error.jpg', loading:...原创 2018-07-16 13:23:12 · 19368 阅读 · 4 评论 -
vue滑动插件:vue-drag-verify
滑动验证:https://github.com/AshleyLv/vue-drag-verify 插件应用--安装npm install vue-drag-verify --savehtml<drag-verify :width="width" :height="height" ...原创 2018-08-02 14:29:44 · 15391 阅读 · 8 评论 -
vue项目中用php做后台获取不到session会话值
1.参考文章 https://blog.csdn.net/sky786905664/article/details/73920815 本地测试环境下貌似访问不到值。报错:Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response....原创 2018-08-06 10:51:36 · 3401 阅读 · 0 评论 -
vue实用的菜单插件
主菜单按钮 vue-quick-menu github:https://github.com/AshleyLv/vue-quick-menu/blob/master/example/src/demo.vue <template> <div class="header"> <!-- long and m...原创 2018-07-28 13:07:51 · 6154 阅读 · 2 评论 -
vue项目过渡加载插件:epicspinners
1-1加载过渡: 安装npm install --save epic-spinners使用import { TrinityRingsSpinner } from 'epic-spinners' <trinity-rings-spinner :animation-duration="1500" :size="66" color="#ff1d5e"...原创 2018-07-27 14:55:58 · 1295 阅读 · 0 评论 -
vue项目引入vant框架的复选框checkbox的处理
引入: <li v-for="(item,index) in cart"> <!-- Card --> <van-checkbox v-model="item.danxuan" ...原创 2018-07-28 17:33:36 · 46243 阅读 · 0 评论 -
vue打包后找不到资源路径
vue项目完成打包上线的时候很多人都会碰到静态资源找不到的问题,常见的有两个1、js,css路径不对解决办法:打开config/index.js,将其中的assetsPublicPath值改为’./’2、css中引用的图片资源找不到我的login.vue文件中有一段css,其中引用了一个背景图片,是这样写的 1 .login{height:100...原创 2018-07-28 15:14:35 · 7140 阅读 · 0 评论 -
vantUI框架在vue项目中的应用踩坑
细节未完善。参考地址编辑方面的应用。1.订单提交地址等组件的应用。使用的组件有如下:import {Card,button,Toast,AddressList,Popup,AddressEdit,Area} from 'vant'主要是配货地址编辑这块; <van-address-edit :area-list="area...原创 2018-07-23 17:17:21 · 41517 阅读 · 6 评论 -
better-scroll插件
1.better-scroll 托管在 Npm 上,执行如下命令安装:npm install better-scroll --save接下来就可以在代码中引入了,webpack 等构建工具都支持从 node_modules 里引入代码:import BScroll from 'better-scroll'2.所需页面引入。 {{ msg }}原创 2017-10-08 12:01:26 · 620 阅读 · 0 评论 -
vue.js图片无法显示问题总结
1。data数据里的写法:js里的应该是要写成 url: require('../../assets/workbench/1.png')如:export default { name: 'hello', data () { return { msg: 'Welcome to Yrrrrrrrf对p', visible:false,原创 2017-09-24 02:53:22 · 14697 阅读 · 1 评论 -
Vue.js 动态绑定class
Vue.js 动态绑定classVue.js 的核心是一个响应的数据绑定系统,它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。被绑定的DOM 将与数据保持同步,每当数据有改动,相应的DOM视图也会更新。基于这种特性,通过vue.js动态绑定class就变得非常简单。 1. 数据绑定vue 指令以 v- 前缀标示,数据绑定的指令 v-bind:属性名,原创 2017-10-12 14:30:53 · 1626 阅读 · 1 评论 -
vuejs使用axios异步访问时用get和post的方法
script中。。。 let data={....};let url=xx;方法各异:GET:l this.$ajax.get(url,{ params:data }) .then(function (res) { console.log(res.data) ...原创 2017-09-21 16:30:04 · 5075 阅读 · 0 评论 -
vue使用axios异步请求后端数据的使用
Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新维护 vue-resource,并推荐axios,目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求。使用方法:1.安装npm install axios --save-dev2.使用:main.js中:原创 2017-09-21 08:33:06 · 6569 阅读 · 0 评论 -
VueJs制作轮播组件
1.创建子组件,slider.vue2.引入需要轮播的页面中,html: 用:slides=""来引用不同的数据,从而可以反复使用slider.vue组件 script:(slides一致)data () { return { invTime:2000, slides:[ { src原创 2017-09-08 14:06:01 · 2690 阅读 · 0 评论 -
vue2.0 如何通过本地json文件模拟后台数据接口
放在static文件下下面然后用get方式请求就好getNum(){ this.$http.get('static/member.json').then(res=>{ console.log(res.data) })原创 2017-08-30 15:24:42 · 1191 阅读 · 1 评论 -
vue2.0中如何调用腾讯地图api?
1.index.html2.页面引入export default { mounted:function(){ this.init() }, methods:{ init:function () { var myLatlng = new qq.maps.LatLng(31.584617993869276, 120.29067993原创 2017-08-28 15:01:47 · 11671 阅读 · 1 评论 -
去掉vue.js中的Eslint
我们在使用vue 脚手架时,为了规范团队的代码格式,会有一个代码规范检测,如果不符合规范就会报错,有时候我们不想按照他的规范去写。这时我们需要关闭。这里有两种方法。1.在搭建vue脚手架时提示是否启用eslint检测的。 Use ESLint to lint your code? 写 no;2.如果项目已经生成,我们可以这样。在项目中代开 bulid 文件夹下的 webpack.bas原创 2017-08-14 13:27:19 · 6224 阅读 · 0 评论 -
vuejs2.0关于用axios结合vuex开发
vuex:index.js, actions.js, mutations.js, getters.js1.index.js中import Vuex from 'vuex'import Vue from 'vue'import actions from './actions'import mutations from './mutations'import原创 2017-09-21 19:42:03 · 661 阅读 · 0 评论 -
vue2.0下拉列表数据绑定
1.html {{list.name}} 2.scriptexport default{ data(){ return{ selected:'大衣', types:[ {name:'皮衣',value:'皮衣'}, {name:'大原创 2017-09-21 20:51:18 · 1573 阅读 · 0 评论 -
用router-link做一个底部导航组件
1.代码bottom.vue 首页 分类 购物车原创 2017-10-18 16:01:42 · 2024 阅读 · 0 评论 -
vuejs搭建的项目如何引入图标字体
引入阿里的icon库;1.所选择的字体图标下载代码包,2.代码包里除掉demo文件,其他拷贝到vue项目里,自建一个icon文件目录3.所引用的组件页面导入iconfont.css文件 @import "../../../assets/icon/iconfont.css";...4页面:页面中添加一个i标签 class填入iconfont icon-xxx即可,原创 2017-09-06 21:15:09 · 15336 阅读 · 4 评论 -
vue.js处理时间
1.main.js ,全局过滤器。方便使用import Vue from 'vue'import App from './App'import router from './router'import store from './vuex/index.js'import Vuex from 'vuex'//引入axiosimport axios from 'axios'Vue.原创 2017-09-22 16:37:01 · 3375 阅读 · 0 评论 -
vue.js2.0关于computed、methods、watch、created的区别
{{ss}} export default{ data(){ return{ list:'' } }, computed:{ ss:function(){ return this.list+'zhe shi s' }, }, created原创 2017-09-22 15:41:29 · 10356 阅读 · 0 评论 -
Vue2.0生命周期和钩子函数
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如,实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ,然后在数据变化时更新 DOM 。下图展示的就是一个vue实例对象的生命周期。 从图上我们可以看到vue在生命周期中有这些状态,beforeCreate,created,beforeMount,mounted,befor转载 2017-09-22 15:58:55 · 2920 阅读 · 0 评论 -
vue.js用vue-router路由传参时页面刷新后参数消失的问题
如果要用 params 传参的话,可能需要在你的路由路径里也加上这个参数,比如你用this.$router.push({name:'detail', params:{userId: userId}});跳转,那么在路由里就要这样写 this.$router.push({name:'Detail',params:{pro_id:pro_id}});router - index.js 路...原创 2017-08-31 21:24:06 · 17085 阅读 · 1 评论 -
vue.js2.0父子组件间传参 (二)实现弹窗
1. 父组件 显示元素 import test from './test.vue'export default { name: 'hello', data () { return { msg: 'Welcome to Your Vue.js App', show: false } }, method原创 2017-09-22 13:54:07 · 2260 阅读 · 0 评论 -
vue.js2.0非父子 组件之间传参
如果2个组件不是父子组件那么如何通信呢?这时可以通过eventHub来实现通信. 所谓eventHub就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件.let Hub = new Vue(); //创建事件中心11组件1触发:div @click="eve">methods: { eve() { Hub.$emit('change','原创 2017-09-22 13:49:31 · 395 阅读 · 0 评论 -
vue.js2.0父子组件间传参 (一)实现弹窗
一。父子传参(父向子传参,子组件不能直接修改参数,另用$emit实现子向父传参)父: 父向子传:props父的 html:tishi :child="state">tishi>父的script data(){ return{ state:false }}修改state,即会影原创 2017-09-22 13:06:46 · 2320 阅读 · 0 评论 -
Vue2.0—— 搭建Vue脚手架(vue-cli)及创建项目
一、那么我们就从最简单的环境搭建开始:安装node.js,从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装)。安装完成之后,打开命令行工具(win+r,然后输入cmd),输入 node -v,如下图,如果出现相应的版本号,则说明安装成功。这里需要说明下,因为在官网下载安装node.js后,就已经自带npm(包管理工具)了,另需要注意转载 2018-07-13 11:29:01 · 3659 阅读 · 0 评论