小张张的前端学习笔记一---初识vue3

 

• 文章目录

  目录

   

  文章目录

  前言

  1.如何在你的项目中使用vue.js

  2.使用vite创建项目

    1）vite简介

   2）vite使用

  二.vue必需品 基础介绍

  总结

  ---

  ---

  前言

  不积跬步,无以至千里;不积小流,无以成江海。

初识vue3，从现在开始。

---

一、vue3简单介绍

1.如何在你的项目中使用vue.js

• 在页面上将其作为CDN包导入

出于原型制作或学习目的，不建议用在生产环境

<script src="https://unpkg.com/vue@next"></script>

• 使用npm安装

使用Vue构建大型应用程序时

# latest stable
$ npm install vue@next

• 命令行界面，使用官方的CLI来搭建项目

为单页面应用 (SPA) 快速搭建繁杂的脚手架

// 对于Vue 3，您应该使用Vue CLI v4.5（可从上npm获得）@vue/cli。要升级，您需要在@vue/cli全球范围内重新安装最新版本：
npm install -g @vue/cli

// 然后在项目中运行
vue upgrade --next

2.使用vite创建项目

  1）vite简介

        vite 是一个基于 Vue3 单文件组件的非打包开发服务器，它做到了本地快速开发启动。

 2）vite使用

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

二.vue必需品 基础介绍

         1.vue声明式语法与数据双向绑定

           1） 声明式和命令式

• 声明式：告诉“机器”，你想要什么，不需要关心中间实现过程，我们只需要开始和结果
• 命令式：如果你想要什么，你要告诉“机器”，并且还要告诉“机器”，怎么做，开始、过程、结果都要有

// html

<div id="counter">
  {{ counter }}
</div>

// js

// 命令式
document.querySelector("div").innerHtml = 'hello zz'

// 声明式
const Counter = {
  data() {
    return {
      counter: 0
    }
  }
}

Vue.createApp(Counter).mount('#counter')

 

总结

V3是兼容V2的，所以在不同的场景要选择不同的语法，下面一天将进行Vue3的api的详细介绍。