vue实战中遇到的`坑`

vue实战中遇到的`坑`

也可能是因为接触vue时间也不长，经常落入不知名的‘坑’中，对于我这个菜鸟来说，每次‘落坑’无疑是一场不小的灾难。前两天有个朋友在问我，在使用vue中有没有遇到一些很难解决的问题，一下我也只能说出一两个，正所谓‘光说不练，假把式’，所以索性就抽时间总结一下我在项目中遇到的vue的问题，也贴出了效果图片，这样看起来也比较清晰。有写的不对的地方，在您时间还允许的情况下，还劳烦大家告诉我哦，我也好尽早修改，以免给看文章的其他同仁带来不必要的麻烦！（当前版本："[email protected]"）
-------------------在此谢过！-----------

说到vue的实战，不得不说vue项目创建，那么关于vue cli项目搭建，我在之前的文章中有专门写过，有不懂的同学，可参考我的第一篇文章：

vue cli 框架搭建

---

先陈列一下vue的整体架构：

事件：methods:{  };   

过滤器：filters:{  };

计算：conputed：{  }；

观察者：watch:{  };

钩子函数：

    created:function(){
      //创建  
    },
    mounted:function(){ 
      //挂载
    },
    updated:function(){
      //更新  
    },
    destoryed:function(){
     // 销毁 
    }

一、使当前组件的css，只在当前组件中有效。

在vue的每个组件中，都可以自定义css和 js,那么如果只希望当前的css只在当前页面生效，可以在style 的标签这样书写，这样当前页面的所有css样式，除当前组件，不会在其他组件生效并且不会影响到其他组件页面渲染。

二、关于循环中的img的src赋值的问题

在vue中的循环是使用v-for 来实现的，在标签中注入v-for,在接下来使用到的地方就可以直接使用。

报错如下：(这里意思是在“src”属性插值将导致404请求。使用v-bind：src 简写为：src 代替)

[HMR] bundle has 1 errors
client.js?d90c:161 ./~/[email protected]@vue-loader/lib/template-compiler?{"id":"data-v-60d18b79","hasScoped":true,"transformToRequire":{"video":"src","source":"src","img":"src","image":"xlink:href"}}!./~/[email protected]@vue-loader/lib/selector.js?type=template&index=0!./src/components/vuetest.vue
(Emitted value instead of an instance of Error) 
  Error compiling template:

  

     
vue测试页面

       
"item in cityList">

      　　　　
城市名称：{{item.title}}

      　　　　
城市ID：{{item.id}}

     　　　　 
城市图片："https://user-gold-cdn.xitu.io/2017/11/26/15ff7324b8313b05">
  

     
  

  - src="https://user-gold-cdn.xitu.io/2017/11/26/15ff7324b8313b05": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of 
"{{ val }}">, use 
"val">.

 @ ./src/components/vuetest.vue 10:2-340
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

因为vue官网在介绍v-bind时，不可以再使用{{}}，例如：

正确代码如下：

三、关于v-if和v-show的区别

在vue中有两种隐藏元素的方式，那就是v-if和v-show,但是两者有什么区别呢？什么时候用v-if,什么时候用v-show呢？

1.先说最大的区别， v-if通过条件判断来渲染条件块，当为假值时，当前条件块的所有 DOM元素不进行渲染； v-show同样也是条件判断，但如果 v-show的值为假值时，当前条件块虽不会在页面显示，但已经渲染完毕，只是属性设置成了 display：none.总结就是 v-if 是通过条件判断来添加和删除 DOM元素。 v-show是通过 display：block和 display:none来控制元素的显示隐藏。

2. v-if 是有惰性的，如果初始条件为假值，则直接什么也不做，只有在条件变为真时才开始局部编译； v-show是在任何条件都被编译，然后被缓存，而且 DOM元素保留，即使为假值时，在后台仍然可以看到 DOM元素已经被渲染出来。

3. v-if适合在条件不太可能变化时使用，v-show适合频繁切换。

4. v-if后面可以跟 v-else,或 v-else-if,但 v-show不可以

当v-if和v-show两个值都为true时的渲染结果，都正常渲染

当v-if和v-show的值都为假值时：页面没有渲染，v-if未渲染dom元素，v-show渲染成功，但被添加了style为display：none。

四、关于在vue中如何操作DOM元素。

我们都知道vue框架中我们一般操作的都是数据，那么假如我们要操作dom元素使用什么方法呢？下面就来介绍一下！

假如有以下元素，我们要获取这个h2元素的文本，需要给此元素添加ref属性，并赋予名字。

'foo'>我是ref的值

接下来就可以使用这个方法获取到它的文本（注意是this.$refs不是this.$ref）：

console.log(this.$refs.foo.innerHTML')

那么如何改变h2中的文本呢？

this.$refs.foo.innerHTML='我是新值

---

这样就可以和以前一样，轻松的操作dom元素了，但是vue还是以操作数据为核心，所以建议尽量少的使用以上方法。

五、探究router-link中的tag属性。

在vue路由的router-link标签中有一个属性tag,是我今天在查阅资料时发现的，感觉比较有意思，推荐给大家。

那么我们就给的标签上添加上tag属性,并赋值:

'/fenceCenter' >中心点
'/vuetest'tag='li'>vue测试

那么我们看看它和我们正常渲染的有什么不同

---

---

上面的是我们正常渲染的 vue会自动解析成 标签的形式;

下面是我们加了 tag属性的渲染成了赋值的

标签。

是不是很神奇呢？ tag除了可以赋值li,还可以赋值成你想要的所有的标签哦！ p,span,h1，div....都可以哦！快去动手试试吧！！

---

六、vue中的指定路由跳转

在我们的实际业务中，有时需要在某一组件内，点击一个按钮或者是点击一个链接切换跳转到其他组件，也就是跳转路由，我们可以试试下面的方法：

//直接跳转
this.$router.push('/map')

//条件允许时跳转
if(this.data){
    this.$router.push('/map')
}

注意：router需要挂在到vue实例上，这样才可以获取到this.$router，而且push后面的括号中的路由地址，也需要在vue的router中有注册，最后，在（''）中填写你需要跳转的路由即可完成跳转。

七、vue的路由router中的go方法
上面刚刚有讲到路由router，接下来再讲一个和router相关的方法go，这个方法是用作前进后退导航来使用的，有时实际业务需要我们添加一个返回上一页面的功能，那么我们就可以用go来实现。当为‘-1’时就可以后退到上一个路由页面。

this.$router.go('-1')

八、轻松编写vue组件

vue是一个单页面应用，那么就会涉及到组件的问题，例如A页面为一个主页面，A1,A2，A3为3个子页面，但A1,A2，A3页面的内容分别比较复杂，需要单页面来编辑，这时我们就需要把A1,A2,A3写成3个组件，然后全部加载A的主页面上；又或有这样的情况，当子页面的复用率比较高时，同样可以采取使用组件的方式来实现。总之，你可以把你想实现的写成组件，这样第一方便修改，第二页面干净整洁，第三；让别人看起来一目了然。
下面我们就看看，组件到底是怎么实现吧！！！

A页面：

A页面的子页面（content组件页面）： 组件页面就是普通页面，当然组件页面的事件也是会带到主页面的。

这时我们来看一下效果：

---

---

这样你想要的效果就有了哦！

那么还需要注意一点：如果你的组件名字是驼峰式写法，那么按照以下方式修改:

八、在vue中观察者watch的用法

在vue的官网是这么介绍的：把它命名为 观察者模式
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的 watcher。这是为什么vue通过watch。 选项提供一个更通用的方法，来响应数据的变化。当你想要在数据变化响应时，执行异步操作或开销较大的操作，这是很有用的。
通俗点讲，就是在vue中有一个watch,它可以监听你的数据是否发生变化，一旦发生变化，可以进行某些操作，那么我们就来试试：

我们点击一下，看一下结果：当value被改变时，会在后台打印出当前的值和改变前的值：

---

---

但当我们再次重复上一次的动作时，并不会再次打印结果，那是因为value值改变成5后，再次点击，还是同样的值，value的值并没有再次发生变化。

接下来我还会持续追加，看文章的小伙伴们可以添加一下关注哦！

    作者：晴天de雨滴    
    出处：https://juejin.im/post/5a125827518825293b4fea8a
    版权所有，欢迎保留原文链接进行转载：)

如果你对我对文章感兴趣或者有些建议想说给我听