Vue3-知识结构-基础语法

Vue3知识结构之基础语法

---

---

一、vue知识铺垫

由于vue不能直接被浏览器所识别，因此通过vite/webpack编译器，将v-Dom=>编译为浏览器解释的Dom；Sass/Scss/Less 预编译型的css语言=>编译为浏览器解释的css；TypeScript 编译为浏览器解释的javaScript。

二、vue项目搭建

1.快速使用

1.安装node.js
2.在终端创建基于Vite的vue项目 npm init vue@latest
3.安装依赖 npm i
4.预览页面 npm run dev

2.js文件(export&import)

import { router } from './router/index.js'

export { router }

三、选项式API和组合式API

1.选项式API

基础语法格式 如下：

<script>
export default {
    name: 'OptionAPI',
    data() {
        return {
            numAmount: 100,
    },
    methods: {
        addnumAmount() {
            this.numAmount++;
        }
}
</script>

2.组合式API

基础语法格式 如下：

<script setup>
import {ref} from 'vue'
let numAmount=ref(100);
function addnumAmount (){
    numAmount.value++;
}
</script>

---

四、常用指令

v-html：内容渲染指令，可以渲染带有标签的内容
v-model：双向绑定，只能配合表单元素使用
v-for：列表渲染
v-if/v-else-if/v-else：动态创建或移除Dom元素
v-show：动态为元素添加和移除style=’display:none’样式
v-once：元素或组件渲染一次

<template>
    <div class="title">指令(Directive)</div>
    <div class="unitBar">
        <span>v-html</span>
    </div>
    <div class="vhtml inner">
        <div>{{ htmlStrDemo }}</div>
    </div>
    <div class="vhtml inner">
        <div v-html="htmlStrDemo"></div>
    </div>
    <div></div>
    <hr>
    <div class="unitBar">
        <span>v-if/ v-else-if /v-else</span>
    </div>
    <div class="unitBar">
        <span class="vif inner" v-if="numflag === 1">第1个span标签</span>
        <span class="vif inner" v-else-if="numflag === 2">第2个span标签</span>
        <span class="vif inner" v-else>第1个span标签</span>
    </div>
    <hr>
    <div class="unitBar">
        <span>v-show</span>
    </div>
    <div class="unitBar">
        <span class="inner" v-show="numflag === 1">v-show span标签 会被渲染</span>
    </div>
    <hr>
    <div class="unitBar">
        <span>v-once</span>
    </div>
    <div class="inner vonce">
        <span>{{ numonce }}</span>
        <span v-once>{{ numonce }}</span>
        <button @click="addNumonce">numonce++</button>
    </div>
</template>
<script>
export default {
    name: 'Directive',
    data() {
        return {
            htmlStrDemo: "<img src='/pic/1.jpg' style='height:240px'>",
            numflag: 1,
            numonce: 100,
        }
    },
    methods: {
        addNumonce() {
            this.numonce++;
        }
    }
}
</script>

五、全局属性

在main.js中定义

const AppNew = createApp(App);
AppNew.config.globalProperties.$countriesData = [];//全局属性

在组件中使用 如下

 import { getCurrentInstance,ref } from 'vue';
 const{proxy}=getCurrentInstance();
 let dataArray=ref(proxy.$countriesData);