![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
fuguoda
敲代码使我快乐
展开
-
vue使用router-link跳转vue页面
要完成页面的跳转,需要在这几个文件下操作:1、主页面(Home.vue) 2、被跳转的页面 3、router下的index.js(page_share.vue)1、主页面(Home.vue) <li><router-link to='/PageShare'>前端</router-link></li>2、被跳转的页面(page_share...原创 2019-05-18 23:26:04 · 1518 阅读 · 0 评论 -
vue根据路由ID获取数据,设置html数据
1、在右路中跳转设置参数 <router-link :to="{path: 'PhoneParticular', query: { id: phone.id }}"> <img :src="phone.image[0].image1"/> </router-link>`2、引入全部数据,在被跳转到的vue页面,获取路由地址id。 impor...原创 2019-06-01 22:02:47 · 4440 阅读 · 0 评论 -
vue--点击添加class 其他标签删除class
1、css代码.active{ border: solid 1.3px #C82333; background-color:#fff ; }2、html代码<ul> <li class="floatL" :class="{ active: n==isActive}" v-for="n in 5" v-if="item.combo!==undefined" @...原创 2019-06-02 10:58:20 · 4546 阅读 · 0 评论 -
vue-cli中的axios本地get请求json出现404
axios中本地get请求json出现404的原因:需要把json文件放在static文件下原创 2019-06-07 16:40:08 · 2172 阅读 · 0 评论 -
使用vue-axios带参数发送get请求到php获取数据库数据
1、vue发送axios请求2、php接收请求并获取数据库<?php header("Access-Control-Allow-Origin: *"); header("Content-Type: application/json; charset=UTF-8"); if(isset($_GET["id"])){ $id=$_GET["id"]; $sql="SELECT...原创 2019-06-07 23:04:20 · 2887 阅读 · 0 评论 -
vue-购物商品数量的添加与减少--总价钱计算
1、html2、script原创 2019-06-02 16:54:33 · 1896 阅读 · 1 评论 -
vue--使用监听属性完成子组件传值给父组件
1、子组件template代码 <div class="panel-footer select-addr-list col-xs-6 col-md-3 col-sm-4 fontMin" v-for="(addr,index) in addrs"> <div class="addr-list-box" :class="{ active: index==isAt...原创 2019-06-02 17:55:39 · 2389 阅读 · 0 评论 -
在vuex中axios带多个参数发送post请求到php
首先在vue界面把axios对象传到vuex中:data是一组新数据,this.cartdata是购物车已经存在的数据,this.$ajax是axios对象新数据格式:使用commit转发到vuex中在store.js中引入qs,一般都是安装axios自己就有import Vue from 'vue'import Vuex from 'vuex'import qs from 'q...原创 2019-06-08 17:42:34 · 5309 阅读 · 0 评论 -
vue-jquery实现购物车全选和反选
这是一个在vue里使用jquery完成全选和反选的功能template代码: <div class="cart-check-all"><input type=“checkbox” name=“checkAll” id=“checkAll” v-model=“checkedAll” @click=“checkAll()”/> <...原创 2019-06-03 17:02:18 · 603 阅读 · 0 评论 -
vue-生命周期和钩子函数
生命周期探究下面代码可以直接复制出去执行 <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/v...翻译 2019-06-22 21:20:43 · 247 阅读 · 0 评论 -
使用vue-cli出现的问题总结
1.问题:`(Emitted value instead of an instance of Error) : component lists rendered with v-forshould have explicit keys. See https://vuejs.org/guide/list.html#keyfor more info.`解决方法:在组件内加入自定义属性key...原创 2019-06-01 17:28:29 · 172 阅读 · 0 评论 -
vue框架--组件以及路由的使用
一、组件可以扩展 HTML 元素,封装可重用的代码。Vue.component(tagName, options)<tagName></tagName>1、全局组件的使用 HTML:<div id="app"> <runoob></runoob></div> JS:Vue.component('ru...原创 2019-05-09 14:48:03 · 298 阅读 · 0 评论 -
vue框架指令总结
1、{{ 数据}}指令的使用<div id="app"> <p>{{ message }}</p> </div> <script> new Vue({ el: '#app', data: { message: 'Hello' } }) ...原创 2019-05-07 15:39:56 · 138 阅读 · 0 评论 -
VUE项目--vue-cli环境配置
一、安装好node.js关于旧版本:Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。Node 版本要求:Vue CLI 需要 Node.js 8.9 或更高版本 (推荐...原创 2019-05-16 17:38:56 · 133 阅读 · 0 评论 -
vue项目--vue-cli项目打包上线
在命令行中用npm run build 进行打包打包完成之后项目目录中会多一个dist的目录,这个就是打包之后的代码,可以直接拿去部署就可以。打包之前,需要注意,需要把绝对路径改为相对路径,更改方式如下:打开config/index.js 会看到一个build属性,这里就我们打包的基本配置了。你在这里可以修改打包的目录,打包的文件名。最重要的是一定要把绝对目录改为相对目录。...转载 2019-05-16 18:04:20 · 466 阅读 · 0 评论 -
vue组件头部封装
一、先建一个header.vue文件,这是一个头部组件,将这个组件在index.vue中使用<meta charset="UTF-8"/><template> <div id="header"> <div> 这是网页的头部 </div> </div></template><scrip...原创 2019-05-16 23:12:01 · 1598 阅读 · 1 评论 -
VUE运行命令行报错:Expected indentation of 2 spaces but found 4
原因:tab按键不可以使用,出现空格问题方法:想换回4个空格,才知道是项目初始时,默认安装ESLint(ESLint是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码)的原因,关闭ESLint方法:在vue项目中找到build文件夹 --> webpack.base.conf.js --> module重新运行项目 npm run dev...原创 2019-05-17 10:20:31 · 2811 阅读 · 1 评论 -
通过vue监听事件实现一个简单的购物车
一、html页面<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><div id="app"> <table> <tr> <th>序号</th> <th>商品名称&l...转载 2019-05-17 15:25:31 · 701 阅读 · 0 评论 -
VUE框架父组件传值给子组件--props传值
关键点是script的代码以及v-for循环那句话1. 父组件在父组件中引入子组件(components)在父组件中引入数据(data)代码如下所示:<template> <div id="guoda-phone" class="container"> <!--手机类别--> <div class="phone-nav"> ...原创 2019-06-01 10:05:25 · 270 阅读 · 0 评论 -
vue完成图片的单击切换--click事件
思路:根据图片的下标切换图片路径,使用v-for循环出小图片地址,大图片地址根据小图片的地址 切换代码如下:<div class="phoneP-box-left floatL"> <div class="left-bImg"> <img :src="'../../static/phone-img/phone'+itemIndex+'.p...原创 2019-06-01 11:01:23 · 16370 阅读 · 0 评论 -
详解vue-router 中的导航钩子
vue-router 的导航钩子,主要用来作用是拦截导航,让他完成跳转或取消。有三种方式可以植入路由导航过程中:1.全局的2.单个路由独享的3.组件级的1. 全局导航钩子:全局导航钩子主要有两种钩子:前置守卫、后置钩子,注册一个全局前置守卫:const router = new VueRouter({ ... });router.beforeEach((to, from, nex...转载 2019-06-22 21:28:30 · 1222 阅读 · 0 评论