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

最新推荐文章于 2024-08-15 14:57:36 发布

super6662321313

最新推荐文章于 2024-08-15 14:57:36 发布

阅读量865

点赞数

文章标签： vue elementui

本文链接：https://blog.csdn.net/ASUKA2020/article/details/90719784

版权

小彬学vue系列专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

super6662321313

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【小彬学vue系列专栏】001 | 出发吧，带上背包和Vue

1.是什么 VueVue 是什么呢，官方文档上说Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。小彬想不明白，一直琢磨着什么是渐进式，结合着自己 “资深” 的后端功底，不屑的说了一句，不就是用来写前端的框架吗，整这些高大上的吓唬谁呢。了解了这些以后，小彬也就不再纠结了，先用起来再说。怎么开始写vue的代码呢，小彬查看官方文档的介绍内容，文档很重...
复制链接

扫一扫