<template>
<div class="app-container" style="overflow: auto;">
<el-table
:data="list"
size="small"
element-loading-text="Loading"
border
highlight-current-row
>
<el-table-column label="会员账号">
<template slot-scope="scope">
<el-form :model="scope.row" :rules="rules">
<el-form-item prop="login">
<el-input v-show="true" v-model="scope.row.login" placeholder="请输入会员账号"/>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="真实姓名">
<template slot-scope="scope">
<el-form :model="scope.row" :rules="rules">
<el-form-item prop="real_name">
<el-input v-show="true" v-model="scope.row.real_name" placeholder="请输入真实姓名"/>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="会员昵称">
<template slot-scope="scope">
<el-form :model="scope.row" :rules="rules">
<el-form-item prop="nickname">
<el-input v-show="true" v-model="scope.row.nickname" placeholder="请输入会员昵称"/>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="会员手机">
<template slot-scope="scope">
<el-form :model="scope.row" :rules="rules">
<el-form-item prop="mobile">
<el-input v-show="true" v-model="scope.row.mobile" placeholder="请输入手机号码"/>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-form ref="scope.row" :model="scope.row">
<el-form-item>
<el-button @click="handleSubmit(scope.$index,scope.row)">重试</el-button>
</el-form-item>
</el-form>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { retry } from '@/api/table'
import { validateName } from '@/utils/validate'
import { validateMobile } from '@/utils/validate'
export default {
data() {
// validator
const validateNameInput = (rule, value, callback) => {
if (!value) {
return callback(new Error('此项必填！'))
} else {
callback()
}
}
const validateMobileInput = (rule, value, callback) => {
if (!value) {
return callback(new Error('手机号码必填！'))
} else if (!validateMobile(value)) {
return callback(new Error('请填写正确的手机号码格式！'))
} else {
callback()
}
}
return {
list: [],
// input框失焦校验
rules: {
nickname: [{ validator: validateNameInput, trigger: 'blur' }],
real_name: [{ validator: validateNameInput, trigger: 'blur' }],
mobile: [{ validator: validateMobileInput, trigger: 'blur' }],
login: [{ validator: validateNameInput, trigger: 'blur' }]
}
}
},
created() {
this.fetchData()
},
methods: {
fetchData() {
const errorData = JSON.parse(this.$route.query.errorData)
this.list = JSON.parse(errorData)
},
handleSubmit(index, row) {
// 提交校验
if (validateName(row.login) && validateName(row.real_name) && validateName(row.nickname) && validateMobile(row.mobile)) {
//数据提交和错误catch
}
}
}
</script>
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
1.Method与计算属性computed的区别
区别在于method每次都执行函数，而computed基于依赖缓存，只要相关值不变，那么就不必再执行函数。
下面，注意Date不是响应式依赖：
computed: {
now: function () {
return Date.now()
}
}
所以使用计算属性
2.v-if与v-show
v-if 是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。
相比之下， v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。
一般来说， v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。
令，v-show不支持template语法。
3.v-for
可以v-for="item in items"也可以of
还有可选第二参数作为前项的索引：
<li v-for="(item, index) in items">
也可以用模板渲染父节点或模板，来渲染多个子块。
<ul id="repeat-object" class="demo">
<li v-for="value in object">
{{ value }}
</li>
</ul>
new Vue({
el: '#repeat-object',
data: {
object: [
{FirstName: 'John'},
{LastName: 'Doe'},
{Age: 30}
]
}
})
写成这样，输出：
{ "FirstName": "John" }
{ "LastName": "Doe" }
{ "Age": 30 }
将object从数组变为如下：
object: {
FirstName: 'John',
LastName: 'Doe',
Age: 30
}
那么输出：
John
Doe
30
此时直接指向的是值了。
还有三参数：v-for="(value, key, index) in object"
还可以用整数，输出10个数字：
<div id="haha">
<span v-for="n in 10">{{ n }}</span>
</div>
var t=1,n=0;
new Vue({
el: '#haha',
data: {
object: {
n:n+t
}
}
})
很好的例子
4.一些数组方法
push()：在末尾添加一个或多个元素，并返回新长度
pop()：删除并返回最后一个元素
shift()：删除并返回第一个元素
unshift()：数组开头添加一个或多个元素，并返回新长度
splice()：删除或替换元素，返回被删除元素。splice（index，number，new ele），用new ele 替换index开始的number个元素
sort()
reverse()
5.类似v-on:click(含参)的注意点
<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>
methods: {
warn: function (message, event) {
// 现在我们可以访问原生事件对象
if (event) event.preventDefault()
alert(message)
}
}
如上，可以传入原生DOM对象。
阻止冒泡还有其他方法，即在v-on上使用事件修饰符。常见事件修饰符有：
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- 只会触发一次点击 -->
<a v-on:click.once="doThis"></a>
有事件修饰符，还有键盘修饰符。
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
<input v-on:keyup.enter="submit">
又新增了按键修饰符，和组合键修饰：
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
6.神奇的v-model
神奇之处在于会根据控件形式自动选取方法更新元素。
例子
<div id="che">
<select v-model="sele" multiple>
<option v-for="op in ops" v-bind:value="op.index">{{op.va}}</option>
</select>
<span>{{sele}}</span>
</div>
new Vue({
el: '#che',
data: {
sele: [],
ops:[
{index:1,va:"s"},
{index:2,va:"ss"},
{index:3,va:"ssr"}
]
}
})
若option里绑定value，则会将value值按所选中的放在数组sele开头。
若没有绑定value，会将{{op.va}}当做value。若写为{{op.index}}则将index当做value。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
避免选择器嵌套：
选择器嵌套最大的问题是将使最终的代码难以阅读。开发者需要花费巨大精力计算不同缩进级别下的选择器具体的表现效果。
选择器越具体则声明语句越冗长，而且对最近选择器的引用(&)也越频繁。在某些时候，出现混淆选择器路径和探索下一级选择器的错误率很高，这非常不值得。
混合宏
在 Sass 中通过 @mixin 关键词声明了一个混合宏，那么在实际调用中，其匹配了一个关键词“@include”来调用声明好的混合宏。
@mixin border-radius{
-webkit-border-radius: 3px;
border-radius: 3px;
}
.box {
@include border-radius;
margin-bottom: 5px;
}
.btn {
@include border-radius;
}
继承 @extend
在 Sass 中也具有继承一说，也是继承类中的样式代码块。在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。如下所示：
//SCSS
.btn {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff;
@extend .btn;
}
.btn-second {
background-color: orange;
color: #fff;
@extend .btn;
}
编译后
//CSS
.btn, .btn-primary, .btn-second {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff;
}
.btn-second {
background-clor: orange;
color: #fff;
}
占位符 %
Sass 中的占位符 %placeholder 功能是一个很强大，很实用的一个功能，这也是我非常喜欢的功能。他可以取代以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。
//SCSS
%mt5 {
margin-top: 5px;
}
%pt5{
padding-top: 5px;
}
.btn {
@extend %mt5;
@extend %pt5;
}
.block {
@extend %mt5;
span {
@extend %pt5;
}
}
编译后（代码相同的会自动整合）
//CSS
.btn, .block {
margin-top: 5px;
}
.btn, .block span {
padding-top: 5px;
}
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
今天在做vue项目的时候，遇到一个问题就是slot插槽的概念。这突然让我想起用过类似于element-ui前端框架时，用他们组件的时候接触过slot，如下图：
这是element-ui对话框的api，当时我记得我百度过，就是这样写就ok了，当时也没深究。
<el-dialog :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
<span slot="title">
我是对话框标题
</span>
<!-- 这边写对话框的内容 -->
<span>我是对话框内容</span>
<span slot="footer" class="dialog-footer">
我是对话框footer
</span>
</el-dialog>
效果是这样：
今天研究了，我就查看了源码：
百度的发现这边有两个概念：
1.单个插槽也叫匿名插槽
slot不带name，如下：
<slot></slot>
一个子组件只有一个匿名插槽，就好比对话框的内容没有被含有slot="xx"属性的标签包裹，那么就会替换掉匿名插槽
2.具名插槽
slot 有name，如下
<slot name='xx'></slot>
具名插槽就可以有多个，就好比对话框含有slot='header'属性的标签会替换掉子组件<slot name='header'></slot>
JavaScript杂记
JavaScript可以直接写入 HTML 输出流
JavaScript 能够直接写入 HTML 输出流中：
之间的代码行包含了 JavaScript: 您可以在 HTML 文档中放入不限数量的脚本。 脚本可位于 HTML 的 或 部分中，或者同时存在于两个部分中。 通常的做法是把函数放入 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。 6. 外部的 JavaScript 也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。 外部 JavaScript 文件的文件扩展名是 .js。 如需使用外部文件，请在
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。
console.log() 方法能够让你看到你在页面中的输出内容，让你更容易调试javascript；与alert相比，console不会打断你页面的操作，console里面的内容非常丰富，你可以在控制台输入 console。
您知道吗?
Note 程序中调试是测试，查找及减少bug(错误)的过程。
8. JavaScript 数据类型
JavaScript 有多种数据类型：数字，字符串，数组，对象等等：
var length = 16; // Number 通过数字字面量赋值
var points = x * 10; // Number 通过表达式字面量赋值
var lastName = “Johnson”; // String 通过字符串字面量赋值
var cars = [“Saab”, “Volvo”, “BMW”]; // Array 通过数组字面量赋值
var person = {firstName:“John”, lastName:“Doe”}; // Object 通过对象字面量赋值
9. Value = undefined
在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。
在执行过以下语句后，变量 carname 的值将是 undefined：
var carname;
10. Undefined 和 Null
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。
11. 声明变量类型
当您声明新变量时，可以使用关键词 “new” 来声明其类型：
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。
JavaScript函数
在JavaScript中，函数即对象，可以随意地被程序操控，函数可以嵌套在其他函数中定义，这样可以访问它们被定义时所处的作用域中的任何变量。
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
<1>JavaScript 函数语法
函数就是包裹在花括号中的代码块，前面使用了关键词 function：
function functionname()
{
执行代码
}
当调用该函数时，会执行函数内的代码。
可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。
lamp JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。
提示：function 中的花括号是必需的，即使函数体内只包含一条语句，仍然必须使用花括号将其括起来。
<2>带有返回值的函数
有时，我们会希望函数将值返回调用它的地方。
通过使用 return 语句就可以实现。
在使用 return 语句时，函数会停止执行，并返回指定的值。
<3>在您仅仅希望退出函数时 ，也可使用 return 语句。返回值是可选的：
function myFunction(a,b)
{
if (a>b)
{
return;
}
x=a+b
}
如果 a 大于 b，则上面的代码将退出函数，并不会计算 a 和 b 的总和。
<3>局部 JavaScript 变量
在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内访问它。（该变量的作用域是局部的）。
您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数能识别出该变量。
只要函数运行完毕，本地变量就会被删除。
局部变量比同名全局变量的优先级高，所以局部变量会隐藏同名的全局变量。
全局 JavaScript 变量
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
向未声明的 JavaScript 变量分配值
如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
这条语句：
carname=“Volvo”;
将声明一个全局变量 carname，即使它在函数内执行。
13. JavaScript 作用域
作用域是可访问变量的集合。
在JavaScript中，能够定义全局作用域或者局部作用域。
HTML 中的全局变量
在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。
实例
//此处可使用 window.carName
function myFunction() {
carName = “Volvo”;
}
你的全局变量，或者函数，可以覆盖 window 对象的变量或者函数。
局部变量，包括 window 对象可以覆盖全局变量和函数。
JavaScript事件
JavaScript 事件
事件是可以被 JavaScript 侦测到的行为。
HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
HTML 事件
HTML 事件可以是浏览器行为，也可以是用户行为。
HTML 网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。
以下是 HTML 事件的实例：
• HTML 页面完成加载
• HTML input 字段改变时
• HTML 按钮被点击
通常，当事件发生时，你可以做些事情。
在事件触发时 JavaScript 可以执行一些代码。
HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。
单引号:
双引号:
常见的HTML事件
下面是一些常见的HTML事件的列表:
事件 描述
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载
15. JavaScript 字符串
JavaScript 字符串用于存储和处理文本。
字符串长度
可以使用内置属性 length 来计算字符串的长度：
字符串属性和方法
原始值字符串，如 “John”, 没有属性和方法(因为他们不是对象)。
原始值可以使用 JavaScript 的属性和方法，因为 JavaScript 在执行方法和属性时可以把原始值当作对象。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
前端开发在开发过程中经常会被UI小姐姐要求开发的各个页面都按照她的理想效果显示，所以就需要前端经常调整自己的浏览器分辨率，而今天笔者给大家带来的就是谷歌调整浏览器分辨率的插件下载配置方法：
点击不同的分辨率，浏览器就会开始切换了。
接下来笔者给大家分享如何下载和配置这个插件：
下载地址：https://me.csdn.net/download/weixin_43606158
或者关注笔者后加笔者QQ/微信笔者私聊发你：1336791007
下载后请先在谷歌浏览器上方输入 chrome://extensions/ 进入到谷歌的拓展程序。
而后将下载后的文件移动到谷歌拓展程序界面上。
PS如果出现程序包无效:“CRX_HEADER_INVALID”。这个提示，请看下方的解决办法链接。
解决 程序包无效:“CRX_HEADER_INVALID” 方法的链接：https://blog.csdn.net/weixin_43606158/article/details/97517104
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
今天给朋友们带来更改this指向的三种方法，以及它们的区别：
一：call用法
window.color = 'red';
document.color = 'yellow';
var s1 = {color: 'blue'};
function changeColor () {
console.log(this.color);
}
changeColor.call() //不传参数默认指向window
changeColor.call(window) //指向window
changeColor.call(document) //指向document
changeColor.call(this) //构造函数的this如果打括号调用默认指向window
changeColor.call(s1) //指向s1对象
//例二：
var Pet = {
words: '...',
speak: function (say) {
console.log(say + '' + this.words)
}
}
Pet.speak('123') //输出123...
var Dog = {
words: 'WangWangWang'
}
Pet.speak.call(Dog,'123') //输出123WangWangWang
二：apply用法：
window.number = 'one';
document.number = 'two';
var s1 = {number: 'three'};
function changeNum() {
console.log(this.number)
}
changeNum.apply(); //one
changeNum.apply(window); //one
changeNum.apply(document);//two
changeNum.apply(this);//one
changeNum.apply(s1);//three
//例二：
function Pet(words){
this.words = words;
this.speak = function(){
console.log(this.words)
}
}
function Dog(words){
Pet.call(this,words);//结果wang
// Pet.apply(this,arguments);//结果wang
}
var dog = new Dog('wang');
dog.speak(); //wang
apply与call的区别：
接收的参数不同
apply()方法接收俩个参数，一个是函数运行的作用域（this），另一个是参数数组。
call()方法第一个参数和apply()方法的一样，但是传递给函数的参数必须一 一列举出来。
语法：
apply([thisObj [,argArray]]);
调用一个对象的一个方法，另一个对象替换当前对象
call([thisObj [,arg1[,arg2[…,argn]]]])；
说明：
如果thisObj是null或者undefined的时候，默认指向window。
如果argArray不是一个有效数组或不是arguments对象，那么将导致一个TypeError，如果没有提供argArray和thisObj任何一个参数，那么Global对象将用作thisObj。
call方法可以用来代替另一个对象的一个方法，call方法可以将一个函数的对象上下文从初始的上下文改变为thisObj指定的新对象，如果没有提供thisObj参数，那么Global对象被用于thisObj。
三：bind的用法：
var obj = {
name: 'WuXiaoDi'
}
function printName() {
console.log(this.name)
}
var wuXiaoDi = printName.bind(obj)
console.log(wuXiaoDi) //function(){...}
wuXiaoDi() //WuXiaoDi
//例二：
function fn(a, b, c) {
console.log(a, b, c);
}
var fn1 = fn.bind(null, 'Dot');
fn('A', 'B', 'C'); //A B C
fn1('A', 'B', 'C'); // Dot A B
fn1('B', 'C'); // Dot B C
fn.call(null, 'Dot'); // Dot undefined undefined
//例三：实现函数珂里化
var add = function(x) {
return function(y) {
return x + y;
};
};
var increment = add(1);
var addTen = add(10);
increment(2) //3
addTen(2) //12
小总结：
Function.prototype.bind(thisArg) - - ES5
能够返回一个新函数，该新函数的主体与原函数主体一致，但当新函数被调用执行时，函数体中的this指向的是thisArg所表示的对象。
Function.prototype.call(this.Arg,val1,val2, …)
调用函数执行，在函数执行时将函数体中的this指向修改为thisArg所表示的对象
val1, val2, … 表示传递给调用函数的实际参数列表
Function.prototype.apply(thisArg, array|arguments)
调用函数执行，在函数执行时将函数体中的this指向修改为thisArg所表示的对象，
array|arguments 表示调用函数的参数列表，使用数组或类数组的格式
区别：
bind与call和apply的区别：
返回值的区别：
bind的返回值是一个函数，而call和apply是立即调用。
参数使用的区别：
bind与call一样是从第二个参数开始将想要传递的参数一 一写入。但call是把第二个及以后的参数作为fn方法的实参传进去，而fn1方法的实参实则是在bind中参数的基础上再往后排。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
一、搭建cli
1.事先安装好cnpm(淘宝镜像)
npm install -g cnpm --registry=https://registry.npm.taobao.org
1
2.cnpm install -g vue-cli
全局安装vue脚手架工具。（下载一次就好）
3.vue init webpack your_project_name
创建一个脚手架项目（每次创建需要）
eg:这时在命令行中有需要你填的信息{
你的项目名；
你的项目描述；
还有你想是否下载的插件（y/n）；
}
4.使用 npm run dev来运行项目
就这样，一个简单的vue开发项目模板就这样下载完成了。
eg：
i 是install 的简写。
全局安装依赖：
cnpm i 依赖名
1
局部安装依赖：
cnpm i -D 依赖名
1
二、vue-router
一般事先安装模板时，已经安装上了。
可以查看package.json中。
如果没有安装
cnpm i -D vue-router
1
安装好之后，在src目录中会生成一个router目录，里面放着index.js，
一般有两种配置
第一种：
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
export default new Router({
routes: [
// 一进入就显示页面
{
path: '/',
redirect: '/index'
},
{
path: '/',
component: pather => require(['../components/common/bodys.vue'], pather),
meta: { title: '主体' },
children:[
{
path: '/index',
component: pather => require(['../components/page/index.vue'], pather),
meta: { title: '系统首页' }
},
{
path: '/biaoge',
component: pather => require(['../components/page/biaoge.vue'], pather),
meta: { title: '基础表格' }
},
{
path: '/Tab',
component: pather => require(['../components/page/Tab.vue'], pather),
meta: { title: 'tab选项卡' }
},
{
path: '/jibenbiaodan',
component: pather => require(['../components/page/jibenbiaodan.vue'], pather),
meta: { title: '基本表单' }
},
{
path: '/fuwenben',
component: pather => require(['../components/page/fuwenben.vue'], pather),
meta: { title: '富文本编辑器' }
},
{
path: '/bianjiqi',
component: pather => require(['../components/page/bianjiqi.vue'], pather),
meta: { title: 'markdown编辑器' }
},
{
path: '/shangchuan',
component: pather => require(['../components/page/shangchuan.vue'], pather),
meta: { title: '文件上传' }
},
{
path: '/scharts',
component: pather => require(['../components/page/scharts.vue'], pather),
meta: { title: 'schart图表' }
},
{
path: '/tuozhuai',
component: pather => require(['../components/page/tuozhuai.vue'], pather),
meta: { title: '拖拽列表' }
},
{
path: '/quanxianceshi',
component: pather => require(['../components/page/quanxianceshi.vue'], pather),
meta: { title: '权限测试', permission: true }
}
]
},
{
path: '/login',
component: pather => require(['../components/page/login.vue'], pather)
},
{
path: '/cuowu404',
component: pather => require(['../components/page/cuowu404.vue'], pather)
},
{
path: '/cuowu403',
component: pather => require(['../components/page/cuowu403.vue'], pather)
},
{
path: '*',
redirect: '/404'
}
],
// 去掉#号
mode:"history"
})
第二种：
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
三、axios
先安装
cnpm i -D axios
1
然后在main.js写入
import axios from 'axios'
Vue.prototype.$axios = axios
1
2
3
这样就可以在组件中使用axios 获取数据了
loadData(){
this.$axios.get(['https://free-api.heweather.com/v5/weather?city=qingdao&key=1b47b16e4aa545eaa55a66f859ac0089'])
.then((response) => {
// success
console.log(response.data);
})
.catch((error) => {
//error
console.log(error);
})
},
四、vuex
1、安装
cnpm i -D vuex
1
2、然后需要手动创建一个文件夹store在src目录当中，
接着在store文件夹中创建store.js
例：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
increment: state => state.count++,
decrement: state => state.count--,
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
3、然后在main.js引入注册
import Vuex from 'vuex'
import store from './store/store'
Vue.use(Vuex)
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
比如在headers.vue使用vuex
<template>
<div class="headers">
<p>{{count}}</p>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: 'headers',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods: {
increment(){
this.$store.commit('increment')
},
decrement(){
this.$store.commit('decrement')
}
},
computed:{
count(){
return this.$store.state.count
},
}
}
</script>
<style scoped lang="scss" >
</style>
五、sass
1、需要安装sass
(1)安装node-sass
(2)安装sass-loader
(3)安装style-loader 有些人安装的是 vue-style-loader 其实是一样的！
cnpm install node-sass --save-dev
cnpm install sass-loader --save-dev
cnpm install style-loader --save-dev
1
2
3
2、接着需要更改build文件夹下面的webpack.base.config.js
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(dirname, '..', dir)
}
module.exports = {
context: path.resolve(dirname, '../'),
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
module: {
rules: [
{
test: /.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /.(png|jpe?g|gif|svg)(\?.)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
},
{ //从这一段上面是默认的！不用改！下面是没有的需要你手动添加，相当于是编译识别sass!
test: /.scss$/,
loaders: ["style", "css", "sass"]
}
]
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}
3、在你需要使用sass的地方写入即可
<style lang="scss" scoped="" type="text/css">
$primary-color: #333;
body {
color: $primary-color;
}
</style>
六、vue UI库
这里已著名的Element组件库为例
https://element.eleme.cn/#/zh-CN/component/carousel
1、安装
npm i element-ui -S
1
2、使用
在main.js写入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
1
2
3
4
3、然后在组件使用就可以了
例：轮播图
<template>
<el-carousel indicator-position="outside">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</template>
<style>
.el-carouselitem h3 {
color: #475669;
font-size: 18px;
opacity: 0.75;
line-height: 300px;
margin: 0;
}
.el-carouselitem:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
</style>
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
在java的学习中，当接触到类这一章的时候，就会避免不了的接触到this关键字。
首先，this关键字指向的是当前对象的引用
作用：
this.属性名称
指的是访问类中的成员变量，用来区分成员变量和局部变量（重名问题）
class Test_08{
public static void main(String [] args){
//调用无参构造函数，
Person p1 = new Person();
p1.setAge(20);
p1.setName("张三");
p1.setGender("男");
System.out.println(""+p1.getName()+" 今年"+p1.getAge()+"岁 性别为："+p1.getGender());
}
}
class Person{
private String name;
private int age;
private String gender;
Person(){}
Person(String name,int age,String gender){
this.name = name;
this.age = age;
this.gender = gender;
}
public void setName(String name){
name = name;
}
public String getName(){
return name;
}
public void setAge(int age){
age = age;
}
public int getAge(){
return age;
}
public void setGender(String gender){
gender = gender;
}
public String getGender(){
return gender;
}
}
对Test_08运行后发现，调用的set方法并没有对 对象中的变量进行赋值，是因为，传入的参数变量名与类中属性变量名重复，因此我们在set方法和有参构造方法中加上了this.类属性名称，这样就可以完成对 对象变量的赋值。如下图：
this.方法名称
用来访问本类的成员方法
this();
访问本类的构造方法
()中可以有参数的 如果有参数 就是调用指定的有参构造
注意事项:
1.this() 不能使用在普通方法中 只能写在构造方法中
2.必须是构造方法中的第一条语句
例如，当我们把this()放在有参构造函数的末尾时，例如用this("哈哈");我们先不管语法是否有错误，试着按照程序的运行来判断一下结果，我们可以看出，当在创建对象时，假定调用含有this（“哈哈”）的构造函数，则刚开始存放的值，会被this（“哈哈”）调用的只含有一个参数的构造函数覆盖，也就是说，最后的name会变成“哈哈”，这是与我们的初衷相违背的，而且运行结果也是报错，
当我们换到构造方法的第一句时，则不会有这种错误，因为它并不会影响到后面name的赋值。
我们接下来把this语句放在构造函数的第一句位置，
就不会有报错
————————————————
版权声明：本文为CSDN博主「BetterShon」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42386014/article/details/81138684
实现导航的左右滑动类似于腾讯新闻，网易等导航，一下贴上代码：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,p,th,td,table,textarea,select{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
th,em{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
img,a img{border:0;}
body{font:12px 'Microsoft YaHei',Arial;color:#666;background-color:#eee;}
.nav{width:100%;overflow:hidden;margin:0 auto;height:35px;position:relative; line-height:35px;background-color:#000;}
.nav ul{position:absolute;left:0;top:0;width:640px;z-index:1;}
.nav ul li{width:80px; float:left; overflow:hidden;}
.nav a{color:#fff;width:100%; display:block; text-decoration:none; text-align:center;}
</style>
<body>
<div class="nav" id="nav">
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单4</a></li>
<li><a href="#">菜单5</a></li>
<li><a href="#">菜单6</a></li>
<li><a href="#">菜单7</a></li>
<li><a href="#">菜单8</a></li>
<li><a href="#">菜单9</a></li>
<li><a href="#">菜单10</a></li>
</ul>
</div>
<script>
window.Swipe = function(b, a) {
if (!b) {
return null
}
this.options = a || {};
this.index = this.options.startSlide || 0;//开始的导航页的第几屏
this.speed = this.options.speed || 300;//速度
this.lwidth = this.options.width || 80;//导航li宽度
this.delay = this.options.auto || 0;//自动滚动菜单速度0为不自动滚动
this.container = b;//在那个容器内
this.element = this.container.children[0];//
this.setup();
if (this.delay != 0) {
this.begin();
}
if (this.element.addEventListener) {
this.element.addEventListener("touchstart", this, false);
this.element.addEventListener("touchmove", this, false);
this.element.addEventListener("touchend", this, false);
this.element.addEventListener("touchcancel", this, false);
this.element.addEventListener("webkitTransitionEnd", this, false);
this.element.addEventListener("msTransitionEnd", this, false);
this.element.addEventListener("oTransitionEnd", this, false);
this.element.addEventListener("transitionend", this, false);//监听过度动画是否结束
window.addEventListener("resize", this, false)
}
};
Swipe.prototype = {
//设置其基本样式
setup: function() {
this.slides = this.element.children;
this.width = Math.ceil(("getBoundingClientRect" in this.container) ? this.container.getBoundingClientRect().width: this.container.offsetWidth);
if (!this.width||this.slides.length < 1) {//没有子节点，获取不到屏幕宽度均返回
return null
}
this.element.style.width = Math.ceil(this.slides.length this.lwidth) + "px";
var a = this.slides.length;
while (a--) {
var b = this.slides[a];
b.style.width = this.lwidth + "px";
}
this.slide(this.index, 0);
},
slide: function(a, c) {
var b = this.element.style;
if (c == undefined) {
c = this.speed
}
//过度效果需要花费时间
b.webkitTransitionDuration = b.MozTransitionDuration = b.msTransitionDuration = b.OTransitionDuration = b.transitionDuration = c + "ms";
this.index = a
//console.log(a this.width,Math.ceil((this.slides.lengththis.lwidth)/this.width));
if(a this.width>(Math.ceil((this.slides.lengththis.lwidth)/this.width)-1)this.width){
// b.MozTransform = b.webkitTransform = "translate3d(" + -((Math.ceil((this.slides.lengththis.lwidth)/this.width)-1) this.width) + "px,0,0)";
// b.msTransform = b.OTransform = "translateX(" + -((Math.ceil((this.slides.lengththis.lwidth)/this.width)-1) this.width) + "px)";
return false;
}
else{
b.MozTransform = b.webkitTransform = "translate3d(" + -(a this.width) + "px,0,0)";
b.msTransform = b.OTransform = "translateX(" + -(a this.width) + "px)";
}
},
getPos: function() {
return this.index
},
//前一个，
prev: function(a) {
this.delay = a || 0;
clearTimeout(this.interval);
// console.log(this.index);
if (this.index) {
this.slide(this.index - 1, this.speed)
//console.log( this.index);
} else {
this.slide(this.length - 1, this.speed)
}
},
//后一个
next: function(a) {
this.delay = a || 0;
clearTimeout(this.interval);
if (this.index < this.length - 1) {
this.slide(this.index + 1, this.speed)
} else {
this.slide(0, this.speed)
}
},
begin: function() {
var a = this;
console.log(a);
this.interval = (this.delay) ? setTimeout(function() {
a.next(a.delay)
},
this.delay) : 0
},
stop: function() {
this.delay = 0;
clearTimeout(this.interval)
},
resume: function() {
this.delay = this.options.auto || 0;
this.begin()
},
handleEvent: function(a) {
switch (a.type) {
case "touchstart":
this.onTouchStart(a);
break;
case "touchmove":
this.onTouchMove(a);
break;
case "touchcancel":
case "touchend":
this.onTouchEnd(a);
break;
case "webkitTransitionEnd":
case "msTransitionEnd":
case "oTransitionEnd":
case "transitionend":
this.transitionEnd(a);
break;
case "resize":
this.setup();
break
}
},
transitionEnd: function(a) {
if (this.delay) {
this.begin()
}
},
onTouchStart: function(a) {
this.start = {
pageX: a.touches[0].pageX,
pageY: a.touches[0].pageY,
time: Number(new Date())
};
// console.log(this.start)
this.isScrolling = undefined;
this.deltaX = 0;
this.element.style.MozTransitionDuration = this.element.style.webkitTransitionDuration = 0;
a.stopPropagation()
},
onTouchMove: function(a) {
if (a.touches.length > 1 || a.scale && a.scale !== 1) {
return
}
this.deltaX = a.touches[0].pageX - this.start.pageX;
if (typeof this.isScrolling == "undefined") {
//判断是横向还是树向滑动
this.isScrolling = !!(this.isScrolling || Math.abs(this.deltaX) < Math.abs(a.touches[0].pageY - this.start.pageY))
}
if (!this.isScrolling) {
a.preventDefault();
clearTimeout(this.interval);
this.deltaX = this.deltaX / ((!this.index && this.deltaX > 0 || this.index == this.length - 1 && this.deltaX < 0) ? (Math.abs(this.deltaX) / this.width + 1) : 1);
this.element.style.MozTransform = this.element.style.webkitTransform = "translate3d(" + (this.deltaX - this.index * this.width) + "px,0,0)";
a.stopPropagation()
}
},
onTouchEnd: function(c) {
var b = Number(new Date()) - this.start.time < 250 && Math.abs(this.deltaX) > 20 || Math.abs(this.deltaX) > this.width / 2,
a = !this.index && this.deltaX > 0 || this.index == this.length - 1 && this.deltaX < 0;
if (!this.isScrolling) {
this.slide(this.index + (b && !a ? (this.deltaX < 0 ? 1: -1) : 0), this.speed)
}
c.stopPropagation()
}
};
//开始调用插件
var slider=new Swipe(document.getElementById('nav'),{speed:500,auto:0,width:100,col:4,});
</script>
</body>
</html>
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com