女皇武则天：我不愿被 extends
Vue简说
Vue简说是国人写的一个前端框架，非常好用。Weex 是一个可以使用现代化的 Web 技术开发高性能原生应用的框架，以及适用于服务器的NUXT框架。
学到的知识
Vue相关的基础内容、基础语法、MVVM模式、组件化、生命周期、动画特效；以及一个实战项目，在实战项目中你会学到环境搭建、使用Git、数据模拟、本地开发、联调、真机测试以及上线。
项目说明
本项目我们参考了去哪网的布局，里面包含的知识点包括：根据不同城市选择不同景点、首页实现了多区域轮播、多区域列表的循环展示、城市详情页面的城市展示、搜索、左侧字母与城市名称联动特效、景点详情页面、通用画廊组件、件与件的头部组件、递归展示的列表组件。同时借助于有限的页面，我们使用了各种有用的知识点，比如：Axios：（啊搜思）对ajax数据的获取；Vue Router(Vue罗特)：多页面之间的路由；VueX：各个组件之间的数据共享；异步组件：让代码上线，性能更优；Stylus:(思呆勒思)：负责前端的样式；递归组件：实现了组件自身调用自己的功能；各种插件以及公用组件的拆分。
学习前提
最好用JavaScript、ES6、webpack（打包工具）、npm（包管理工具）
如何学习Vue
跟着官方文档走，地址在这里:Vue官方文档，安装也是非常简单的，点这里，点击下载里面的开发版本即可，其实就是复制该页面到一个新的文件vue.js里面即可。
HelloWorld
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<title>Hello World</title>
<script src=\"./vue.js\"></script>
</head>
<body>
<div id=\"app\">{{ message }}</div>
<script>
// var a =document.getElementById(\"app\");
// a.innerText=\"Hello World\"
var a = new Vue({
el:\" #app\",
data: {
message: \"Hello World1\",
}
})
</script>
</body>
</html>
el是element的简称，代表这个Vue的一个实例接管的范围，这里就是<div id=\"app\">{{ message }}</div>这个标签内的信息，data定义了一组数据，这个是以键值对的形式出现的，细心的你会发现这个vue在实例化的过程中传入的也是键值对，而键值对都是用一对大括号{}包围起来的。{{ message }}是插值表达式，有过其他语言基础的童鞋肯定不会陌生。现在我们尝试这样，新增一条语句：<div>{{ message }}</div>也就是这样：
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<title>Hello World</title>
<script src=\"./vue.js\"></script>
</head>
<body>
<div id=\"app\">{{ message }}</div>
<div>{{ message }}</div>
<script>
// var a =document.getElementById(\"app\");
// a.innerText=\"Hello World\"
var a = new Vue({
el:\" #app\",
data: {
message: \"Hello World1\",
}
})
</script>
</body>
</html>
输出结果是这样：
Hello World1
{{ message }}
原因就是你这个vue的实例只是接管了这个id为app的div标签范围内的内容。el限制了vue的作用范围，data用于定义一些数据。
假定你现在需要间隔2秒输出Bye World，你之前可能是这样写代码：
var a =document.getElementById(\"app\");
a.innerText=\"Hello World\";
setTimeout(function () {
a.innerText=\"Bye World\"
},2000)
但是如果你使用了vue，你就不需要关注任何有关DOM的编码了，你只要这样写：
var a = new Vue({
el:\" #app\",
data: {
message: \"Hello World1\",
}
})
setTimeout(function () {
a.$data.message = \"Bye World\"
},2000)
你不用关心DOM上的操作，只需要关注数据的管理即可，这里的$data就是给上面实例中的data取了一个别名，然后根据键来取值就可以。vue对数据管理非常友好，因此只要数据发生了改变，页面显示就会跟着改变。
使用Vue创建的一个todolist
<body>
<div id=\"app\">
<input v-model=\"inputValue\">
<button type=\"button\" @click=\"handleClick\">点击</button>
<ul>
<li v-for=\"(item,index) of lists\" :key=\"index\">{{ item }}</li>
</ul>
</div>
<script src=\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\"></script>
<script type=\"text/javascript\">
var app = new Vue({
el:\"#app\",
data:{
inputValue:\"\",
lists:,
},
methods:{
handleClick:function () {
- this.lists.push(this.inputValue);
this.inputValue=\'\';
},
}
})
</script>
</body>