Vue3学习

一、创建项目

1.先要安装node.js 16以上的版本
	安装成功后查看版本:node -v
2.在要创建vue项目的文件夹中运行命令:
	npm init vue@latest
	此命令用于创建一个使用最新版本Vue.js的项目
3.在“Project name: ...”后面给项目命名为“vue-base”(小写)
	Project name: ... vue-base
4.进入创建好的项目:
	cd vue-base
5.在项目中安装所需的依赖包:
	npm install 或者 cnpm install(这个快)
6.运行项目:
	npm run dev
7.运行之后,会看到一个地址,在浏览器能访问这个地址,就说明vue项目创建好了
	Local:   http://localhost:5173/

二、开发工具

1.选择合适的开发工具
2.Vue前端开发一般使用vscode + Volar插件,但我是后端开发人员,所以用的idea

三、目录结构

1.认识Vue项目的目录结构

刚刚创建好的“vue-base”项目,在idea中打开是这样的:
Vue3学习_第1张图片

这些文件的作用

.vscode				VSCode工具的配置文件
node_modules		Vue项目的运行依赖文件
public				资源文件夹(浏览器图标)
src					源码文件夹
.gitignore			git忽略文件
index.html			入口HTML文件
package.json		信息描述文件
package-lock.json	确保项目在不同环境中都能复现相同的结果
README.md			注释文件
vite.config.js		Vue配置文件

四、模板语法

1.文本插值

删除一些文件,来试着写一个纯净的案例

  • 新建一个vue项目
  • 删除components文件夹中的所有内容
  • 删除main.js中的:import ‘./assets/main.css’
  • 在App.vue中写以下代码:
<template>
  <h3>模板语法h3>
  <p>{{ msg }}p>
template>


<script>
export default {
  data() {
    return {
      msg: "vue语法"
    }
  }
}
script>

浏览器运行效果:
Vue3学习_第2张图片

2.在html中使用vue语法

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用Javascript表达式title>
head>
<body>

<script src="https://unpkg.com/vue@3/dist/vue.global.js">script>

<div id="app">
    {{ message }}
div>

<script>
    const { createApp, ref } = Vue

    createApp({
        setup() {
            const message = ref('Hello vue!')
            return {
                message
            }
        }
    }).mount('#app')
script>
body>
html>

浏览器效果
在这里插入图片描述

注意:

  • 通过 CDN 使用 Vue 时,不涉及“构建步骤”。这使得设置更加简单,并且可以用于增强静态的 HTML 或与后端框架集成。但是,你将无法使用单文件组件 (SFC) 语法。

3.使用JavaScript表达式

<template>
  <h3>模板语法h3>
  
  <p>{{ msg }}p>

  
  
  <p>{{ num + 3}}p>
  
  <p>{{ ok ? '没毛病' : '有毛病'}}p>
  
  <p>{{message.split("").reverse().join("")}}p>
template>


<script>
export default {
  data() {
    return {
      msg: "vue语法",
      num:10,
      ok:true,
      message:'大家好'
    }
  }
}
script>

无效

  <!--这是一个语句,而非表达式-->
  {{ var a = 1 }}
  <!--不支持条件控制,请使用三元表达式-->
  {{ if (ok) {return message }}}

4.原始html

<template>
  
  
  <p>{{ rawHtml}}p>
  
  <p v-html="rawHtml">p>
template>

<script>
export default {
  data() {
    return {
      rawHtml:"茶碗儿学Vue"
    }
  }
}
script>

浏览器效果
在这里插入图片描述

你可能感兴趣的:(vue.js)