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

1.是什么 Vue

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

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

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

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

2 走一个呗 vue

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

以下代码复制到一个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>

好吧,小彬也知道你不会运行的,下面是他的运行结果的截图
【小彬学vue系列专栏】001 | 出发吧,带上背包和Vue_第1张图片

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

【小彬学vue系列专栏】001 | 出发吧,带上背包和Vue_第2张图片

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

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

<div>
    <p>Hello Worldp>
div>

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


<html lang="en">
<body>
    <div>
        <p id="say">Hello Worldp>
    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 实现上面的需求功能


<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'

【小彬学vue系列专栏】001 | 出发吧,带上背包和Vue_第3张图片

3.总结

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

你可能感兴趣的:(vue,elementui,小彬学vue系列)