vue项目中遇到的一些问题

或访问：https://github.com/littleHiuman/experiences-about-vue

 欢迎补充！

---

 

vuex 状态

vue-cli 命令行

vue vue

vue-router 路由

es6

eslint

 

---

 Js写法 规范。

eslint常见问题

 

brace-style？

no-sequences？

block-spacing？

 

比较时，使用全等号

全部的switch语句都必需要有一个default分支

yoda：yoda条件语句就是对象字面量应该写在比较操做符的左边，而变量应该写在比较操做符的右边（默认的规则要求，变量写在左边而字面量写在右边）

个别符号以及关键字之间须要空格（好比function，逗号，大括号，运算符）

逗号在行尾出现/行首

不以新行开始的块 { 前面要不要有空格

 

当即调用函数的写法：

(function() {
　　// body 
}());

 

只能使用单引号

最后必须有一行空行，

不能有多余空行

不能有多余空格

空位/制表符距离为2

能够设置带分号，不然js中不能带分号。

"semi": [2, "always"]

 

不能 定义了却未使用的变量

alias中定义的简称只能用于js部分。

模块必须有一个根元素

整个页面有切换动画，那么页面的根元素不能有其余样式影响

Vue实例中 最后一个属性末不须要加逗号

对象里的最后一项，不须要加逗号

 

---

 引入css文件：

1. index.html中引入，

2. <style></style>中引入，须要@import，

或者另一个<style src=""></style>

3. main.js中引入须要写loader（inport/require）

require('!style-loader!css-loader!less-loader!./assets/css/common_m.less')

PS：在webpack中配置好了loader以后，不须要在引入文件时写loader和文件后缀。 

 

---

 cssloader：

{
　　test: /\.css$/,
　　exclude: /node_modules/,
　　loader: "style-loader!css-loader",
},
{
　　test: /\.less$/,
　　exclud: /node_module/,
　　loader: "style-loader!css-loader!less-loader",
},

 

---

 

// <router-view></router-view>与写的位置无关

 

---

 

path.join(__dirname,'..');

 

---

 

this.$set(this, '属性', '值')

 

---

 css scoped 仅本组件

 

---

 

对象能够存图片。使用require便可。

images: {
　　error: require('./toast-error.png'),
　　success: require('./toast-success.png'),
　　load: require('./toast-load.gif'),
　　waiting: require('./toast-hourglass.svg')
}

 

---

 

border。各屏幕分辨率不一样出现的粗细问题。

公共部分。写成组件。利用传参改变样式/内容。

Ajax。axios。

跨域问题的解决：1.服务器端协助配置。2.jsonp。3.devServer配置代理。

能用data数据解决的问题，不用方法解决。如取反。长度。是否空/false/true。（Vue是数据驱动而不是结构驱动）

v-bind:style src to ...

 

---

 

路由传参。$route。

历史记录切换。router-link to/:to或者router.push()/router.replace()

 

#router.push(location) 导航到不一样的 URL

// 声明式
<router-link :to="...">

// 编程式
router.push(...)

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

// 带查询参数，变成 /register?plan=private

router.push({ path: 'register', query: { plan: 'private' }})

 

#router.replace(location) 它不会向 history 添加新记录，而是替换掉当前的 history 记录。

// 声明式
<router-link :to="..." replace>

// 编程式
router.replace(...)

 

#router.go(n) 在 history 记录中向前或者后退多少步，相似 window.history.go(n) 值能够正能够负

 

#综合使用

const router = new VueRouter({
　　routes: [
　　　　{
　　　　　　path: '/user/:userId',
　　　　　　name: 'user',
　　　　　　component: User
　　　　}
　　]
})

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

router.push({ name: 'user', params: { userId: 123 }})

 

这两种方式都会把路由导航到 /user/123 路径。

 

---

 

// 命名视图

// https://router.vuejs.org/zh-cn/essentials/named-views.html

// https://jsfiddle.net/posva/6du90epg/

// 有时候想同时（同级）展现多个视图，而不是嵌套展现，例如建立一个布局，有 sidebar（侧导航） 和 main（主内容） 两个视图，这个时候命名视图就派上用场了。

// 你能够在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。若是 router-view 没有设置名字，那么默认为 default。

<router-view class="view one"></router-view>

<router-view class="view two" name="a"></router-view>

<router-view class="view three" name="b"></router-view>

// 一个视图使用一个组件渲染，所以对于同个路由，多个视图就须要多个组件。确保正确使用 components 配置（带上 s）：

const router = new VueRouter({
　　routes: [
　　　　{
　　　　　　path: '/',
　　　　　　components: {
　　　　　　　　default: Foo,
　　　　　　　　a: Bar,
　　　　　　　　b: Baz
　　　　　　}
　　　　}
　　]
})

 

---

 

重定向 和 别名

 

---

切换时清空历史记录。数据丢失。sessionStorage。

相对路径。

append。concat。

渲染成某个标签。tag

能够在router-link内嵌套其余内容。

 

---

 

类型都是Object

$route.params（一个 key/value 对象，包含了 动态片断 和 全匹配片断，若是没有路由参数，就是一个空对象。）

$route.query（一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，若是没有查询参数，则是个空对象。）

 

<div>
    <router-link :to="{ name: 'Hello' , params: { userId: 123 }}">
        click1
    </router-link>
</div>

<div>
    <router-link :to="{ path: 'hello' , query: {show: 2}}">
        click2
    </router-link>
</div>

console.log(this.$route.params.userId)

console.log('top is params, bottom is query')

console.log(this.$route.query.show)

 

---

 watch：

watch: {
　　'$route' (to, from) {
　　// 对路由变化做出响应...
　　}
}

 

---

v-show和v-if 。v-if为假直接不渲染。v-show为假display none。

当 v-if 与 v-for 一块儿使用时，v-for 具备比 v-if 更高的优先级。

我的建议：外容器overflow hidden，内容器overflow scroll。

 

---

 

过渡效果：

<transition name="fade"></transition>

.fade-enter-active, .fade-leave-active {
　　-webkit-transition: opacity .7s;
　　transition: opacity .7s;
}

.fade-enter, .fade-leave-active {
　　opacity: 0
}

 

---

 

路由钩子：判断从哪一个路由过来，到哪一个路由。而后跳转到哪一个路由。（全局钩子。局部钩子。）

component页面内也能够监听路由。

 

---

 

滚动行为。历史记录之间切换。页面位置。返回对象。

scrollBehavior (to, from, savedPosition) {
　　return { x: 0, y: 0 }
}

 

---

 

锚点的实现。经过scrollTop。或滚动行为。

路由元信息。路由嵌套。

 

---

懒加载。

四、在异步加载页面中载嵌入异步加载的组件时对页面是否会有渲染延时影响？

答：会， 异步加载的组件将会比页面中其余元素滞后出现， 页面会有瞬间闪跳影响；

解决方案：由于在首次加载组件的时候会有加载时间， 出现页面滞后， 因此须要合理的进行页面结构设计， 避免首次出现跳闪现象；

At all:

　　一、路由页面以及路由页面中的组件全都使用懒加载

　　优势：（1）最大化的实现随用随载

　　　　　（2）团队开发不会由于沟通问题形成资源的重复浪费　　　　

　　缺点：（1）当一个页面中嵌套多个组件时将发送屡次的http请求，可能会形成网页显示过慢且渲染良莠不齐的问题

　　二、路由页面使用懒加载， 而路由页面中的组件按需进行懒加载, 即若是组件不大且使用不太频繁, 直接在路由页面中导入组件, 若是组件使用较为频繁使用懒加载

　　优势：（1）可以减小页面中的http请求，页面显示效果好

　　缺点：（2）须要团队事先交流， 在框架中分别创建懒加载组件与非懒加载组件文件夹

　　三、路由页面使用懒加载，在不特别影响首页显示延迟的状况下，根页面合理导入复用组件，再结合方案2

　　优势：（1）合理解决首页延迟显示问题

　　　　　（2）可以最大化的减小http请求， 且作其余他路由界面的显示效果最佳

　　缺点：（1）仍是须要团队交流，创建合理区分各类加载方式的组件文件夹

export default new Router({
　　routes: [
　　　　{
　　　　　　path: '/',
　　　　　　component: resolve => require(['components/Hello.vue'], resolve)
　　　　},
　　　　{
　　　　　　path: '/about',
　　　　　　component: resolve => require(['components/About.vue'], resolve)
　　　　}
　　]
})

　　

// solve：

// components/page

 

---

 <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 类似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出如今父组件链中。

当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

主要用于保留组件状态或避免从新渲染。

 

---

 组件：

当注册组件（或者 props）时，可使用 kebab-case ，camelCase ，或 TitleCase 。Vue 不关心这个。

// 在组件定义中
components: {

　　// 使用 kebab-case 形式注册
　　'kebab-cased-component': { },

　　// register using camelCase
　　'camelCasedComponent': { },

　　// register using TitleCase
　　'TitleCasedComponent': { }
}

 

在 HTML 模版中，请使用 kebab-case 形式：

<!-- 在HTML模版中始终使用 kebab-case -->

<kebab-cased-component></kebab-cased-component>

<camel-cased-component></camel-cased-component>

<title-cased-component></title-cased-component>

 

当使用字符串模式时，能够不受 HTML 的 case-insensitive 限制。

<!-- 在字符串模版中能够用任何你喜欢的方式! -->

<my-component></my-component>

<myComponent></myComponent>

<MyComponent></MyComponent>

 

---

 

若是组件未经 slot 元素传递内容，你甚至能够在组件名后使用 / 使其自闭合：

<my-component/>

固然，这只在字符串模版中有效。由于自闭的自定义元素是无效的 HTML ，浏览器原生的解析器也没法识别它。

 

---

component命名要求：

1. 检查名称是否与 HTML 元素或者 Vue 保留标签重名，不区分大小写。（经常使用HTML标签）

2. 检查组件名称是否以字母开头，后面跟字母、数值或下划线。

 

---

使用 Virtual DOM 解析模板时，不会将模板中的标签名转成小写，而是保留原始标签名。而后，使用原始的标签名进行匹配组件。

例如， <MyComponent></MyComponent> 不会转为为小写形式，直接以 MyComponent 为基础开始匹配。

固然，匹配的规则依次匹配：原标签名、camelCase化的标签名、PascalCase化的标签名。

//以前在 1.0 不能正常运行的示例代码，在 2.0 中能够正常运行了：

Vue.component('MyComponent', {
　　template: '<div>hello, world</div>'
})

new Vue({
　　el: '#app',
　　template: '<MyComponent></MyComponent>'
})

 

---

 

在 Vue 1.0 和 2.0 中还有一种定义组件模板的方式，即便用 DOM 元素。在这种状况下，解析模板时仍然会将标签转为小写形式。因此下面的代码，在 1.0 和 2.0 均不能正常运行。

// index.html
<div id="app">
　　<MyComponent></MyComponent>
</div>

// main.js
Vue.component('MyComponent', {
　　template: '<div>hello, world</div>'
})

new Vue({
　　el: '#app'
})

 

---

 因为 JavaScript 的限制， Vue 不能检测如下变更的数组：

当你利用索引直接设置一个项时，例如：

vm.items[indexOfItem] = newValue

 

当你修改数组的长度时，例如：

vm.items.length = newLength

 

为了解决第一类问题，如下两种方式均可以实现和 vm.items[indexOfItem] = newValue 相同的效果， 同时也将触发状态更新：

// Vue.set

Vue.set(example1.items, indexOfItem, newValue)

// Array.prototype.splice`

example1.items.splice(indexOfItem, 1, newValue)

 

为了解决第二类问题，你也一样可使用 splice：

example1.items.splice(newLength)

 

---

 父组件给子组件传参，经过props属性。还能够定义类型

https://cn.vuejs.org/v2/guide/components.html#Prop-验证

除了如下定义一种类型的写法，还有多种类型，必传且是某个类型，某个类型且有默认值，某个类型但默认值由一个工厂函数返回，或者是自定义

props: {
　　username: String,
}

// 全局注册的组件的写法：
props: ['myMessage'],

 

子组件给父组件传参，经过this.$emit('方法', '内容')

 

---

vertical-align: top;

两个span对齐 / 图片和文字对齐 / inline-block元素 .......

 

---

 

 字体图标。

 

---

 

一行文字超出省略号：

white-space: nowrap
overflow: hidden
text-overflow: ellipsis

 

空白间隙去掉的方法：

font-size: 0;

// 或者 两个标签之间紧贴着。

 

---

 filter相似滤镜效果。模糊效果。

filter: blur(10px)

 

同上相似。模糊效果（仅对背景生效，仅限iOS系统）

backdrop-filter: blur(10px)

 

---

 type，给参数 / 变量定义类型。

 

---

 

computed，内容变时会更新，不然会缓存起来。

若是是传参等方式获得值，须要判断值是否为空，不然会报值为undefined的错。

 

---

 

使用变量 / 产量拼接内容，而不使用字符串拼接内容。

 

---

 

各子元素不固定宽 / 高，可是整个布局占固定值时，flex布局。尽可能用block元素。

flex的默认值为0 1 auto

flex是放大比例（flex-grow） 缩小比例（flex-shrink）占据的空间（flex-basis）的简写属性

能够填auto（至关于 1 1 auto）和none（0 0 auto）

flex: 1（至关于 1 1 0%）

使用flex属性后，该元素最好添加width属性，值为flex-basis定义的值。 

 

---

 

vue项目中，不用写CSS的兼容性代码。

由于vue-loader在编译.vue文件的时候，使用了Postcss的工具，它会给有兼容性问题的属性添加兼容性代码。

它是根据can i use官网写的代码。

写在<style></style>内才会生效。在html中添加style属性是不会添加兼容性代码的。

 

---

 

换行问题：

v-html能够直接加<br>进行换行，v-model中无效

例外：textarea标签使用v-model时，可使用\r进行换行

 

---

 

实现垂直居中的方式：

父元素： display: table，

子元素： display: table-cell;vertical-align: middle;
不管一行或多行。

 

---

 

删除线效果 text-decoration: line-through

 

---

 iScroll

 

---

 

ref的使用：

在父页面调用子组件的标签：

在父页面中的组件上加ref。而后在子组件中的某个标签加ref。便可。

 

---

 nextTick

将回调延迟到下次 DOM 更新循环以后执行。

https://cn.vuejs.org/v2/api/#vm-nextTick

new Vue({
  // ...
  methods: {
    // ...
    example: function () {
      // 修改数据
      this.message = 'changed'
      // DOM 尚未更新
      this.$nextTick(function () {
        // DOM 如今更新了
        // `this` 绑定到当前实例
        this.doSomethingElse()
      })
    }
  }
})

 

---

 

 

box-sizing: border-box

 

---

:disabled="type == '值'"

 

---

:class = name

name能够是computed

 

---

$dispatch 和 $broadcast在vue2.0中已经弃用，推荐使用一个专用的状态管理层如：Vuex 。

或者子组件和父组件之间 相互传参。

 

---

getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。

 

---

点击事件。取消冒泡。

v-on:click.stop="doThis"

阻止默认事件。

v-on:click.prevent="doThis"

https://cn.vuejs.org/v2/guide/events.html#事件修饰符

 

---

 

判断页面来源。

https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

 

---

 

组件内部的方法，命名建议以两个下划线开头

外部传参方法等，不用两个下划线开头。

 

---

padding取%值，

> %，规定基于父元素的宽度的百分比的内边距。

 

---

给按钮加padding。方便点击

或者整个部分能够点击。

 

---

过滤：filter

// 计算属性
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

// 或者，你也能够在计算属性不适用的状况下 (例如，在嵌套 v-for 循环中) 使用 method 方法：
<li v-for="n in even(numbers)">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

// -----------------
// 过滤器函数
<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

// PS： 为了在其余指令中实现更复杂的数据变换，你应该使用计算属性。

new Vue({
  // ...
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

// 过滤器能够串联：
{{ message | filterA | filterB }}

// 过滤器是 JavaScript 函数，所以能够接受参数：
{{ message | filterA('arg1', arg2) }}

// 这里，字符串 'arg1' 将传给过滤器做为第二个参数， arg2 表达式的值将被求值而后传给过滤器做为第三个参数。

 

https://cn.vuejs.org/v2/guide/list.html#显示过滤-排序结果
https://cn.vuejs.org/v2/guide/syntax.html#过滤器

 

---

export 和 export default

http://es6.ruanyifeng.com/#docs/module#export-命令
http://es6.ruanyifeng.com/#docs/module#export-default-命令

 

---

 

切换组件时，但愿保留组件的状态时，加上keep-alive 便可