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应用程序