Vue3【为什么选择Vue框架、Vue简介 、Vue API 风格 、Vue开发前的准备 、Vue项目目录结构 、模板语法、属性绑定 、 】(一)-全面详解(学习总结---从入门到深化)

简介: Vue3【为什么选择Vue框架、Vue简介 、Vue API 风格 、Vue开发前的准备 、Vue项目目录结构 、模板语法、属性绑定 、 】(一)-全面详解(学习总结---从入门到深化)

为什么选择Vue框架


Vue是什么?


渐进式 JavaScript 框架,易学易用,性能出色,适用场景丰富的 Web 前端框架


为什么要学习Vue


1 Vue是目前前端最火的框架之一

2 Vue是目前企业技术栈中要求的知识点

3 Vue可以提升开发体验

4 ...


Vue简介



Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任

官网文档地址:https://cn.vuejs.org/ 


渐进式框架


Vue 是一个框架,也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的,不同的开发者在 Web 上 构建的东西可能在形式和规模上会有很大的不同。考虑到这一点, Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景,你可以用不同的方式使用 Vue:


1、无需构建步骤,渐进式增强静态的 HTML

2、在任何页面中作为 Web Components 嵌入

3、单页应用 (SPA)

4、全栈 / 服务端渲染 (SSR)

5、Jamstack / 静态站点生成 (SSG)

6、开发桌面端、移动端、WebGL,甚至是命令行终端中的界面


Vue版本


目前,在开发中,Vue有两个大版本可以选择 Vue2Vue3 ,老项目一 般都是 Vue2 的,而新项目一般都选择 Vue3 开发 我们本套课程讲解版本为 Vue3 ,因为 Vue3 涵盖了 Vue2 的知识体系, 当然 Vue3 也增加了很多新特性


Vue API 风格


Vue 的组件可以按两种不同的风格书写:选项式 API 和组合式 API 大部分的核心概念在这两种风格之间都是通用的。熟悉了一种风格以后,你也能够很快地理解另一种风格


选项式 API (Options API)


使用选项式 API,我们可以用包含多个选项的对象来描述组件的逻辑,例如 datamethodsmounted 。选项所定义的属性都会暴露在函数内部的 this 上,它会指向当前的组件实例

<script>
    export default {
    data() {
      return {
        count: 0
   }
 },
  methods: {
    increment() {
      this.count++
   }
 },
  mounted() {
    console.log(`The initial count is ${this.count}.`)
 }
}
</script>
<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>


组合式 API (Composition API)


通过组合式 API,我们可以使用导入的 API 函数来描述组件逻辑。

<script setup>
import { ref, onMounted } from 'vue'
const count = ref(0)
function increment() {
  count.value++
}
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>
<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>


两种 API 风格都能够覆盖大部分的应用场景。它们只是同一个底层 系统所提供的两套不同的接口。实际上,选项式 API 是在组合式 API 的基础上实现的!关于 Vue 的基础概念和知识在它们之间都是通用的。


在生产项目中


当你不需要使用构建工具,或者打算主要在低复杂度的场景中使用 Vue,例如渐进增强的应用场景,推荐采用选项式 API


当你打算用 Vue 构建完整的单页应用,推荐采用组合式 API + 单文件组件


Vue开发前的准备


构建工具让我们能使用 Vue 单文件组件 (SFC)。Vue 官方的构建流程是基于 Vite 的,一个现代、轻量、极速的构建工具


创建Vue项目


npm init vue@latest


这一指令将会安装并执行 create-vue ,它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application
development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End
testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No /
Yes
Scaffolding project in ./<your-project-name>...
Done.


如果不确定是否要开启某个功能,你可以直接按下回车键选择 No 。 在项目被创建后,通过以下步骤安装依赖并启动开发服务器

cd <your-project-name>
npm install
npm run dev


开发环境


推荐的 IDE 配置是 Visual Studio Code + Volar 扩展


实时效果反馈


1. 创建Vue项目的命令是什么?:

A npm create-vue project

B npm cerate vue project

C npm create-react project

D npm init vue@latest


Vue项目目录结构


我们通过Vue命令行工具 npm init vue@latest 创建项目,会出现很多文件及文件夹


.vscode          --- VSCode工具的配置文件夹
node_modules     --- Vue项目的运行依赖文件夹
public           --- 资源文件夹(浏览器图标)
src              --- 源码文件夹
.gitignore       --- git忽略文件
index.html       --- 入口HTML文件
package.json     --- 信息描述文件
README.md        --- 注释文件
vite.config.js   --- Vue配置文件


模板语法


Vue 使用一种基于 HTML 的模板语法,使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML,可以被符合规范的浏览器和 HTML 解析器解析。


文本插值


最基本的数据绑定形式是文本插值,它使用的是“Mustache”语法 (即双大括号):

<template>
    <p>{{ msg }}</p>
</template>
<script>
export default {
    data(){
        return{
            msg:"神奇的魔法"
       }
   }
}
</script>


使用 JavaScript 表达式


每个绑定仅支持单一表达式,也就是一段能够被求值的 JavaScript 代码。一个简单的判断方法是是否可以合法地写在 return 后面

<template>
    <p>{{ number + 1 }}</p>
    <p>{{ ok ? 'YES' : 'NO' }}</p>
    <p>{{ message.split('').reverse().join('') }}</p>
</template>
<script>
  export default {
    data(){
        return{
            number:10,
            ok:true,
            message:"大家好"
       }
   }
}
</script>


无效

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


原始 HTML


双大括号将会将数据插值为纯文本,而不是 HTML。若想插入 HTML,你需要使用 v-html 指令

<template>
    <p>纯文本: {{ rawHtml }}</p>
    <p>属性: <span v-html="rawHtml"></span>
</p>
</template>
<script>
  export default {
     data(){
        return{
            rawHtml:"<a href='https://itxiaotong.com'>童小纯</a>"
       }
   }
}
</script>


实时效果反馈


1. 下列那个语句可以作为模板语法中的语句:


A {{ var a = 1 }}

B {{ if (ok) { return message } }}

C {{ message.split('').reverse().join('') }}

D {{ if (ok) {} else {} }}


属性绑定


双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute,

应该使用 v-bind 指令

<template>
    <div v-bind:id="dynamicId" v-bind:class="dynamicClass">AppID</div>
</template>
<script>
  export default {
     data(){
        return{
            dynamicId:"appid",
            dynamicClass:"appclass"
       }
   }
}
</script>
<style>
.appclass{
    color: red;
    font-size: 20px;
}
</style>


v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined ,那么该 attribute 将会从渲染的元素上移除


简写


因为 v-bind 非常常用,我们提供了特定的简写语法

<div :id="dynamicId" :class="dynamicClass">
</div>


布尔型 Attribute


布尔型 attribute 依据 true / false 值来决定 attribute 是否应该存在于该元素上, disabled 就是最常见的例子之一

<template>
    <button :disabled="isButtonDisabled">Button</button>
</template>
<script>
  export default {
    data(){
        return{
            isButtonDisabled:true
       }
   }
}
</script>


动态绑定多个值


如果你有像这样的一个包含多个 attribute 的 JavaScript 对象

<template>
    <div v-bind="objectOfAttrs">童小纯</div>
</template>
<script>
export default {
    data() {
        return {
            objectOfAttrs: {
                id: 'container',
                class: 'wrapper'
           }
       }
   }
}
</script>
目录
相关文章
|
17天前
Vue3框架中让table合计居中对齐
Vue3框架中让table合计居中对齐
|
12天前
|
JavaScript 前端开发 API
框架分析(3)-Vue.js
框架分析(3)-Vue.js
|
12天前
|
小程序 前端开发 API
小程序全栈开发中的RESTful API设计
【4月更文挑战第12天】本文探讨了小程序全栈开发中的RESTful API设计,旨在帮助开发者理解和掌握相关技术。RESTful API基于REST架构风格,利用HTTP协议进行数据交互,遵循URI、客户端-服务器架构、无状态通信、标准HTTP方法和资源表述等原则。在小程序开发中,通过资源建模、设计API接口、定义资源表述及实现接口,实现前后端高效分离,提升开发效率和代码质量。小程序前端利用微信API与后端交互,确保数据流通。掌握这些实践将优化小程序全栈开发。
|
13天前
|
JavaScript 前端开发 API
Vue3 组合式 API
Vue3 组合式 API
|
13天前
|
JavaScript API
vue 模板引用
vue 模板引用
|
13天前
|
JavaScript 前端开发
vue绑定数组
vue绑定数组
|
17天前
|
JavaScript
Vue绑定style和class 对象写法
Vue绑定style和class 对象写法
|
21天前
|
前端开发 Java API
构建RESTful API:Java中的RESTful服务开发
【4月更文挑战第3天】本文介绍了在Java环境中构建RESTful API的重要性及方法。遵循REST原则,利用HTTP方法处理资源,实现CRUD操作。在Java中,常用框架如Spring MVC简化了RESTful服务开发,包括定义资源、设计表示层、实现CRUD、考虑安全性、文档和测试。通过Spring MVC示例展示了创建RESTful服务的步骤,强调了其在现代Web服务开发中的关键角色,有助于提升互操作性和用户体验。
构建RESTful API:Java中的RESTful服务开发
|
26天前
|
机器学习/深度学习 前端开发 API
实现以图搜货功能,淘宝API开发实战分享
实现以图搜货功能,淘宝API开发实战分享
24 0
|
29天前
|
JavaScript 前端开发 算法
深入探讨前端框架Vue.js中的虚拟DOM机制
本文将深入探讨前端框架Vue.js中的虚拟DOM机制,分析其原理、优势以及在实际开发中的应用场景,帮助读者更好地理解Vue.js框架的核心特性。