Vue 编写容易出现的问题
Vue 实现 Tab切换实现的场景很多，比如，利用vue-router、利用第三方插件、利用组件等等.
我用的是组件，为什么不用路由，有3个原因：
- 1、因为我认为使用路由，再切换tab的时候，路劲地址是变化的，比如：/#/home、/#/app等等，这样做==Native hybrid==的同学就会发愁了，尤其是返回按钮，需要设置历史数据，我个人觉得太麻烦！
- 2、根据需求出发。
- 3、技术太low。
综上所述，上面已经介绍完我为什么要使用组件了
index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>component</title>
<style type="text/css">*{padding:0;margin:0}#app{width:500px;height:300px;margin:0 auto;background-color:#ddd}.top{height:50px;line-height:50px;width:100%;background-color:#999}.top ul li{display:inline-block;margin:0 10px}.top ul li a{text-decoration:none;color:white}</style>
</head>
<body>
<div id="app">
<div class="top">
<ul>
<li @click='tabToggle("tab01");'>Tab001</li>
<li @click='tabToggle("tab02");'>Tab002</li>
</ul>
</div>
<div>
<component :is='currentView' keep-alive></component>
</div>
</div>
</body>
<script type="text/javascript" src='vue.min.js'>
</script>
<script>
var tab01 = Vue.extend({
template: '<p>This is tab01</p>'
})
var tab02 = Vue.extend({
template: '<p>This is tab02</p>'
})
var app = new Vue({
el: '#app',
data: {
currentView: 'tab01'
},
components: {
tab01: tab01,
tab02: tab02
},
methods: {
tabToggle: function(tabText) {
this.currentView = tabText
}
}
})
</script>
</html>ok,完事儿了！
接下来，说说我遇到的问题，如果上面能满足你的问题，则不需要看下面
当然，我不可能只是简简单单的一个页面，一个小demo，如果要应用到项目中，又是另一回事儿。
问题1：
例如：在 .vue文件中
反反复复，这是什么造成的，对于新手来说，一个不经意间，就造成了，
原因在于data，vue规定，data是一个函数，我这里写成了对象：
==应修改为：==
问题2：
查半天资料没查出个所以然来，那个纠结啊，群里各种找大神啊
太闹心，以为是 自己写的组件的问题，各种改，改半天，没任何效果，后来抱着试试的心态，在页面上加了个变量，发现，压根就不起效果，
this.变量名 = "Hello"页面没有任何反应，以为是vue版本太高了，不支持，算了，不闲扯了，谁做谁知道！
问题的原因在于：加了一个不存在的方法
得，把它删除掉就可以了，其他就不介绍了，完成了。OK了！
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2017/02/08 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
