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

说到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样式，除当前组件，不会在其他组件生效并且不会影响到其他组件页面渲染。

<style scoped> </style>

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

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

<template>

    <div  v-for="item in cityList">

        <div>城市名称：{
    {item.title}}</div>

        <div>城市ID：{
    {item.id}}</div>

        <div>城市图片：<img src=''https://user-gold-cdn.xitu.io/2017/11/26/15ff7324b8313b05''></div>  //这行是报错的

    </div>

</template>

<script>
     export default:{
         data(){
　　        return:{
　　　　　　　　cityList:[{
                   title:'北京'，
　　　　　　　　　　　 id:001,
                   img:'static/logo.png'
             },
             {
                   title:'上海'，
　　　　　　　　　　　 id:002,　　　　　　　　
                　　img:'static/logo.png'

             }]
　　　　　　 }
　　　　}
　　}
</script>

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