跟着Vue官方文档，学习Vue3第一周，知识回顾总结

最新推荐文章于 2023-10-11 22:07:18 发布

一位迷途知返的软工同学

最新推荐文章于 2023-10-11 22:07:18 发布

阅读量180

点赞数

文章标签： vue.js javascript 学习

本文链接：https://blog.csdn.net/qq_48773620/article/details/126314953

版权

本文回顾了学习Vue3第一周的内容，包括Vue的基本介绍、API风格、采用构建工具Vite的使用、单文件组件（SFC）及其工作模式，以及Vue应用的核心概念如声明式渲染、响应式基础和生命周期钩子。Vue3强调数据驱动视图，通过createApp创建应用实例，并使用v-bind进行属性绑定，响应式状态的变化会驱动DOM更新。

摘要由CSDN通过智能技术生成

Vue基本介绍

简介：Vue是构建用户界面的JavaScript框架（渐进）。
特点：数据驱动视图

JavaScript、JQuery、Vue对比

JavaScipt：document.querySelector
JQuery：封装方法，简化了操作代码$(’ ')
Vue:开发者只需要操作数据包，不需要操作DOM，Vue帮我们操作DOM

最基本的使用

<div id="app">
        <button @click="num++">num:{{num}}</button>
    </div>

<script src="../vue.global.js"></script>
    <script>
        let app = Vue.createApp({
            data() {
                return {
                    num: 0
                }
            }
        })
        app.mount('#app')
    </script>

结果：
初始化
点击，data里num发生变化
最基本的案例（还未使用构建工具）向我们展示了Vue连个核心功能：
声明式渲染 和 响应式
声明式渲染 ：Vue相当于是拓展开了一套模板语法，这样就可以声明式地描述最终输出结果和js状态之间的关系
响应式：js的状态发生变化，而DOM也在跟着变化，这就是响应式

API风格

Vue组件有两种不同的风格：选项式API 和 组合式API
在最初学习的时候，我就先熟悉选项式API

 <div id="app">
        <button @click="add">num:{{num}}</button>
    </div>

 let app = Vue.createApp({
            // data()返回的属性将成为响应式，DOM也会随着data里属性的变化而变化，并且暴露在this上
            data() {
                return {
                    num: 0
                }
            },
            //methods 触发更新的函数以及改变状态的都放在这里面
            methods: {
                add() {
                    this.num++
                }
            },
            // 生命周期函数会在不同阶段被调用
            updated() {
                console.log("我被调用了");
            },
        })
        app.mount('#app')

在这里插入图片描述
如上图所示，每当点击一次时，updated就会被调用输出一次（后面会总结生命周期函数，这里只是体验一下选项式API）

采用构建工具

脚手架

在开发比较大的项目中，搭建更高级的开发环境
@vue/cli 官网
@vite官网

vite的使用

在使用vite搭建项目结构，要下载Node.js，且版本必须要是14.18以上
使用步骤：

npm create vite@latest
安装依赖，启动项目
cd vite-project 进入项目目录
npm i 安装项目的依赖，只需要在第一次创建项目的时候执行
npm run dev 启动项目
在浏览器预览项目

单文件组件（SFC）

SFC是一种特殊的文件格式，每一个Vue组件的模板、逻辑、样式单独封装在单个文件种。(以下我都先用选项式API学习)

<script>
export default {
  data() {
    data() {
    return{
          msg: "hi"
    }
  }
  },
};
</script>

<template>
  <div>
    <p class="title">{{ msg }}</p>
  </div>
</template>

// style 带有 scoped 时，css只会影响当前组件的元素
<style lang="scss" scoped>
.title {
  background-color: pink;
}
</style>

单文件组件相当于是对HTML\CSS\JavaScript三种语言的延伸
<script>：里面封装了组件逻辑
<template>:里面封装了组件的视图
<style>：里面封装了组件的样式

SFC的工作模式

SFC是Vue框架指定的文件格式，必须交给@vue/compiler-sfc编译为标准的JavaScript和CSS，每个编译后的SFC是一个标准的ES模块，在构建配置正确情况下，就可以像导入其它ES模块一样导入SFC了

<script>
import myFirst from "./components/myfirst.vue";
export default{
  //components只是注册了局部组件，注册之后只能在当前页面使用
    components:{
      myFirst
    }
}
</script>

<template>
  <div>
    <myFirst />
  </div>
</template>

<style scoped>

</style>

vue应用

每个Vue都是通过createApp函数创建的新的应用实例

实际上 createApp 的对象也是一个组件，每个应用都要有”根组件“

App (root component)
├─ TodoList
│  └─ TodoItem
│     ├─ TodoDeleteButton
│     └─ TodoEditButton
└─ TodoFooter
   ├─ TodoClearButton
   └─ TodoStatistics

挂载应用

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

app.mount('#app')

根组件内容会渲染在容器元素里卖弄，但是容器元素不会被视为应用的一部分

文本插值

<p>msg:{{msg}}</p>

msg属性变化时，DOM也会同步更新

Attribute绑定

想要响应式地绑定一个属性，要用到v-bind指令
<p v-bind:class="box></p>"
以上地例子是，将元素地class属性与组件地box属性一样，如果绑定地值为null或者undefined，那么属性将会在元素上消失
简写<p :class="box"></p>

响应式基础

声明响应式状态

<script>
export default {
  data() {
    return{
          msg: "hi"
    }
  },
  mounted(){
  //this 指向当前组件实例
 console.log(this.msg)
// 数据属性也可以被更改
this.msg='~hi~'}
};

实例的属性写在data函数返回对象上，在首次创建时就被添加了。也可以不在data上定义，但是这个属性无法触发响应式更新

声明方法

<script>
export default {
  data() {
    return{
          msg: "hi",
          num=0
    }
  },
  //为组件添加方法，要用到methods
  methods () {
    addNum(){
     this.num++
}
  },
};
</script>