vue
chainbees
每一个不曾起舞的日子,都是对生命的辜负
展开
-
Vue默认渲染的是HelloWorld这个组件,那么我们如何重新定义渲染新组件呢?
只需修改 src/route/index.js文件:import Vue from 'vue'import Router from 'vue-router'// import HelloWorld from '@/components/HelloWorld'// 1、导入新组件( @ 代表 src下的目录,简化地址路径)import GoodsList from '@/views/...原创 2018-07-28 17:05:39 · 2668 阅读 · 0 评论 -
vue-cli3访问出现Invalid Host header
1、产生原因 新版的webpack-dev-server增加了安全验证,默认检查hostname,如果hostname不是配置内的,将中断访问2、解决方案 进入vue项目目录下 -> 创建文件vue.config.js -> 内容如下:module.exports = { devServer: { disableHostCheck: t...原创 2019-07-25 16:09:03 · 883 阅读 · 0 评论 -
新建一个完整的vue项目
新建一个名为myvue项目:1、myvue/index.html为项目显示页面<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale原创 2018-12-07 14:23:32 · 238 阅读 · 0 评论 -
Vue学习笔记
一、搭建Vue项目步骤安装node,npm环境(由于新版的nodejs已经集成了npm,所以之前安装nodejs时npm也一并安装好了) -> npm使用淘宝镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org-> 安装全局的vue-cli(使用命令:npm install -g @vue/cli )...原创 2018-10-10 16:56:18 · 202 阅读 · 0 评论 -
Vue2.0路由详解(实例:通过vue-router路由配置实现:类似tab面板的小实例)
<head># 引入vue<script type="text/javascript" src='vue.js' ></script># 引入vue-router<script type="text/javascript" src='vue-router.js' ></script></head&原创 2018-08-18 16:14:20 · 331 阅读 · 0 评论 -
Vue1.0路由详解(实例:通过vue-router路由配置实现:类似tab面板的小实例)
<head># 引入vue<script type="text/javascript" src='vue.js' ></script># 引入vue-router<script type="text/javascript" src='vue-router.js' ></script></head&原创 2018-08-18 12:27:58 · 292 阅读 · 0 评论 -
Vue + Django + BootstrapVue实现分页,前端后台实例讲解
1、后台Django代码def storage(req): ''' 存储图片接口: 1、根据roomid查询出数据 ''' # 从数据库选出所需数据 roomid = req['roomid'] data_list = Memory.objects.filter(roomid=roomid).order_by('-addtime...原创 2018-08-09 16:54:00 · 3193 阅读 · 0 评论 -
axios模拟POST请求(分开写利于维护)
1、axios.js文件如下:import axios from 'axios'export const instance = axios.create({ // basic url baseURL: 'http://192.166.0.132:9999/txapi', // 如果请求的时间超过'timeout' 请求将被中止 timeout: 3000, // w...原创 2018-07-31 10:51:13 · 700 阅读 · 0 评论 -
axios模拟GET请求实例及详解
1、在my-project项目中引入axios依赖:cnpm install --save axios2、main.js 中引入 axios: // 在 main.js 中添加了这两行代码之后,就能直接在组件的 methods 中使用 $http命令 import axios from 'axios' Vue.prototype.$http = axios (将...原创 2018-07-27 17:05:07 · 4908 阅读 · 0 评论 -
Vue.js如何导入新组件
1、新建组件:components/Test.vue<template> <div> {{title}} </div></template><script> export default { name: "Test", data () { retur...原创 2018-07-27 13:37:26 · 8509 阅读 · 0 评论 -
axios模拟表单POST请求实例及详解
<template> <div> {{title}} <br></br> <a href="javascript:" v-on:click="post()">POST按钮</a> {{msg}} </div></templat原创 2018-07-30 16:30:08 · 5877 阅读 · 3 评论 -
axios模拟GET请求(分开写利于维护)
1、在my-project项目中引入axios依赖:cnpm install --save axios2、先在src/main.js中引入 axios// 在 main.js 中添加了这两行代码之后,就能直接在组件的 methods 中使用 $http命令import axios from 'axios'Vue.prototype.$http = axios2、依赖安装好之后,创建...原创 2018-07-30 09:38:26 · 418 阅读 · 0 评论 -
Vue.js 模板语法 和 v-for 循环遍历数组
<template> <div class="test"> 1.模板获取数据的3种形式 <h1>{{title}}</h1> <p>{{user.name}}</p> <p v-text="user.age"></p&g原创 2018-07-26 16:22:43 · 3409 阅读 · 0 评论 -
Vue通过router-link或者button跳转到一个新的页面
a、商品列表页面如下(点击'跳转到购物车页面'就会跳到一个新的页面,而不是在同一个页面加载一个组件)<template> <div> 这是商品列表页面 <router-link to='/goods/title'>显示商品标题</router-link> <router-link to='/goods/image...原创 2018-07-28 19:11:16 · 72771 阅读 · 0 评论 -
Vue 嵌套路由(路由中嵌套路由)原理实例讲解
实例:我们打开商品列表页面,一个路由查看商品标题,一个路由查看商品图片,怎么去实现呢?1、新建 Title.vue子组件:<template> <div> 这是商品标题子组件 </div></template><script>export default { data(){ return{ ...原创 2018-07-28 18:17:09 · 2405 阅读 · 0 评论 -
Vue 动态路由详解及实例
修改src/route/index.js文件中的path:import Vue from 'vue'import Router from 'vue-router'import GoodsList from '@/views/GoodsList'Vue.use(Router)export default new Router({ mode: 'history', //加上...原创 2018-07-28 17:33:45 · 4555 阅读 · 0 评论 -
axios安装与使用(将get和post方法封装,代码模块化)
(1)cd到项目下,执行命令:$ npm i axios --save (2)新建文件api/helpers.js内容如下: // 1、导入axios import axios from 'axios' const urlMap = { development: '/', production: 'http://ustbhuangyi.com/sell/'...原创 2019-07-27 11:26:43 · 967 阅读 · 2 评论