VueVuejs基础自学系列 | 邂逅Vuejs

Posted COCOgsta

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VueVuejs基础自学系列 | 邂逅Vuejs相关的知识,希望对你有一定的参考价值。

视频来源:B站《最全最新Vue、Vuejs教程,从入门到精通》

一边学习一边整理老师的课程内容及试验笔记,并与大家分享,侵权即删,谢谢支持!

附上汇总贴:Vue、Vuejs基础自学系列 | 汇总_COCOgsta的博客-CSDN博客


内容概述

认识Vuejs

  • 为什么学习Vuejs
  • 简单认识一下Vuejs

Vuejs安装方式

  • CDN引入
  • 下载和引入
  • NPM安装管理

Vuejs初体验

  • Hello Vuejs
  • Vue列表展示
  • 案例:计数器

Vuejs的MVVM

  • Vue中的MVVM

为什么学习Vuejs?

我相信每个人学习Vue的目的是各不相同的。

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

简单认识一下Vuejs

Vue(读音类似于View),不要读错。

Vue是一个渐进式的框架,什么是渐进式的呢?

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

Vue有很多特点和Web开发中常见的高级功能

  • 解耦视图和数据
  • 可复用的组件
  • 前端路由技术
  • 状态管理
  • 虚拟DOM

这些特点,你不需要一个个去记住,我们在后面的学习和开发中都会慢慢体会到的,一些技术点我也会在后面进行讲解。

学习Vuejs的前提?

  • 从零学习Vue开发,并不需要你具备其他类似于Angular、React,甚至是jQuery的经验。

Vue.js安装

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

安装Vue的方式有很多:

方式一:直接CDN引入

  • 你可以选择引入开发环境版本还是生产环境版本
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
复制代码

方式二:下载和引入

开发环境 https://vuejs.org/js/vue.js
生产环境 https://vuejs.org/js/vue.min.js
复制代码

方式三:NPM安装

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

Hello Vuejs

我们了做我们的第一个Vue程序,体验一下Vue的响应式

代码做了什么事情?

我们来阅读JavaScript代码,会发现创建了一个Vue对象。

创建Vue对象的时候,传入了一些options:

  • 中包含了el属性:该属性决定了这个Vue对象挂载到哪一个元素上,很明显,我们这里是挂载到了id为app的元素上
  • 中包含了data属性:该属性中通常会存储一些数据

    • 这些数据可以是我们直接定义出来的,比如像上面这样。
    • 也可能是来自网络,从服务器加载的。

浏览器执行代码的流程:

  • 执行到10~13行代码显然出对应的HTML
  • 执行第16行代码创建Vue实例,并且对原HTML进行解析和修改。

并且,目前我们的代码是可以做到响应式的。

示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h2>message</h2>
  <h1>name</h1>
</div>

<script src="../js/vue.js"></script>
<script>
  // let(变量)/const(常量)
  // 编程范式:声明式编程
  const app = new Vue(
    el: '#app', // 用于挂载要管理的元素
    data:  // 定义数据
      message: '你好啊,李银河!',
      name: 'coderwhy'
    
  )

  // 元素js的方法(编程范式:命令式编程)
  // 1.创建div元素,设置id属性
  // 2.定义一个变量叫message
  // 3.将message放在前面的div元素中显示
  // 4.修改message的数据:今天天气不错!
  // 5.将修改后的数据再次替换到div元素
</script>

</body>
</html>
复制代码

Vue列表显示

现在,我们来展示一个更加复杂的数据:数据列表。

  • 比如我们现在从服务器请求过来一个列表
  • 希望展示到HTML中。

HTML代码中,使用v-for指令

  • 该指令我们后面会详细讲解,这里先学会使用。

是不是变的So Easy,我们再也不需要在JavaScript代码中完成DOM的拼接相关操作了

而且,更重要的是,它还是响应式的。

  • 也就是说,当我们数组中的数据发生改变时,界面会自动改变。
  • 依然让我们打开开发者模式的console,来试一下

示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</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>
复制代码

案例:计数器

现在我们来实现一个小的计数器

  • 点击 + 计数器 +1
  • 点击 - 计数器 -1

这里,我们又要使用新的指令和属性了

  • 新的属性:methods,该属性用于在Vue对象中定义方法。
  • 新的指令:@click,该指令用于监听某个元素的点击事件,并且需要指定当发生点击时,执行的方法(方法通常是methods中定义的方法)

你可能会疑惑?

  • 这些@click是什么东西?
  • Vue对象中又是定义el/data/methods,到底都有哪些东西可以定义,以及它们的作用是什么?
  • 这些疑惑再后续学习中都会一一解开。

示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h2>当前计数: counter</h2>
<!--  <button v-on:click="counter++">+</button>-->
<!--  <button v-on:click="counter&#45;&#45;">-</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 () 
        console.log('add被执行');
        this.counter++
      ,
      sub: function () 
        console.log('sub被执行');
        this.counter--
      
    
  )

</script>

</body>
</html>
复制代码

Vue中的MVVM

什么是MVVM呢?

  • 通常我们学习一个概念,最好的方式是去看维基百科(对,千万别看成了百度百科)
  • 维基百科的官方解释,我们这里不再赘述。

我们直接来看Vue的MVVM

  • View层:

    • 视图层
    • 在我们前端开发中,通常就是DOM层。
    • 主要的作用是给用户展示各种信息。
  • Model层:

    • 数据层
    • 数据可能是我们固定的死数据,更多的是来自我们服务器,从网络上请求下来的数据。
    • 在我们计数器的案例中,就是后面抽取出来的obj,当然,里面的数据可能没有那么简单。
  • VueModel层:

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

计数器的MVVM

计数器的MVVM

  • 我们的计数器中就有严格的MVVM思想

    • View依然是我们的DOM
    • Model就是我们抽离出来的obj
    • ViewModel就是我们创建的Vue对象实例
  • 它们之间如何工作的?

    • 首先ViewModel通过Data Binding让obj中的数据实时的在DOM中显示。
    • 其次ViewModel通过DOM Listener来监听DOM事件,并且通过methods中的操作,来改变obj中的数据。

有了Vue帮助我们完成VueModel层的任务,在后续的开发,我们就可以专注于数据的处理,以及DOM的编写工作了。

示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h2>当前计数: counter</h2>
<!--  <button v-on:click="counter++">+</button>-->
<!--  <button v-on:click="counter&#45;&#45;">-</button>-->
  <button v-on:click="add">+</button>
  <button @click="sub">-</button>
</div>

<script src="../js/vue.js"></script>
<script>
  // 语法糖:简写
  // proxy
  const obj = 
    counter: 0,
    message: 'abc'
  
  const app = new Vue(
    el: '#app',
    data: obj,
    methods: 
      add: function () 
        console.log('add被执行');
        this.counter++
      ,
      sub: function () 
        console.log('sub被执行');
        this.counter--
      
    
  )

</script>

</body>
</html>
复制代码

创建Vue实例传入的options

你会发现,我们在创建Vue实例的时候,传入了一个对象options。

目前掌握这些选项:

  • el:

    • 类型:string | HTMLElement
    • 作用:决定之后Vue实例会管理哪一个DOM。
  • data:

    • 类型:Object | Function
    • 作用:Vue实例对应的数据对象。
  • methods:

    • 类型: [key: string]: Function
    • 作用:定义属于Vue的一些方法,可以在其他地方调用,也可以在指令中使用。

Vue的生命周期

以上是关于VueVuejs基础自学系列 | 邂逅Vuejs的主要内容,如果未能解决你的问题,请参考以下文章

VueVuejs从入门到精通 - 邂逅Vuejs

VueVuejs从入门到精通 - Webpack详解

VueVuejs从入门到精通 - vue-router详解

VueVuejs从入门到精通 - 基本语法

VueVuejs从入门到精通 - 前端模块化

VueVuejs从入门到精通 - Vue CLI详解