邂逅Vue.js开发

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6

1、认识Vue

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

  • 全称是Vue.js或者Vuejs
  • 它基于标准 HTML、CSS 和 JavaScript 构建并提供了一套声明式的、组件化的编程模型
  • 帮助你高效地开发用户界面无论任务是简单还是复杂

什么是渐进式框架呢

表示我们可以在项目中一点点来引入和使用Vue而不一定需要全部使用Vue来开发整个项目

 

2、目前需要学习Vue3吗

在2020年的9月19日万众期待的Vue3终于发布了正式版命名为“One Piece”。

  • 更好的性能
  • 更小的包体积
  • 更好的TypeScript集成
  • 更优秀的API设计。

那么现在是否是学习vue3的时间呢

  • 答案是肯定的
  • Vue3目前已经是稳定的版本并且Vue3在2022年2月7日已经成为默认安装版本
  • 目前社区也经过一定时间的沉淀更加的完善了包括AntDesignVue、Element-Plus都提供了对Vue3的支持所以很多公司目前新的项目都已经在使用Vue3来进行开发了。
  • 并且在面试的时候几乎都会问到各种各样Vue3相关的问题

3、如何使用Vue

Vue的本质就是一个JavaScript的库

  • 刚开始我们不需要把它想象的非常复杂
  • 我们就把它理解成一个已经帮助我们封装好的库
  • 在项目中可以引入并且使用它即可。

那么安装和使用Vue这个JavaScript库有哪些方式呢

  • 方式一在页面中通过CDN的方式来引入
  • 方式二下载Vue的JavaScript文件并且自己手动引入
  • 方式三通过npm包管理工具安装使用它
  • 方式四直接通过Vue CLI创建项目并且使用它

4、方式一CDN引入

Vue的CDN引入

<script src="https://unpkg.com/vue@next"></script> 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h2>哈哈哈</h2>
    <p>我是内容, 呵呵呵呵</p>

    <div id="app"></div>

    <!-- CDN地址 -->
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        // 使用Vue
        const app = Vue.createApp({
            template: `<h2>Hello World</h2><span>呵呵呵</span>`
        })
        // 挂载
        app.mount("#app")

    </script>
</body>
</html>

5、方式二下载和引入

下载Vue的源码可以直接打开CDN的链接

  • 打开链接复制其中所有的代码
  • 创建一个新的文件比如vue.js将代码复制到其中

通过script标签引入刚才的文件

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

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app"></div>

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

        // 1.创建app
        const app = Vue.createApp({
            template: `<h1>Hello Vue</h1>`
        })

        // 2.挂载app
        app.mount("#app")

    </script>

</body>
</html>

6、Vue初体验

案例一动态数据

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app"></div>

    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            // 插值语法: {{title}}
            template: `<h2>{{ message }}</h2>`,
            data: function () {
                return {
                    title: "Hello World",
                    message: "你好啊, Vue3"
                }
            }
        })
        app.mount("#app")
    </script>
</body>
</html>

案例二列表数据

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app"></div>

    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            template: `
              <h2>电影列表</h2>
              <ul>
              <li v-for="item in movies">{{ item }}</li>
              </ul>
            `,
            data: function () {
                return {
                    message: "你好啊, 李银河",
                    movies: ["大话西游", "星际穿越", "盗梦空间", "少年派", "飞驰人生"]
                }
            }
        })
        app.mount("#app")
    </script>
</body>
</html>

案例三计数器功能实现

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
        <h2>当前计数: {{counter}}</h2>
        <button @click="increment">+1</button>
        <button @click="decrement">-1</button>
    </div>

    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            data: function () {
                return {
                    counter: 0
                }
            },
            methods: {
                increment: function () {
                    this.counter++
                },
                decrement: function () {
                    this.counter--
                }
            }
        })
        app.mount("#app")
    </script>
</body>
</html>

原生实现计数器方式

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h2>当前计数: <span class="counter"></span></h2>
    <button class="add">+1</button>
    <button class="sub">-1</button>

    <script>
        // 1.获取dom
        const h2El = document.querySelector("h2")
        const counterEl = document.querySelector(".counter")
        const addBtnEl = document.querySelector(".add")
        const subBtnEl = document.querySelector(".sub")

        // 2.定义一个变量记录数据
        let counter = 100
        counterEl.textContent = counter

        // 2.监听按钮的点击
        addBtnEl.onclick = function () {
            counter++
            counterEl.textContent = counter
        }
        subBtnEl.onclick = function () {
            counter--
            counterEl.textContent = counter
        }

    </script>

</body>
</html>

7、声明式和命令式

  • 原生开发和Vue开发的模式和特点我们会发现是完全不同的这里其实涉及到两种不同的编程范式
    • 命令式编程和声明式编程
    • 命令式编程关注的是 “how to do”自己完成整个how的过程
    • 声明式编程关注的是 “what to do”由框架(机器)完成 “how”的过程
  • 在原生的实现过程中我们是如何操作的呢
    • 我们每完成一个操作都需要通过JavaScript编写一条代码来给浏览器一个指令
    • 这样的编写代码的过程我们称之为命令式编程
    • 在早期的原生JavaScript和jQuery开发的过程中我们都是通过这种命令式的方式在编写代码的
  • 在Vue的实现过程中我们是如何操作的呢
    • 我们会在createApp传入的对象中声明需要的内容模板template、数据data、方法methods
    • 这样的编写代码的过程我们称之为是声明式编程
    • 目前Vue、React、Angular、小程序的编程模式我们称之为声明式编程

8、MVVM模型

  • MVC和MVVM都是一种软件的体系结构
    • MVC是Model – View –Controller的简称是在前期被使用非常框架的架构模式比如iOS、前端
    • MVVM是Model-View-ViewModel的简称是目前非常流行的架构模式
  • 通常情况下我们也经常称Vue是一个MVVM的框架。
    • Vue官方其实有说明Vue虽然并没有完全遵守MVVM的模型但是整个设计是受到它的启发的。

 

9、data属性

  • data属性是传入一个函数并且该函数需要返回一个对象
    • 在Vue2.x的时候也可以传入一个对象虽然官方推荐是一个函数
    • 在Vue3.x的时候必须传入一个函数否则就会直接在浏览器中报错
  • data中返回的对象会被Vue的响应式系统劫持之后对该对象的修改或者访问都会在劫持中被处理
    • 所以我们在template或者app中通过 {{counter}} 访问counter可以从对象中获取到数据
    • 所以我们修改counter的值时app中的 {{counter}}也会发生改变
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app">
    <h2>{{message}}</h2>
    <button @click="changeMessage">改变message</button>
  </div>
  
  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data: option api
      data: function() {
        return {
          message: "Hello Data"
        }
      },
      // methods: option api
      methods: {
        changeMessage: function() {
          this.message = "你好, 师姐!"
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>

10、methods属性

  • methods属性是一个对象通常我们会在这个对象中定义很多的方法
    • 这些方法可以被绑定到 模板中
    • 在该方法中我们可以使用this关键字来直接访问到data中返回的对象的属性
  • 对于有经验的同学在这里我提一个问题官方文档有这么一段描述
    • 问题一为什么不能使用箭头函数官方文档有给出解释
    • 问题二不使用箭头函数的情况下this到底指向的是什么可以作为一道面试题

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
        <h2>当前计数: {{counter}}</h2>
        <button @click="increment">+1</button>
    </div>

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

        console.log(this)

        const app = Vue.createApp({
            data: function () {
                return {
                    counter: 0
                }
            },

            // methods: option api
            methods: {
                // 方式一
                increment: function () {
                    this.counter++
                },
                // 方式二es6写法
                // increment() {}

                // 强调: methods中函数不能写成箭头函数
                // increment: () => {
                //   console.log(this)
                // }
            }
        })

        app.mount("#app")
    </script>
</body>
</html>

 

11、问题

问题一不能使用箭头函数

  • 我们在methods中要使用data返回对象中的数据
    • 那么这个this是必须有值的并且应该可以通过this获取到data返回对象中的数据。
  • 那么我们这个this能不能是window呢
    • 不可以是window因为window中我们无法获取到data返回对象中的数据
    • 但是如果我们使用箭头函数那么这个this就会是window了
  • 为什么是window呢
    • 这里涉及到箭头函数使用this的查找规则它会在自己的上层作用于中来查找this
    • 最终刚好找到的是script作用于中的this所以就是window

问题二this到底指向什么

事实上Vue的源码当中就是对methods中的所有函数进行了遍历并且通过bind绑定了this

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6
标签: vue
返回列表

上一篇：Jmeter元件Switch控制器_jmeter if控制器

下一篇：labview操作者框架+ADS+twincat2(twincat3) st语言ethercat总线控制工程项目资料

“邂逅Vue.js开发” 的相关文章

python+vue2+nodejs 搜索引擎课设 SCAU数信学院本科生通知检索(附源码)1年前 (2023-02-02)
如何在Vue3+js项目（脚手架）中使用（下载安装及运行）element-plus以及解决使用过程中遇到的问题1年前 (2023-02-02)
Vue-Router1年前 (2023-02-02)
[VueJsDev] 快速入门 - vscode 设置推荐1年前 (2023-02-02)
jmeter如何将下载文件保存到本地_vue下载文件保存到本地1年前 (2023-02-02)
【vue系列-06】vue的组件化编程1年前 (2023-02-02)
vue(透传属性,$attrs)1年前 (2023-02-02)
Vue实现DOM元素拖放互换位置1年前 (2023-02-02)
vue框架设计分析1年前 (2023-02-02)
Vue前端项目【尚品汇】1年前 (2023-02-02)

阿里云国际版