目录七、vuecli八、runtime-only 和 runtime-compiler七、vuecli介绍：vue command interface 命令行界面：使用一些命令搭建项目的基础结构都使用会规范很多配置，易维护，减少出错率依赖 webpack and npm-》npm-》依赖node安装：npm install -g @vue/cli卸载之前版本npm uninstall vue-cli -g or npm uninstall -g @vue/cli拉取v2的模板npm install -g @vue/cli-initv2使用：基于webpack3创建projectvue init webpack projectName...
Vue,品牌列表案例（仅添加,删除，搜索，全局过滤器，私有过滤器，日期填充，自定义按键修饰符，全局自定义指令文本框获取焦点，bind函数拿到传递的颜色值，自定义私有指令和指令函数的简写） p34 p35 1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title></title> 6<script src="../js/vue.js"></script> 7<link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/> 8</head> 9<body> 10<di...
1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5<meta charset="utf-8"> 6<meta name="viewport" content="width=device-width,initial-scale=1.0"> 7<title>Document</title> 8<!--1.导入Vue的包--> 9<!-- <script src="./lib/vue-2.6.10.js"></script> -->10<script src=" https://cdn.jsdelivr.net/npm/vue"></script>1112</head>1314<body>15<!-- 2.创建一个要控制的区域 -->16<div id="app">17<input type="button" value="浪...
直接上代码<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="app"><div><input type="text" v-model="uname"><button @click.stop.prevent="add">添加</button></div><ul><li v-for="(item, index) in list" :key="item.id"><input type="checkbox">{{item.id}}---{{item.name}}</li></ul></div><script src="http://ybf-shopnew.oss-cn-beijing.aliyuncs.com/web_vend...
VUE访问接口的时候，很可能出现跨域请求，从而被提供接口的服务器拒绝，这个问题可以直接在VUE里面解决，解决方法：在vue.config.js里面加入配置信息。在module.exports中加入： devServer: {proxy:‘http://localhost:8089‘},这里的proxy，是真正要访问的提供接口的服务器url ！参考：https://blog.csdn.net/wh_xmy/article/details/87705840https://www.cnblogs.com/linjiangxian/p/13203835.html原文：https://www.cnblogs.co...
1、首先通过vue-cli构建项目，在你习惯的目录下打开cmd输入：vue init webpack cesium-demo 我这里的cesium-demo是我项目的名称，后续一些构建项目的选项省略.....2、然后在项目中安装cesium框架： npm install cesium --save3、webpack配置，build/webpack.base.conf.js 文件中添加resolve: {alias: {// Cesium module namecesium: path.resolve(__dirname, ‘../node_modules/cesium/Source‘)}
}4、build/webpack.dev.conf.j...
在使用Vue+Django的框架结构时，有时候后端需要获取request里的session信息，当然也可以使用token，但通过session会更方便取出用户相关的信息。当把vue打成dist包时会发现后端获取不到session信息，因为前段cookie没保存相应的session信息。在request.js文件中加入一行配置即可withCredentials: true原文：https://www.cnblogs.com/wujiest/p/13657832.html
一定要将静态资源引入 【 require("@/assets/") 】，绑定到 模型绑定的:src 数据中 动态的数据才能有效 <template> <div> <el-card class="box-card"> <div slot="header" class="clearfix"> <span>动态列表</span> <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> </div> <div class="list"> <el-table ref="multipleTable" ...
条件渲染v-if、v-show<template><div><a v-if="isPartA">partA</a><a v-show="!isPartA">partB</a><button v-on:click="toggle">toggle</button></div>
</template><script>export default {data () {return {isPartA: true}},methods: {toggle () {this.isPartA = !this.isPartA}}}
</script><style>html {height: 100%;}
</style>
点击按钮前点击按钮后v-if和v-show区别：v-if删除v-show用css控制 v-if、v-else<template><div><a...
我们在写属性时经常会加入’-‘来进行分词，比如：<panda from-here=”China”></panda>，那这时我们在props里如果写成props:[‘form-here’]是错误的，我们必须用小驼峰式写法props:[‘formHere’]。 原文：http://www.cnblogs.com/model-zachary/p/6941015.html
使用element-ui el-table 中有这样一个需求，需要将合计放在表格内容的第一行，并且点击合计可跳转到其它页面！框架中提供了合计的属性方法，这样可以进行数值求和及自定义求和，但是，合计那一栏不能添加点击跳转功能，结构默认排到最底行，不满足需求解决思路：1. 调节样式；
2. 将合计的数据单独计算出来/接口返回，添加到数组第一个位置，这样就可以很好的控制合计这一行了。summaryFun(){var obj = [“合计”，......]；this....
:is的作用有两个：1，动态切换组件<!-- 组件会在 `件名` 改变时改变 --><component :is="组件名变量"></component><!-- 通过is特性,可以动态切换当前组件 --><div v-bind:is="currentView"></div><!-- v-bind:动态绑定属性 -->2:解析DOM模版，解除限制元素：有些HTML元素，例如<ul><ol><table><select>,对于哪些元素可以出现在其内部是有严格限制的，而有些元素，例如：<li><tr><option> 只能出现在其他某些特定的元素内部。这会...
本文通过实例代码给大家介绍Vue+Openlayer中使用select选择要素，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧效果图：实现代码：<template><div id="map" ref="map" style="width: 100vw; height: 100vh"></div>
</template><script>
import "ol/ol.css";
import { Map, View } from "ol";
import { OSM, Vector as VectorSource } from "ol/source";
import { Vector as VectorLayer, Tile as T...
前端时间项目迭代，其中有个需求在vue里面，有a.b.c三个页面，要达到的效果是从a页面进去b页面，b页面需要刷新，但若从b页面进入c页面了以后再回到b页面，b页面需要保留之前的值，不做刷新；第一想到的是：<router-view v-if="$route.meta.keepAlive"></router-view> ；但是由于v-if 每次会销毁页面元素，导致第一次是缓存不成功的；在网上也找到过window.reload();这种方法，但是页面会有一瞬间的空白，用户体验不是很好；后同事找...
需要分别安装node-sass 和 sass-loader;可以不需要ruby;webpack当中配置{test: /\.vue$/,loader: ‘vue-loader‘,options: {loaders: {‘scss‘: ‘style-loader!css-loader!sass-loader‘}}}使用的时候要记得在style当中加lang="scss" 原文：http://www.cnblogs.com/kugeliu/p/6726694.html
