Vue3系统学习

1. 构建Vue项目

1.1 安装与运行

进到目标目录，启动官方给出的脚手架命令

npm init vue@latest

然后根据提示创建项目

注：名字中不要有大写字母

然后进到创建的项目目录下，执行安装命令

npm install

(然后可以尝试运行这个项目)

npm run dev

1.2 项目目录结构

• node_modules:Vue项目的运行依赖文件夹
• public:资源文件夹（如浏览器图标等）
• src:源码文件夹
• .gitignore:Git忽略文件
• index.html:入口html文件
• package.json:信息描述文件
• README.md:注释文件
• vite.config.js:Vue配置文件

注：执行npm install命令就是为了通过读取package.json文件来安装node_modules文件夹

2.使用Vue语法

通过修改App.vue文件可以做Vue项目的开发,如：

<script>

export default{

    data(){

        return{

            msg:"神奇的语法"

        }

    }

}

</script>

  

<template>

    <h3>{{ msg }}</h3>

</template>

  

<style scoped></style>

注：<script setup> 与 <script>是不同的

2.1 JavaScript表达式

每个绑定仅支持单一表达式，也就是一段能够被求值的JavaScript代码（即要有一个值，而非变量。与switch括号里的规则类似）,如：

<script>

export default{

    data(){

        return{

            msg:"神奇的语法",

            ok:true,

            number:10

        }

    }

}

</script>

  

<template>

    <p>{{ number+1 }}</p>

    <p>{{ ok? 'Yes':'No' }}</p>

    <p>{{ msg.split('').reverse().join('') }}</p>

</template>

  

<style scoped></style>

无效：

<!-- 这是一个语句，而非表达式 -->
{{ var a = 1 }}

<!-- 条件控制也不支持，请使用三目运算符 -->
{{ if(ok) { return message } }}

2.2插入原始HTML

双大括号会将数据插值为纯文本，而非原始HTML。若想插入HTML代码，需要使用v-html指令，如：

<script>

export default{

    data(){

        return{

            rawHTML:"<a href='https://www.baidu.com'>点击跳转百度</a>"

        }

    }

}

</script>

  

<template>

    <p>插入文本html{{ rawHTML }}</p>

    <p>插入html代码：</p>

    <p><span v-html="rawHTML"></span></p>

</template>

  

<style scoped></style>