一只萌新小白的vue使用笔记-优快云博客

写在开头：

首先，感觉浏览！！！本人前端菜鸟一枚，第一次写掘金博客，分享的是最近一年以来关于vue的一些使用心得，由于个人能力有限涉及的深度较浅，不过分享的都是平常遇到的一些实际项目中遇到的问题，萌新视角写的文档，希望路过的各位大佬指点，求轻喷。

先力推一个vue的官方组件库吧，基本上vue的各种实用组件里边都有的。地址：github.com/vuejs/aweso…

废话不多，开始！

问题：vue路由懒加载

思路：

const Investment= resolve => require(['../components/template/template.vue'], resolve);

问题：使用v-html时，v-html里的类名样式没有生效

思路：

EG:在.textContent下使用v-html生成的.blueText

.textContent >>> .blueText{  color: rgb(46,117,181);  font-weight:bold;}复制代码

问题：vue在引人静态资源时有报错

报错描述如下：

// style-loader: Adds some css to the DOM by adding a <style> tag
  // load the styles
var content = require("!!../../../css-loader/index.js?{\"minimize\":false,\"sourceMap\":false}!./swiper.css");
-----------------------------------------------------------------------------------------------------^
   if(typeof content === 'string') content = [[module.id, content, '']];
   if(content.locals) module.exports = content.locals;
   // add the styles to the DOM复制代码

思路：

webpack.base.conf.js加上

{  test: /\.css$/,  loader: 'style-loader!css-loader',  include: [],//加上这个  exclude: /node_modules/}复制代码

问题：在已封装好的组件上添加方法

思路：使用.native

<router-link :to="item.menuUrl" @click.native="toggleName=''"> 
  <i :class="['fzicon',item.menuIcon]"></i> <span>{{item.menuName}}</span> 
</router-link>复制代码

问题：页面的访问路径都是以#xxx的方式访问

思路：

在创建的 router 对象中，如果不配置 mode，就会使用默认的 hash 模式，该模式下会将路径格式化为 #! 开头。

添加 mode: 'history' 之后将使用 HTML5 history 模式，该模式下没有 # 前缀，而且可以使用 pushState 和 replaceState 来管理记录。

问题：params和query的区别

思路：

params类似于post的方式传参属于隐式传递，query类似于get的方式传参在链接上可见。

问题：从上层组件带过来的数据刷新后没有了导致报错

思路：

1.可采用query的方式从上层带值过来。

2.通过cookie/storage方式传值。

3.vuex/eventBus。

4.当前页面添加判断逻辑，没获取到数据可以返回上层路由。

问题：我只想阻止某个元素冒泡，不想添加新事件怎么弄

思路：

@click.stop后面也可以不放事件，单独的用来阻止事件冒泡。

问题：为什么有的图片地址需要用require的方式引入，有的不用

思路：

vue里如果要通过js指定图片地址时必须用require引入图片，否则打包的时候不会被打包进去。

如通过判断某个值确定是使用a图片还是b图片可以使用方法如下：

问题：如何抓取组件元素，调取组件内部方法

思路：

<scroll ref="scrollData" ></scroll>
this.$refs.scrollData.show();//调用scroll组件内的show方法复制代码

问题：使用vuex时遇到报错Do not mutate vuex store state outside mutation handlers

思路：

这是因为vuex不允许在mutation之外的地方去修改state的数据，这时可以考虑把原数据复制一份再修改

问题：watch computed methods的区别

思路：

methods只要发生重新渲染methods就会调用----每次都会重新计算

computed依赖缓存，如果相关依赖没有发生变换就直接返回之前的值----数没有发生改变就使用之前的缓存。

所以在数据量大，需要缓存的时候尽量使用computed，不需要缓存的时候用methods。

watch相对没有computed自动，手动设置使代码变的复杂，总之尽量使用computed来监听数据的变化

问题：多个组件要使用一些共用的方法、数据、以及其他钩子

思路：

mixins可以实现公用整个钩子，包含data/methods/watch/computed....

具体使用请参阅官方文档

问题：v-show和v-if的区别

思路：

v-show采用的是display:none的方式隐藏,v-if采用的是移除元素的方式实现隐藏，如果频繁切换的话建议使用v-show

问题：关于动态绑定类名、值

思路：

正常的写法都是 <span :class="{'active':selectType===1,'active2':selectType===2}"></span>

当然这里如果涉及到复杂的计算的话也是可以放入一个方法的,取值也一样
<span :class="getRankCls(index)">{{getRankText(index)}}</span>
复制代码

问题：父子组件通信

思路：

父->子：

父：<parentConpent  :name="parentName"></parentConpent >
子：props["name"]复制代码

子->父

子：this.$emit('数据名称'，要发送的数据);
this.$emit('child-msg',val1,val2)
父： <parentConpent  @child-msg="getData(val,$event)"></parentConpent>
复制代码

问题：关于路由跳转的各种路径

思路：

<router-view to="/home"></router-view>to="/home"----表示跳转到根目录下的hometo="home"-----表示跳转到当前目录下的home:to="home"------动态绑定地址 这里的home为地址 home需要在data里定义:to="'home'"------动态绑定地址 这里的home为字符串:to="{path:'banana',param:{color:'yellow'}}"//传参数也可以用命名视图的方式进行跳转：<router-link :to="{name:'applePage'}"></router-link>复制代码

问题：关于路由常用的push和replace区别

思路：

router.push({path:'home'})
//添加一个路由，表现为切换路由，本质是利用h5的history,只修改了hash最后面的数据router.replace({path:'home'})
//替换一个路由 不会刷新页面---不会往histroy里添加,也只修改了hash最后面的数据 用replace的方式进行路由跳转，点击返回按钮后不会返回到上一个页面复制代码