Vue3学习笔记（一）：基础入门语法知识

由于自己长期混迹于后端，对前端的知识仅有三大件（HTML+css+JavaScript），因此学习一些前端的Vue知识，供公司当全栈牛马使用，为公司省一个前端的钱。 ::aru:shit::

使用vite创建项目

1	npm create vue@latest

/src/main.ts分析

import './assets/main.css'  // 样式

import { createApp } from 'vue'  // 创建app，相当于“花盆”
import App from './App.vue'  // 组件，每一个vue就是一个组件，相当于“花”，App.vue是根组件

// createApp(App)就是种好了花，而mount就是把这个花放在某个地方
// mount('#app')就是把这个App挂载到 /index.html 中的<div id="app"></div>
createApp(App).mount('#app')  //挂载，也就是“把花种入花盆”

App.vue

<!-- App.vue的三种标签 -->
<template>
<!-- HTML  -->
 <div class="app">
    <h1>
        这是我的第一个VueDemo
    </h1>
    <p>
        正在学习App.vue的结构。
    </p>
 </div>
</template>

<script lang="ts">
// js or ts
    import Person from './components/Person.vue'    // 导入组件才能注册

    export default {
        name:'App', //组件名
        components:{Person} //注册组件（注册其他组件，非根组件，这样才能在界面中正确使用）
    }
</script>

<style>
/* css */
#app{
    color: #b13513;
    background-color: antiquewhite;
    border-radius: 20px;
    padding: 5px;
    box-shadow: 0 0 3px;
}
</style>

组合式Api（Vue3）写法，setup

setup是Vue3中一个新的配置项，值是一个函数，组件中所用到的：数据、方法、计算属性、监视……等等，均配置在setup中。

特点如下：

setup函数返回的对象中的内容，可直接在模板中使用。
setup中访问this是undefined。

setup函数会在beforeCreate之前调用，它是“领先”所有钩子执行的。

  

  

  

## 姓名：{{name}}

  

## 年龄：{{age}}

  

修改名字  
年龄+1  
点我查看联系方式

  

  

  

<br /> export default {<br /> name:'Person',<br /> setup(){<br /> // 数据，原来写在data中（注意：此时的name、age、tel数据都不是响应式数据）<br /> let name = '张三'<br /> let age = 18<br /> let tel = '13888888888'</p> <p> // 方法，原来写在methods中<br /> function changeName(){<br /> name = 'zhang-san' //注意：此时这么修改name页面是不变化的<br /> console.log(name)<br /> }<br /> function changeAge(){<br /> age += 1 //注意：此时这么修改age页面是不变化的<br /> console.log(age)<br /> }<br /> function showTel(){<br /> alert(tel)<br /> }</p> <p> // 返回一个对象，对象中的内容，模板中可以直接使用<br /> return {name,age,tel,changeName,changeAge,showTel}<br /> }<br /> }<br />

setup 的返回值

若返回一个对象：则对象中的：属性、方法等，在模板中均可以直接使用**（重点关注）。**
若返回一个函数：则可以自定义渲染内容，代码如下：

1
2
3

setup(){
  return ()=> '你好啊！'
}

setup 与 Options API 的关系(vue3与vue2)

Vue2 的配置（data、methos……）中可以访问到 setup中的属性、方法。
但在setup中不能访问到Vue2的配置（data、methos……）。
如果与Vue2冲突，则setup优先。

setup语法糖（setup简写）

<script lang="ts">
  export default {
    name:'Person',
  }
</script>

<!-- 下面的写法是setup语法糖 -->
<script setup lang="ts">

  // 数据（注意：此时的name不是响应式数据）
  let name = '张三'

  // 方法
  function changName(){
    name = '李四'//注意：此时这么修改name页面是不变化的
  }
</script>

正常情况下需要写两个script 标签，一个用来标识该组件的name，另外一个为setup语法糖。但是有一个插件可以简化这个操作，可以把标识名称的script合并到setup语法糖标签内。
第一步：npm i vite-plugin-vue-setup-extend -D
第二步：vite.config.ts

import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

export default defineConfig({
  plugins: [ VueSetupExtend() ]
})

简写过后为：<script setup lang="ts" name="Person">

导入新组件

<template>
<Fri></Fri>  // 使用
</template>

<script setup lang="ts" name="App">
import Fri from './components/Fri.vue'; // 引入
</script>