相对angular 和react ，本人比较喜欢vue,现在的工作项目也在用vue,前两个有朋友在问我在使用vue中有没有遇到一些很难解决的问题，一下我也只能说出一两个，所以索性就抽时间总结一下我在项目中遇到的vue的问题，有写的不对的地方，在您时间还允许的情况下，还劳烦大家告知小妹，我也好尽早修改，以免给看文章的其他同仁带来不必要的麻烦！
=============== 通知：
博主已迁至《掘金》码字，博客园可能以后不再更新，掘金地址：https://juejin.im/post/5a1a6a6551882534af25a86b 请多多关照！！
-------------------在此谢过！-----------
关于vue cli项目搭建，我在之前的文章中有专门写过，有不懂的同学，可参考上一篇 vue cli 框架搭建，
接下来回归主题，说一下我在使用vue时遇到的具体问题。
先陈列一下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=''{{item.img}}''></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 代替
[HMR] bundle has 1 errors
client.js?d90c:161 ./~/_vue-loader@12.2.2@vue-loader/lib/template-compiler?{"id":"data-v-60d18b79","hasScoped":true,"transformToRequire":{"video":"src","source":"src","img":"src","image":"xlink:href"}}!./~/_vue-loader@12.2.2@vue-loader/lib/selector.js?type=template&index=0!./src/components/vuetest.vue
(Emitted value instead of an instance of Error)
Error compiling template:
<div>
<h1>vue测试页面</h1>
<div v-for="item in cityList">
<div>城市名称：{{item.title}}</div>
<div>城市ID：{{item.id}}</div>
<div>城市图片：<img src="{{item.img}}"></div>
</div>
</div>
- src="{{item.img}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="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时，不可以再使用{{}}，例如：
<template>
<a :href='msg'>获取动态数据</a>
<a href='http://www.baidu.com'>百度</a>
</template>
<script>
export default:{
data(){
return:{
msg:'http://www.baidu.com'
}
}
}
</script>
正确代码如下：
<template>
<div v-for="item in cityList">
<div>城市名称：{{item.title}}</div>
<div>城市ID：{{item.id}}</div>
<div>城市图片：<img :src='item.img'></div>
</div>
</template>
<script>
export default:{
data(){
return:{
cityList:[{
title:'北京'，
id:001,
img:'static/logo.png'
},
{
title:'上海'，
id:002,
img:'static/logo.png'
}]
}
}
}
</script>
页面正常显示：
三、关于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渲染成功，但被添加了class 为display：none
四、关于在vue中如何操作DOM元素
-------------------------------------------------------------------------------------------------------
我们都知道vue框架中我们一般操作的都是数据，那么假如我们要操作dom元素使用什么方法呢？下面就来介绍一下！
假如有以下元素，我们要获取这个h2元素的文本，需要给此元素添加ref属性，并赋予名字
<h2 ref='foo'>我是ref的值</h2>
接下来就可以使用这个方法获取到它的文本（注意是this.$refs 不是this.$ref）：
console.log(this.$refs.foo.innerHTML')
那么如何改变h2中的文本呢？
this.$refs.foo.innerHTML='我是新值
这样就可以和以前一样，轻松的操作dom元素了，但是vue还是以操作数据为核心，所以建议尽量少的使用以上方法。
五、router-link 中的tag属性
-----------------------------------------------------------------
在vue路由的router-link标签中有一个属性tag,是我今天在查阅资料时发现的，感觉比较有意思，推荐给大家。
那么我们就给<router-link to='/about'>的标签上添加上tag属性,并赋值
<router-link to='/fenceCenter' >中心点</router-link>
<router-link to='/vuetest'tag='li'>vue测试</router-link>
那么我们看看它和我们正常渲染的<router-link>有什么不同
上面的是我们正常渲染的<router-link> vue会自动解析成<a>标签的形式，下面是我们加了tag属性的渲染成了赋值的<li>标签，是不是很神奇呢？ tag除了可以赋值"li",还 可以赋值成你想要的所有的标签哦！ p,span,h1，div....都可以哦！快去动手试试吧！！
六、vue中的指定路由跳转
-------------------------------------------------------------------------
当有业务需要在某子组件内，点击一个按钮切换路由时，那么我们可以用 this.$router.push('/map')
if(a>3){this.$router.push('/map')}
前提router需要挂在到vue上，这样才可以获取到this.$router ，而且push后面的括号中的路由地址需要在vue的router中注册，在（''）中填写你需要跳转的路由即可
七、vue的路由router中的go方法
---------------------------------------------------------------------------
this.$router.go('-1')
go方法用来用作前进后退导航，有时业务需要我们又一个返回上一页面，那么我们就可以用go来实现。当为‘-1’时后退到上一个路由。
七、编写vue组件
---------------------------------------------------------------------------
现实中我们或许有这样的需求，例如A页面为一个主页面，A1,A2，A3为3个子页面，但A1,A2，A3页面的内容分别比较复杂，需要单页面来编辑，这时我们就需要把A1,A2,，A3写成3个组件，然后全部加载A的主页面上；又或有这样的情况，当子页面的复用率比较高时，同样可以采取使用组件的方式来实现。总之，你可以把你想实现的写成组件，这样第一方便修改，第二页面干净整洁，第三；让别人看起来一目了然。
下面我们就看看，组件到底是怎么实现吧！！！
A页面：
<template> <div>
<h2 style="color:red">我是主页面</h2>
<content><content> //我是加入的组件
</div> </template> <script>
import content from './content' //找到组件的位置 引入
export default { name: "", data() { return { } },
components:{
content //将组件写入模板内才可生效，当有多个组件，看用逗号分开
},
mounted() {
},
methods: {}
}
</script>
<style scoped>
</style>
content组件页面： 组件页面就是普通页面，当然组件页面的事件也是会带到主页面的。
<template>
<div @click="foo()">
我是组件页面
</div>
</template>
<script>
export default {
name: "",
data() {
return {
}
},
mounted() {
},
methods: {
foo(){
alert("我是好人")
}
}
}
</script>
<style scoped>
</style>
这时我们来看一下效果：
这样你想要的效果就有了哦！
那么还需要注意一点：如果你的组件名字是驼峰式写法，那么在
<template>
<div>
我是主页面
<content-f> </content-f> //这里要这样写
</div>
</template>
<script>
import contentF from './contentF' //找到组件的位置 引入
export default {
name: "",
data() {
return {
}
},
components:{
contentF //将组件写入模板内才可生效，当有多个组件，看用逗号分开
},
mounted() {
},
methods: {}
}
</script>
<style scoped>
</style>
以上就是最简单的组件的写法！
八、vue中watch的用法
之前在用vue的时候，有见同事在使用vue，可是自己没有用过，今天就来看一下，到底watch是个什么东东呢？
在vue的官网是这么介绍的：把它命名为 观察者
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的 watcher。这是为什么 Vue 通过 watch 选项提供一个更通用的方法，来响应数据的变化。当你想要在数据变化响应时，执行异步操作或开销较大的操作，这是很有用的。
通俗点讲，就是在vue中有一个watch,它可以监听你的数据是否发生变化，一旦发生变化，可以进行某些操作，那么我们就来试试：
<template>
<div>
<button @click="foo()">点击按钮</button>
<div>{{value}}</div>
</div>
</template>
<script>
export default {
name: "",
data() {
return {
value:1,
}
},
mounted() {},
watch:{
value:function(val,oldval){
console.log(val,oldval)
}
},
methods: {
foo() {
this.value=5
}
}
}
</script>
<style scoped>
</style>
看一下结果：当value被改变时，会在后台打印出当前的值和改变前的值：
但当我们再次重复上一次的动作时，并不会再次打印结果，那是因为value值改变成5后，再次点击，还是同样的值，value的值并没有再次发生变化。
以上为9月27号更新内容
--------------------------------------------------------------------- ----
1910
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
