欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Vue笔记一——Vue安装与体验

程序员文章站 2022-06-28 19:16:37
文章目录认识Vuejs为什么学习Vuejs简单认识一下VuejsVuejs安装方式CDN引入下载和引入NPM安装管理Vuejs初体验Hello VuejsVue列表展示案例：计数器Vuejs的MVVMVue中的MVVMView层：Model层：VueModel层：认识Vuejs为什么学习Vuejs可能你的公司正要将原有的项目使用Vue进行重构。也可能是你的公司的新项目决定使用Vue的技术栈。当然，如果你现在正在换工作，你会发现招聘前段的需求中，10个有8个都对Vue有或多或少的要求。当然，最为...

文章目录

认识Vuejs

为什么学习Vuejs

  • 可能你的公司正要将原有的项目使用Vue进行重构。
  • 也可能是你的公司的新项目决定使用Vue的技术栈。
  • 当然，如果你现在正在换工作，你会发现招聘前段的需求中，10个有8个都对Vue有或多或少的要求。
  • 当然，最为学习者我们知道Vuejs目前非常火，可以说是前端必备的一个技能。

简单认识一下Vuejs

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

  • 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。
  • 或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。
  • 比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。

与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

  • Vue有很多特点和Web开发中常见的高级功能。
    • 解耦视图和数据
    • 可复用组件
    • 前端路由技术
    • 状态管理
    • 虚拟DOM
  • 不需要一个个记忆，以后慢慢体会。
  • 学习Vuejs的前提？
    • 从零学习Vue开发，并不需要你具备其他类似Angular、React，甚至是jQuery的经验。
    • 但是你需要具备一定的HTML、CSS、JavaScript基础。

Vuejs安装方式

使用一个框架，我们第一步要做什么呢？安装下载它

安装Vue的方式有很多：

CDN引入

你可以选择引入开发环境版本还是生产环境版本。

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue.js"></script>

下载和引入

我们可以通过在官网直接右键选择链接另存为，将文件下载下来。

Vue笔记一——Vue安装与体验

开发环境

生产环境

NPM安装管理

后续我们通过webpack和CLI的使用，我们使用该方式。

Vuejs初体验

Hello Vuejs

我们来做简单的体验

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01-HelloVuejs</title>
</head>



<body>
    <div id="app">{{message}}</div>

    <script src="../js/vue.js"></script>

    <script>
        // let(变量)/const(常量)
        let app = new Vue({
            el: '#app', // 用于挂载要管理的元素
            data: { // 定义数据
                message: '你好，阿牛牛!'
            }
        })
    </script>
</body>

</html>
  • 创建Vue对象的时候，传入了一些options:{}
    • {}中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上，很明显，我们这里是挂载到了id为app的元素上。
    • {}中包含了data属性：该属性中通常会存储一些数据。
      • 这些数据可以是我们直接定义出来的，比如像上面这样。
      • 也可以是来自网络，从服务器加载的。
  • 浏览器执行代码流程：
    • 执行的13行显示出对应的HTML。
    • 执行19行代码创建Vue实例，并且对原HTML进行解析和修改。

Vue笔记一——Vue安装与体验

  • 这种编程模式属于声明式编程，我们可以不用更改界面，只改变数据，来体验一下Vue的响应式：

Vue笔记一——Vue安装与体验

Vue列表展示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02-vue列表展示</title>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="item in movies">{{item}}</li>
        </ul>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: '你好呀',
                movies: ['星际穿越', '拆弹专家', '钢铁侠', '盗梦空间']
            }
        })
    </script>
</body>

</html>

Vue笔记一——Vue安装与体验

  • 现在我们来展示一个更加复杂的数据：数据列表。
    • 比如我们现在从服务器申请过来一个列表。
    • 希望展示到HTML中。
  • HTML代码中，使用v-for指令。
    • 该指令后面会详细讲解，这里先学会使用。
  • 而且，更重要的是，它还是响应式的，也就是说当我们数组中的数据发生改变时，界面会自动改变。依然让我们尝试下：

Vue笔记一——Vue安装与体验

案例：计数器

  • 现在，我们来实现一个小的计数器
    • 点击+计数器+1
    • 点击-计数器-1
  • 这里，我们有用到了新的指令和属性
    • 新的属性methods，该属性用于在Vue对选中定义方法。
    • 新的指令：@click，该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法（通常是methods中定义的方法）
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03-vue案例-计数器</title>
</head>

<body>
    <div id="app">
        <h2>当前数据:{{counter}}</h2>
        <!-- <button v-on:click="counter++">+</button>
        <button v-on:click="counter--">-</button> -->
        <button v-on:click="add">+</button>
        <button @click="sub">-</button>
    </div>



    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                counter: 0
            },
            methods: {
                add: function() {
                    this.counter++;
                },
                sub: function() {
                    this.counter--;
                }
            }
        })
    </script>
</body>

</html>

Vue笔记一——Vue安装与体验

Vuejs的MVVM

Vue中的MVVM

什么是MVVM呢？

View层：

  • 视图层；
  • 在我们前端开发中，通长就是DOM层；
  • 主要的作用是给用户展示各种信息；

Model层：

  • 数据层；
  • 数据可能是我们固定的死数据，更多的是来自服务器，从网络上请求下来的数据；
  • 在前面的计算器案例中，就是方法二中抽取出来的obj当然，里面的数据可能没有这么简单；

VueModel层：

  • 视图模型层；
  • 视图模型是View和Model沟通的桥梁；
  • 一方面实现了Data Binding(数据绑定)；将Model的改变实时的反应到View中；
  • 另一方面实现了DOM Listener(DOM监听)，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到。并在需要的情况下改变对应的Data；

Vue笔记一——Vue安装与体验

  • 计数器的MVVM
    • 我们的计数器中就有严格的MVVM思想
      • View依然是我们的DOM
      • Model就是我们抽离出来的obj
      • ViewModel就是我们创建的Vue对象实例
    • 它们之间如何工作呢？
      • 首先ViewModel通过Data Binding让obj中的数据实时在DOM中显示。
      • 其次ViewModel通过DOM Listener来监听DOM事件，并且通过methods中的操作，来改变obj中的数据。
  • 有了Vue帮助我们完成VueModel层的任务，在后续开发，我们就可以专注于数据的处理，以及DOM的编写工作了。

本文地址：https://blog.csdn.net/weixin_46351593/article/details/112012377

上一篇： Android 顶部导航栏适配

下一篇： 详细讲解微信小程序前端开发之flex布局(附代码及演示效果)

推荐阅读