【小彬学vue系列专栏】001 | 出发吧，带上背包和Vue

1.是什么 Vue

Vue 是什么呢，官方文档上说

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

小彬想不明白，一直琢磨着什么是渐进式，结合着自己 “资深” 的后端功底，不屑的说了一句，不就是用来写前端的框架吗，整这些高大上的吓唬谁呢。了解了这些以后，小彬也就不再纠结了，先用起来再说。

怎么开始写vue的代码呢，小彬查看官方文档的介绍内容，文档很重要！文档很重要！！官方文档很重要！！！这样的话一直在小彬脑海里余音绕梁，也不知是哪位高人传授的。

2 走一个呗 vue

（1）小彬也曾想尝试使用 NodeJs + webpack + vue-cli 这种风骚绝伦的技术组合，奈何火候不够，只能作罢，直接使用cdn提供的vue。

以下代码复制到一个html文件中，打开直接查看程序运行效果

<!doctype html>
<html lang="en">
<body><div id="app">{{ message }}</div>
</body><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: '#app',data: {message: 'Hello Vue!'}})</script></html>

好吧，小彬也知道你不会运行的，下面是他的运行结果的截图

运行结果显示输出的是「Hello Vue！」，结果看似简单，但实际上Vue在幕后做了大量的工作，下面是程序内部的数据传递链，据小彬观察，vue能以某种机制将 Vue 实例中的值，放在了指定的位置

小彬疑问了，这个和传统不用框架写页面有什么区别吗？

小彬细细琢磨了一下，原来在前后端没分离之前，如果要在页面上显示「Hello World」，那么需要这样写

<div><p>Hello World</p>
</div>

如果要将它修改为「Hello Jquery」，那么需要这样写，使用 Jquery 操作文档对象模型（DOM），

<!doctype html>
<html lang="en">
<body><div><p id="say">Hello World</p></div>
</body><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script><script>$("#say").html('Hello Jquery');</script></html>

老婆不在家，只好自己亲自做饭，柴米油盐酱醋茶，这就是之前的开发思维方式，什么东西都得自己亲自操刀。

有了vue就不一样了，如果让vue来实现就变得简单，vue，做饭去。vue 实现上面的需求功能

<!doctype html>
<html lang="en">
<body><div id="app">{{ message }}</div>
</body><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: '#app',data: {message: 'Hello World!'}})</script></html>

如果需要改变「Hello World」这个值，你需要通过某种方式能操作data数据对象中的message属性并给它赋你想赋的值，搞定！

比如说通过控制台调试终端修改（一种方式）

app.message='Hello Vue,goodbye Jquery'

3.总结

vue 是一个写前端的框架
vue 不直接操作DOM
完成了第一个vue应用程序