Vue3知识汇总

最新推荐文章于 2024-06-20 18:24:25 发布

osmundZ

最新推荐文章于 2024-06-20 18:24:25 发布

阅读量554

点赞数

本文链接：https://blog.csdn.net/weixin_45455252/article/details/119043806

版权

Vue3 是一个渐进式框架，注重视图层，提供响应式数据绑定和组件化。本文涵盖Vue3的简介、安装（推荐Vite）、模板语法、条件语句、循环语句、组件、计算属性、监听属性、样式绑定、事件处理、表单、自定义指令、路由和Ajax使用。通过实例介绍了Vue3的各个核心特性，帮助开发者快速上手Vue3开发。

摘要由CSDN通过智能技术生成

文章目录

- Vue3

Vue3

Vue3 简介

Vue.js是一套构建用户界面的渐进式框架，只关注视图层，采用自底向上增量开发，通过尽可能简单的API来实现响应式的数据绑定和组合。

第一个Vue实例：

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

<body>
    <div id="hello-vue" class="demo">
        {
  {message}}
    </div>
    <script>
        const HelloVueApp = {
    
            data() {
    
                return {
    
                    message:'Hello Vue!!'
                }
            },
        }

        Vue.createApp(HelloVueApp).mount('#hello-vue');
    </script>
</body>

Vue3 安装

在使用Vue时，一般直接使用<script>标签引入：

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

Vue-cli安装

	# 全局安装 vue-cli
	$ cnpm install -g @vue/cli
	# 安装完后查看版本
	$ vue --version
	@vue/cli 4.5.11
	
	安装 @vue/cli-int：
	$ cnpm i -g @vue/cli-init

创建项目，进行一些配置：

$ vue init webpack runoob-vue3-test
# 这里需要进行一些配置，默认回车即可
? Project name runoob-vue3-test
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

  vue-cli · Generated "runoob-vue3-test".
  
  # Installing project dependencies ..
  # ========================
  ...

进入项目，安装并运行：

$ cd runoob-vue3-test
$ cnpm run dev

Vite安装（推荐）

Vite是一个web开发构建工具。

使用Vite快速构建Vue项目的语法格式：

npm init @vitejs/app <project-name>

创建项目：

$  cnpm init @vitejs/app runoob-vue3-test2

运行项目：

$ cd runoob-vue3-test2
$ cnpm install
$ cnpm run dev
> runoob-vue3-test2@0.0.0 dev/Users/tianqixin/runoob-test/vue3/runoob-vue3-test2
> vite

[vite] Optimizable dependencies detected:
vue

  Dev server running at:
   > Local:    http://localhost:3000/

Vue3 目录结构

使用Vite创建项目后的目录结构：

node_modules：npm 加载的项目依赖模块
public：公共资源目录
src：这里是我们要开发的目录，基本上要做的事情都在这个目录里
1. assets: 放置一些图片，如logo等
2. components: 目录里面放了一个组件文件，可以不用
3. App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录
4. main.js: 项目的核心文件
5. index.css: 样式文件
.xxxx文件：这些是一些配置文件，包括语法配置，git配置等
index.html：首页入口文件，你可以添加一些 meta 信息或统计代码啥的
package.json：项目配置文件

Vue3 起步

刚开始学习Vue，一般就只写简单的单页面，不考虑整个项目时，不需要用很复杂的创建项目的步骤来开始Vue，直接在需要使用的页面中引入即可：

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

Vue3中的应用通过createApp函数来创建，传递给createAPP的选项用于配置根组件。

const app = Vue.createApp({
    ... })

使用mount()函数挂载应用，根组件被用作渲染的起点。

Vue.createApp(HelloVueApp).mount('#hello-vue')

createApp({ … })内部，填写自定义的数据和方法：

const app = Vue.createApp({
   
  data() {
   
    return {
    count: 4 }
  },
  methods: {
   
    increment() {
   
      // `this` 指向该组件实例
      this.count++
    }
  }
})

data选项返回一个对象，对象是自己定义的一些数据。

methods选项中书写自定义的方法。

Vue3 模板语法

Vue的核心是允许采用简洁的模板语法来声明式的将数据渲染进DOM的系统。在应用状态改变时，Vue能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。

Vue使用基于HTML的模板语法，使开发者能声明式的将DOM绑定至底层Vue实例的数据。

插值

文本
数据绑定最常见的形式，使用{ {…}} （双大括号）的文本插值

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

因为Vue的数据绑定是可以实时更改的，所以一旦message的数据改变时，整个页面上用到message的地方都会产生变化，可以通过v-once指令来执行一次性地插值，这样当数据改变时，此处的内容不会变化。

<p v-once>{
  {message}} </p>

html
使用v-html指令可以输出html代码：

<span v-html="rawHtml"></span>

浏览器会解析rawHtml数据的内容，并将解析后的结果呈现在页面上。

属性
v-bind指令可以设置HTML属性

<div v-bind:class="{
    'class1': use}">
    v-bind:class 指令
  </div>

表达式
Vue.js完全支持JavaScript表达式，无论是在指令中还是在{ {…}}中都可以使用表达式。

指令

在Vue.js中，指令是带有v-前缀的特殊属性，指令用于在表达式地值改变时，将某些行为应用到DOM上。

参数
参数在指令后以冒号指明：

<a v-bind:href="url">CSDN</a>

修饰符
修饰符是以.指明地特殊后缀，用于指出一个指令应该以特殊方式绑定。

<form v-on:submit.prevent

最低0.47元/天解锁文章

osmundZ

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue3知识汇总

文章目录Vue3Vue3 简介Vue3 安装Vue-cli安装Vite安装（推荐）Vue3 目录结构Vue3 起步Vue3 模板语法插值指令用户输入缩写Vue3 条件语句Vue3 循环语句显示过滤/排序后的结果在组件上使用v-forVue3 组件全局组件局部组件PropVue3 计算属性Vue3 监听属性Vue3 样式绑定Vue3 事件处理Vue3 表单Vue3 自定义指令Vue3 路由Vue3 混入Vue3 Ajax(axios)Vue3Vue3 简介Vue.js是一套构建用户界面的渐进式框架，只关
复制链接

扫一扫