三个小时vue3.x从零到实战（前）（vue3.x基础）

数据知道

已于 2023-05-12 09:09:37 修改

阅读量4.7w

点赞数 57

分类专栏：前端案例和总结文章标签：前端

于 2021-07-13 19:15:53 首次发布

本文链接：https://blog.csdn.net/cui_yonghua/article/details/118708626

版权

前端案例和总结专栏收录该内容

10 篇文章 23 订阅

订阅专栏

一. 学前了解

1.1 前置知识

HTML: 超文本传输语言，主要用来编写网页的结构。
CSS: 层叠样式表，包括颜色，大小，字体等，实现漂亮，布局合理的效果。
JavaScript: 前端样式语言，实现页面逻辑，行为，动作等，用来动态操作元素的属性，主要是为页面提供交互效果，实现更好的用户体验。
node, npm, webpack等

1.2 学习vue3.x的相关网站

官网：https://vuejs.org/
中文官网：https://cn.vuejs.org/
中文官网vue3：https://v3.cn.vuejs.org/
菜鸟教程：https://www.runoob.com/vue3/vue3-tutorial.html
W3CSchool: https://www.w3cschool.cn/vuejs3/

1.3 vue3.x介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

传统的网站开发一般采用HTML+CSS+JS作为技术架构，而vue立足于其上，以模板语法为基础，以数据绑定和组件化开发为核心，极大的简化了开发流程。
使用vue技术栈，可以在几分钟内搭建出一个完整的前端项目。

现在，很多项目采用这样的架构，后台只负责数据的存储和组装，而前端负责业务逻辑层和视图层的全部工作。

Vue 是利用模版语法来渲染页面的，这也称做声明式渲染。Vue 好上手的重要原因也是因为这个，因为它符合了前端开发者的习惯。
Vue 将 HTML、CSS、JS 全部整合在同一个文件 .vue 中，以组件化应用构建的方式来组织代码，从语法特性上鼓励 “高内聚、低耦合” 的设计理念，让代码组织变得更加合理，提升了可读性与逻辑性。

1). 一位华裔前Google工程师(尤雨溪)开发的前端js库
2). 作用: 动态构建用户界面
3). 特点:
* 遵循MVVM模式
* 编码简洁, 体积小, 运行效率高, 移动/PC端开发
* 它本身只关注UI, 可以轻松引入vue插件和其它第三库开发项目
4). 与其它框架的关联:
* 借鉴angular的模板和数据绑定技术
* 借鉴react的组件化和虚拟DOM技术
5). vue包含一系列的扩展插件(库):
* vue-cli: vue脚手架-（帮我们下载依赖）
* vue-resource(axios): ajax请求
* vue-router: 路由
* vuex: 状态管理
* vue-lazyload: 图片懒加载
* vue-scroller: 页面滑动相关
* mint-ui: 基于vue的组件库(移动端)
* element-ui: 基于vue的组件库(PC端)

1.4 vue3.x相对于vue2.x的最新特性

更多的API特性：CompositionAPI
体积更小，速度更快；
解决遗留问题，更加强壮

1.5 MVVM框架

vue是MVVM框架；
M: Model数据层；
V: View视图层；
VM: 视图数据连接层；

二. 创建应用基本介绍

基本使用：

引入vue.js;
创建Vue实例对象, 指定选项(配置)对象
在页面模板中使用{{}}或vue指令

2.1 第一个案例如下：

将下面代码复制到html文件中，用谷歌浏览器打开即可执行。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <!-- 指定vue的地址: <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>-->
    <!--  下载网址：https://unpkg.com/vue@next  如：https://unpkg.com/vue@3.1.4/dist/vue.global.js-->
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
<div id="hello-vue" class="demo-st">
    {{ message }}
</div>

<!-- 在script里写vue代码 -->
<script>
    const HelloVueApp = {
        data() {
            return {
                message: 'Hello Vue!!!'
            }
        }
    }
    // 传递给 createApp 的选项用于配置根组件。在使用 mount() 挂载应用时，该组件被用作渲染的起点。
    Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
</html>

2.2 应用介绍

Vue.createApp() ：创建一个应用，每个 Vue 应用都是通过用 createApp 函数创建一个新的应用实例开始的：；
const vm = app.mount() ： vm是获取应用的根组件，通过vm可以获取vue里的任何数据，属性和方法；
vm.$data ：获取数据对应内容；
data(){} ： data方法，用于在vue中声明数据,对象或函数类型,页面中可以直接访问使用；
methods:{} ： methods属性，用于编写vue中的方法,所有的方法由vue对象来调用, 访问data中的属性直接使用this.xxx；
computed:{} 计算属性：根据数据，自动进行计算，经常用于数值计算；
watch:{} ：属性说明：监听属性，属性变化时，制动执行里面的函数，可以根据变量的改变，作异步操作和页面样式的改变；

注意：

computed和method都能实现的功能，建议使用computed, 因为有缓存；
computed和watcher都能实现的工呢，建议使用computed, 因为更加简洁；

2.3 vue生命周期函数（也叫钩子函数）

生命周期函数是指：在某一时刻会自动执行的函数。

beforeCreate() : 在初始化/创建实例之前执行的函数；
Created() ：在初始化/创建实例之后执行的函数；
beforeMount() ：在组件内容被渲染到页面之前自动执行的函数；（注意：此时无法找到任何模板DOM节点）
Mounted() ：在组件内容被渲染到页面之后自动执行的函数；
beforeUpdate() ：在数据将要变化之前自动执行的函数；
updated() ：在数据将要变化之后自动执行的函数；
beforeUnmount() ：在vue实例销毁之前自动执行的函数；
unmounted() ：在vue实例销毁之后自动执行的函数；

三. vue常用模板语法

Vue 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

插值：在模板中输出变量，在插值表达式中是可以写JavaScript表达式的，例如：{{ 2+3 }}, 但是不能写语句。

3.1 文本插值 {{}} 和指令v-once

数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue 测试实例</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <!-- 数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值
       标签的内容将会被替代为对应组件实例中 message 属性的值，如果 message 属性的值发生了改变，{{...}} 标签内容也会更新。-->
<div id="hello-vue"> {{ message }} <br>
  <!-- 如果不想改变标签的内容，可以通过使用 v-once 指令执行一次性地插值，当数据改变时，插值处的内容不会更新。 -->
  <span v-once>这个将不会改变: {{ message }}</span>
</div>

<!-- 在script里写vue代码 -->
<script>
  const HelloVueApp = {
    data() {
      return {
        message: 'Hello Vue!!!'
      }
    }
  }

  Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
</html>

3.2 基础指令： v-html

v-html: 转义输出变量的html变量标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<style>
    .demo { color: blue; font-size: 15px; font-style: italic; }
</style>

<body>
<!--使用 v-html 指令用于输出 html 代码：-->
<div id="example1" class="demo">
    <p>使用双大括号的文本插值: {{ rawHtml }}</p>
    <p>使用 v-html 指令: <span v-html="rawHtml"></span></p>
</div>

<script>
    const RenderHtmlApp = {
        data() {
            return {
                rawHtml: '<span style="color: red">这里会显示红色！</span>'
            }
        }
    }
    Vue.createApp(RenderHtmlApp).mount('#example1')
</script>
</body>
</html>

3.3 基础指令： v-bind

v-bind: 绑定html标签中的属性值
原写法：<div v-bind:title="message">，
可简写为：<div :title="message">
动态事件绑定：<div :[xxx]="message"> , xxx是在data里定义的变量

3.4 基础指令： v-on

v-on：在模板中绑定事件
原写法：<div v-on:clink="handleClick">
简写为：<div v-@click="handleClick">
动态事件绑定：<div @[xxx]="handleClick"> , xxx是在data里定义的变量

3.5 基础指令： v-if

v-if: 在模板中进行判断；

3.6 基础指令： v-show

v-show 根据变量负责DOM的展示与否

3.7 基础指令： ref

ref: 是获取dom节点/组件引用的一个语法
模板语法：<div ref="count">
程序写法：this.$refs.count

3.8 基础指令： v-for

v-for可以直接在模板中循环打印数组和对象, vue要求循环时在模板中增加key值 :key="index"，避免重复渲染。
数组循环案例：v-for="(item, index) in list"
对象循环案例：v-for="(value, key, index) in list"

案例：遍历数组

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Vue App</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="app">
    <div>
      <ol>
        <todo-item v-for="todo in todos" :key="todo.id" :todo="todo">
        </todo-item>
      </ol>
    </div>
  </div>
  <script>
    const App = {
      data() {
        return {
          todos: [
            { id: 1, description: "eat吃饭" },
            { id: 2, description: "drink" },
            { id: 3, description: "sleep" }
          ]
        };
      }
    };

    const app = Vue.createApp(App);

    app.component("todo-item", {
      props: ["todo"],
      template: `<li>{{todo.description}}</li>`
    });

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

注意：循环和判断不能写在一个标签上，否则是没办法进行判断的。

3.9 变更数组的方法

push() : 从数组尾部添加内容
unshift() ：从数组头部添加内容
pop() ：从数组末尾删除内容
shift() ：从数组头部删除内容
sort() ：对数组进行排序
reverse() ：对数组进行取反
split()：从数组中筛选具体的内容

案例：翻转字符串

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

<head>
  <title>Vue App</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="app">
    <p>原字符串：{{message}}</p>
    <p>翻转字符串：{{reversedMessage}}</p>
    <p>翻转结果用-连接{{reversedMessageJoin}}</p>
  </div>
  <script>
    const App = {
      data() {
        return {
          message: "hello world"
        };
      },
      computed: {
        reversedMessage() {
          return this.message.split("").reverse().join("");
        },
        reversedMessageJoin() {
          return this.message.split("").reverse().join(" - ");
        }
      }
    };

    const app = Vue.createApp(App);
    app.mount("#app");
  </script>
</body>
</html>

四. 样式绑定语法

4.1 用字符串绑定动态样式

在data() 方法里定义一个变量，然后用v-bind在模板中绑定属性；

4.2 用对象绑定动态样式

在data() 方法里声明一个对象

4.3 用数组绑定动态样式

在data() 方法里定义一个数组

4.4 行内样式动态绑定

字符串形式：直接在data()方法里，声明一个CSS样式的字符串，然后在模板中进行绑定：

data()中编写：styleString :'coler: yellow'
模板绑定中编写：<div :style="StyleString">
对象形式：在data方法里,声明一个变量，变量是一个对象，然后在模板中进行绑定：

data()中编写：styleObject :'coler: yellow'
模板绑定中编写：<div :style="StyleObject">

建议：建议在工作中使用对象的形式来编写模板中的行内样式动态绑定，因为这样更加直观，字符串拼接也不容易出错。

五. 事件绑定

5.1 事件绑定修饰符

@click.stop ：停止事件冒泡
@click.self ：停止向下传递
@click.prevent ：阻止默认行为
@click.capture ：捕获模式修饰符
@click.once ：事件只绑定一次
@click.passive ：提升滚动性能

@click案例：

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

<head>
  <title>Vue App</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="app">
    <button @click="count++">increment</button>
    count: {{ count }}
  </div>
  <script>
    const Counter = {
      data() {
        return {
          count: 0
        };
      }
    };

    Vue.createApp(Counter).mount("#app");
  </script>
</body>
</html>

5.2 按键绑定修饰符

keydown : 按键就可以触发事件
keydown.enter : 按回车键就可以触发事件
keydown.tab : 按tab键就可以触发
keydown.delete : 按删除键可以触发
keydown.esc : 按esc键时触发
keydown.up : 按上键时触发
keydown.down : 按下键时触发

5.3 鼠标绑定修饰符

click.left : 点击鼠标左键时触发
click.right : 点击鼠标右键时触发
click.middle : 点击鼠标中键触发

5.4 精确修饰符

click.ctrl.exact : 按ctrl和鼠标键才会触发

5.5 双向绑定

v-model：双向绑定的最基本用法

双向数据绑定是建立在单向数据绑定(model==>View)的基础之上的
双向数据绑定的实现流程:
在解析v-model指令时, 给当前元素添加input监听
当input的value发生改变时, 将最新的值赋值给当前表达式所对应的data属性

修饰符：

v-model.lazy ：当失去焦点时才会触发双向绑定；
v-model.number : 自动转变为number类型
v-model.trim ：去掉字符串前后的空格

六. 组件

概念：就是把一个大功能，拆分成一个个子组件，组件是页面中的一部分。

6.1 全局组件

注册全局组件并使用：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
<div id="app">
    <!-- 注册一个简单的全局组件 zidingyi，并使用 -->
    <zidingyi></zidingyi><br>

    <!-- 注册一个 button-counter 组件，在每次点击后，计数器会加 1: -->
    <button-counter></button-counter>
</div>

<script>

    // 创建一个Vue 应用
    const app = Vue.createApp({})

    // 定义一个名为 button-counter 的新全局组件
    app.component('zidingyi', {
        template: `<h1>自定义组件!</h1>`
    })

    // 定义一个名为 button-counter 的新全局组件
    app.component('button-counter', {
        data() {
            return {
                count: 0
            }
        },
        // template 中 ` 是反引号，不是单单引号 '。
        template: `<button @click="count++">点了 {{ count }} 次！</button>`
    })
    app.mount('#app')
</script>
</body>

</html>

6.2 局部组件

局部组件案例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue 测试实例 </title>
  <script src="../js/vue.global.js"></script>
</head>
<body>
<div id="app">
  <comp_a></comp_a>
  <comp_b></comp_b>
</div>
<script>

  var componentsA = {
    template: '<h1>自定义组件-A!</h1>'
  }
  var componentB = {
    template: '<h1>自定义组件-B!</h1>'
  }

  const app = Vue.createApp({
    components: {
      'comp_a': componentsA,
      'comp_b': componentB
    }
  })

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

6.3 组件传值

组件传值案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 </title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<!--类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。
    每当父组件的数据变化时，该变化也会传导给子组件：-->
<div id="app">
    <site-info
            v-for="site in sites"
            :id="site.id"
            :title="site.title"
    ></site-info>

</div>

<script>
    const Site = {
        data() {
            return {
                sites: [
                    { id: 1, title: 'Google' },
                    { id: 2, title: 'Douyin' },
                    { id: 3, title: 'Taobao' }
                ]
            }
        }
    }

    const app = Vue.createApp(Site)

    app.component('site-info', {
        props: ['id','title'],
        template: `<h4>{{ id }} - {{ title }}</h4>`
    })

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

七. 过渡和动画

利用vue去操控css的transition/animation动画
模板: 使用<transition name='xxx'>包含带动画的标签
css样式
	.fade-enter-active: 进入过程, 指定进入的transition
	.fade-leave-active: 离开过程, 指定离开的transition
	.xxx-enter, .xxx-leave-to: 指定隐藏的样式
编码例子
    .xxx-enter-active, .xxx-leave-active {
      transition: opacity .5s
    }
    .xxx-enter, .xxx-leave-to {
      opacity: 0
    }
    
    <transition name="xxx">
      <p v-if="show">hello</p>
    </transition>

八. 路由vue-router

vue用来实现SPA的插件
使用vue-router
    1. 创建路由器: router/index.js
      new VueRouter({
        routes: [
          { // 一般路由
            path: '/about',
            component: about
          },
          { // 自动跳转路由
            path: '/', 
            redirect: '/about'
          }
        ]
      })
    2. 注册路由器: main.js
       import router from './router'
       	new Vue({
       		router
       	})
    3. 使用路由组件标签:
       	<router-link to="/xxx">Go to XXX</router-link>
       	<router-view></router-view>
编写路由的3步
    1. 定义路由组件    
    2. 映射路由
    3. 编写路由2个标签
嵌套路由
    children: [
        {
          path: '/home/news',
          component: news
        },
        {
          path: 'message',
          component: message
        }
     ]
向路由组件传递数据
    params: <router-link to="/home/news/abc/123">
    props: <router-view msg='abc'>
缓存路由组件
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
路由的编程式导航
	this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
	this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
	this.$router.back(): 请求(返回)上一个记录路由