网站建设费一般是什么费用,张北县网站建设,人动物做电影网站,wordpress 51Vue的简介
一、什么是vue?
Vue是一款用于构建用户界面的javascript框架。它基于标准的HTML、CSS、JS进行构建#xff0c;并且提供的一套声明式的#xff0c;组件化的编程模型#xff0c;进而帮助我们高效开发用户界面。无论是复杂还是简单的界面#xff0c;我们都可以用…Vue的简介
一、什么是vue?
Vue是一款用于构建用户界面的javascript框架。它基于标准的HTML、CSS、JS进行构建并且提供的一套声明式的组件化的编程模型进而帮助我们高效开发用户界面。无论是复杂还是简单的界面我们都可以用vue进行胜任的。
基本的示例如下:
import { createApp, ref } from vuecreateApp({setup() {return {count: ref(0)}}
}).mount(#app)div idappbutton clickcountCount is: {{ count }}/button
/div以上的示例可以完全给我们进行展示了Vue的两大核心的功能
声明响应式Vue基于标准的HTML拓展的一套模板语法使得我们可以声明式的描述最终输出的HTML和Javascript状态直接的关系响应式vue会进行自动的跟踪javascript状态并在其发生变化时响应式的更新DOM.
二、Vue的优势特点
1- 渐进式框架
vue是一个框架也是一个生态。其功能已经覆盖了大部分前端的常见开发的需求了。为了考虑到web世界的多样化满足不同开发者的需求这里vue同样的也设计的更加的灵活和“可以被逐步集成”这个特点。我们根据需求场景的不同可以用不同的方式使用Vue的 独立脚本 Vue 可以以一个单独 JS 文件的形式使用无需构建步骤如果你的后端框架已经渲染了大部分的 HTML或者你的前端逻辑并不复杂不需要构建步骤这是最简单的使用 Vue 的方式。在这些场景中你可以将 Vue 看作一个更加声明式的 jQuery 替代品 作为 Web Component 嵌入 你可以用 Vue 来构建标准的 Web Component这些 Web Component 可以嵌入到任何 HTML 页面中无论它们是如何被渲染的。这个方式让你能够在不需要顾虑最终使用场景的情况下使用 Vue因为生成的 Web Component 可以嵌入到旧应用、静态 HTML甚至用其他框架构建的应用中。 单页面应用 (SPA) 一些应用在前端需要具有丰富的交互性、较深的会话和复杂的状态逻辑。构建这类应用的最佳方法是使用这样一种架构Vue 不仅控制整个页面还负责处理抓取新数据并在无需重新加载的前提下处理页面切换。这种类型的应用通常称为单页应用 (Single-Page application缩写为 SPA)。 Vue 提供了核心功能库和全面的工具链支持为现代 SPA 提供了极佳的开发体验覆盖以下方面 1客户端路由 2极其快速的构建工具 3IDE 支持 4浏览器开发工具 5TypeScript 支持 6测试工具 全栈 / SSR 纯客户端的 SPA 在首屏加载和 SEO 方面有显著的问题因为浏览器会收到一个巨大的 HTML 空页面只有等到 JavaScript 加载完毕才会渲染出内容。 JAMStack / SSG 如果所需的数据是静态的那么服务端渲染可以提前完成。这意味着我们可以将整个应用预渲染为 HTML并将其作为静态文件部署。这增强了站点的性能表现也使部署变得更容易因为我们无需根据请求动态地渲染页面。Vue 仍可通过激活在客户端提供交互。这一技术通常被称为静态站点生成 (SSG)也被称为 JAMStack。
2- 单文件组件
顾名思义单文件的组件会将一个组件的逻辑JS模板HTML和样式CSS封装在同一个的文件里面。 定义在大多数启用了构建工具的 Vue 项目中我们可以使用一种类似 HTML 格式的文件来书写 Vue 组件它被称为单文件组件 (也被称为 *.vue 文件英文 Single-File Components缩写为 SFC)
script setup
import { ref } from vue
const count ref(0)
/scripttemplatebutton clickcountCount is: {{ count }}/button
/templatestyle scoped
button {font-weight: bold;
}
/style3- API 风格
Vue 的组件可以按两种不同的风格书写选项式 API 和组合式 API。
1、选项式 API (Options API) 使用选项式 API我们可以用包含多个选项的对象来描述组件的逻辑例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上它会指向当前的组件实例。
示例如下
script
export default {// data() 返回的属性将会成为响应式的状态// 并且暴露在 this 上data() {return {count: 0}},// methods 是一些用来更改状态与触发更新的函数// 它们可以在模板中作为事件处理器绑定methods: {increment() {this.count}},// 生命周期钩子会在组件生命周期的各个不同阶段被调用// 例如这个函数就会在组件挂载完成后被调用mounted() {console.log(The initial count is ${this.count}.)}
}
/scripttemplatebutton clickincrementCount is: {{ count }}/button
/template2、组合式 API (Composition API) 组合式API我们可以通过导入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}.)
})
/scripttemplatebutton clickincrementCount is: {{ count }}/button
/template两个的API具体的选择和使用
两种 API 风格都能够覆盖大部分的应用场景。它们只是同一个底层系统所提供的两套不同的接口。实际上选项式 API 是在组合式 API 的基础上实现的关于 Vue 的基础概念和知识在它们之间都是通用的。
二者比较具体使用
选项式 API 以“组件实例”的概念为中心 (即上述例子中的 this)对于有面向对象语言背景的用户来说这通常与基于类的心智模型更为一致。同时它将响应性相关的细节抽象出来并强制按照选项来组织代码从而对初学者而言更为友好。
组合式 API 的核心思想是直接在函数作用域内定义响应式状态变量并将从多个函数中得到的状态组合起来处理复杂问题。这种形式更加自由也需要你对 Vue 的响应式系统有更深的理解才能高效使用。相应的它的灵活性也使得组织和重用逻辑的模式变得更加强大。
当你不需要使用构建工具或者打算主要在低复杂度的场景中使用 Vue例如渐进增强的应用场景推荐采用选项式 API当你打算用 Vue 构建完整的单页应用推荐采用组合式 API 单文件组件。
Vue3的介绍和具体使用
一、基础知识
1- Vue3概述
Vue3是一个流行的JavaScript框架用于构建用户界面。它是Vue.js框架的下一个主要版本由Evan You领导的Vue.js团队开发
Vue3于2020年9月正式发布相比于Vue2Vue3在性能、响应式系统、TypeScript支持、Composition API等方面进行了大量改进和优化。
Vue3的响应式系统采用了ES6 Proxy对象提高了响应式系统的性能和稳定性并且允许更好的TypeScript支持。Composition API是一个新的API它允许按逻辑组织代码提高代码的可维护性和重用性。此外Vue3还具有更好的Tree-shaking支持提高了应用程序的性能。
总体而言Vue3是一个优秀的框架它在性能、开发体验和可维护性方面都有所提高是开发现代Web应用程序的不错选择
2- Vue3的特性和优势
Vue3作为目前Vue.js框架的最新版本有许多优势和特性的具体包括如下
更快的渲染速度和更小的包体积Vue3通过优化虚拟DOM的实现和使用静态提升技术等方法显著提高渲染速度和减小了包体积。有更好的TS支持Vue3中对TypeScript的支持更加友好包括提供了更完整的类型定义和支持装饰器的语法组合式APIComposition APIVue3里面引入了Composition API提供了更灵活、更可重用和更易于测试的组件逻辑复用方式。更好的响应式系统Vue3的响应式通过proxy代理对象代替了Object.defineProperty实现提高了性能并且可以更好的支持嵌套对象和数组。更好的调试工具支持Vue3提供了更好的调试工具的支持包括可视化组件树和性能分析工具等。更好的Three Shaking的支持Vue3通过优化内部使用的依赖关系更好的支持Tree Shaking,减小了包体积。
总的来说Vue3给我们带来了更快更灵活更易于使用更好的开发体验和更好的性能的。
3- Vue3的生命周期
Vue3的生命周期相比较Vue2来说进行了一些优化和调整不过总得来说大同小异的。以下是Vue3的生命周期函数
1beforeCreate实例初始化之后数据观测data observer和event/watcher事件配置之前被调用的。2created实例已经创建完成后被调用。在这个阶段模板已经编译完成了但是还没有挂载到DOM上面。3beforeMount在挂载开始之前被调用即在render函数首次被调用之前。4mount实例挂载完成之后被调用这个时候DOM元素已经完全被渲染出来了。5beforeUpdate数据更新时被调用发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子函数中进行更改数据。6update数据更改导致虚拟DOM重新渲染和打补丁完成时候调用。7beforeUnmount实例卸载之前调用可以在这里做一些清理工作。8unmounted实例卸载之后调用这里没有 this所以无法访问数据和方法。9errorCaptured捕获子孙组件抛出的异常。被调用时可以返回 false 以阻止该异常继续向上传播。
注意点Vue3去掉了beforeDestroy和destroyed两个生命周期取而代之的是beforeUnmount和unmounted。因为在Vue3中所有的组件都被设计成了Teleport即可以被迁移的而不是被销毁的。因此在组件卸载之前会执行beforeUnmount而在组件被卸载之后会执行unmounted。
4- Vue3的模板语法
1插值表达式 Vue3中的插值表达式使用双大括号{{}}例如{{ message }}。Vue3也支持在插值表达式中使用JavaScript表达式。
templatedivh1{{ title }}/h1p{{ message }}/pp{{ num1 num2 }}/p/div
/templatescript
export default {data() {return {title: Hello Vue 3!,message: This is a message,num1: 10,num2: 20}}
}
/script2指令 Vue3中的指令使用v-前缀例如v-if、v-for、v-bind等。Vue3还引入了一些新的指令如v-model的语法被改变现在使用v-model:value和v-model:modifier来实现双向绑定和修饰符。此外还有一些新的指令如v-html、v-show、v-suspense等。
v-bind用于绑定HTML属性和组件props可以简写为“:”
templatedivimg :srcimageUrl altimagemy-component :prop1data1 :prop2data2/my-component/div
/templatescript
export default {data() {return {imageUrl: https://example.com/image.png,data1: prop1,data2: prop2}}
}
/scriptv-on用于绑定事件处理函数可以简写为“”
templatedivbutton clickclickHandlerClick me/button/div
/templatescript
export default {methods: {clickHandler() {console.log(button clicked);}}
}
/scriptv-if用于条件渲染根据表达式的值决定是否渲染该元素
templatedivp v-ifshowThis is a paragraph/p/div
/templatescript
export default {data() {return {show: true}}
}
/scriptv-for用于循环渲染渲染数组中的每一个元素
templatedivulli v-for(item, index) in items :keyindex{{ item }}/li/ul/div
/templatescript
export default {data() {return {items: [item1, item2, item3]}}
}
/script5Vue3的计算属性和侦听器
计算属性是根据已有的属性值响应式依赖计算出一个新的值相当于是一个带有缓存的方法只要依赖的数据没有改变计算属性就不会重新计算。
例如我们可以使用计算属性来根据数据列表过滤出需要展示的数据
templatedivinput typetext v-modelkeyword /ulli v-foritem in filteredList :key403 Forbidden{{ item.title }}/li/ul/div
/templatescript
import { ref, computed } from vue;export default {setup() {const list ref([{ id: 1, title: Apple },{ id: 2, title: Banana },{ id: 3, title: Orange },{ id: 4, title: Pear },]);const keyword ref();const filteredList computed(() {return list.value.filter((item) {return item.title.toLowerCase().indexOf(keyword.value.toLowerCase()) ! -1;});});return {keyword,filteredList,};},
};
/script侦听器是用于监听数据变化并触发一些操作的方法它可以监听到数据的变化并执行相应的操作。在 Vue3 中我们可以使用 watch 函数来创建侦听器
templatedivpCount: {{ count }}/pbutton clickincrementIncrement/button/div
/templatescript
import { ref, watch } from vue;export default {setup() {const count ref(0);watch(count, (newValue, oldValue) {console.log(count changed from ${oldValue} to ${newValue});});function increment() {count.value;}return {count,increment,};},
};
/script上面的代码中我们使用 watch 函数来监听 count 变量的变化并在变化时打印出新旧值。当用户点击 “Increment” 按钮时count 变量的值会增加并触发 watch 函数。
6、Vue3的事件处理
在Vue3中事件处理是通过在模板中使用符号来绑定事件。例如我们可以使用click来绑定click事件如下所示
templatebutton clickhandleClickClick me!/button
/template在上面的代码中我们绑定了一个click事件到button元素并指定了一个名为handleClick的方法来处理该事件。
与传统的事件绑定不同Vue3的事件处理方法使用了一个特殊的修饰符语法。这些修饰符可以用来指定事件的一些行为例如阻止事件冒泡或取消默认行为。以下是一些常用的事件修饰符
.stop阻止事件冒泡。.prevent取消事件的默认行为。.capture事件在捕获阶段被处理。.self只当事件发生在该元素本身而不是子元素时触发。.once事件只会触发一次。.passive告诉浏览器不需要等待事件处理函数完成就可以滚动页面。
下面是使用装饰费的示例
templatediv click.stop.preventhandleClickClick me!/div
/template在上面的代码中我们使用了.stop和.prevent修饰符来阻止事件冒泡和取消默认行为。
除了常规的DOM事件外Vue3还提供了自定义事件。我们可以使用$emit方法来触发自定义事件然后在父组件中使用v-on来监听这些事件。以下是一个使用自定义事件的示例
templatebutton clickhandleClickClick me!/button
/templatescript
export default {methods: {handleClick() {this.$emit(custom-event, Hello, world!);}}
};
/script在上面的代码中我们定义了一个名为custom-event的自定义事件并在点击事件中使用$emit方法触发该事件。在父组件中我们可以使用v-on:custom-event来监听该事件。例如
templatemy-component custom-eventhandleCustomEvent/my-component
/templatescript
import MyComponent from ./MyComponent.vue;export default {components: {MyComponent},methods: {handleCustomEvent(message) {console.log(message); // 输出Hello, world!}}
};
/script在上面的代码中我们在父组件中使用custom-event来监听自定义事件并在handleCustomEvent方法中获取传递的参数。
二、组件化开发
1- Vue3的组件化开发
Vue3 是一个基于组件化开发的前端框架因此组件化开发是 Vue3 的核心。Vue3 组件是由一组可复用的模板、样式和逻辑组成的它可以被其他组件或者页面引用。
组件的核心是一个 Vue 实例它可以使用 Vue 提供的选项进行配置例如 data、methods、computed 等选项。一个 Vue 组件可以接受父组件传递的参数也可以向父组件发送事件。
Vue3 提供了一个 defineComponent 函数来定义组件这个函数接收一个配置对象作为参数配置对象中包含了组件的各种选项。 下面是关于Vue组件的简单示例
templatediv classcounterh1{{ count }}/h1button clickincrement1/button/div
/templatescript
import { defineComponent, ref } from vue;export default defineComponent({name: Counter,setup() {const count ref(0);const increment () {count.value;};return {count,increment,};},
});
/scriptstyle
.counter {display: flex;flex-direction: column;align-items: center;
}
/style在这个组件里面我们使用Vue3的defineComponent函数定义一个名为Counter的组件。组件中有一个count变量和一个increment方法count变量的初始值是0increment方法每次调用可以把count值加1。我们使用了插值表达式将 count 的值渲染到页面中并使用 click 指令绑定了 increment 方法。
这个示例展示了 Vue3 组件的基本结构包括模板、脚本和样式。在 setup 函数中定义组件的状态和行为然后将它们返回让模板可以访问。
2- Vue的组件通信详解
Vue3中的组件通信可以使用props和事件两种方式来实现。
1props通信如下 props主要是父组件向子组件传递数据的方式。子组件通过props进行接手数据这种数据流是单向的。即只能从父组件流向子组件的。 父组件中使用props向子组件进行传递数据
Vue2里面的写法
templatechild-component :messagemessageFromParent /
/template
script
import ChildComponent from ./ChildComponent.vue;export default {components: {ChildComponent},data() {return {messageFromParent: Hello from parent}}
}
/script在子组件中我们通过props进行接收数据
templatediv{{ message }}/div
/template
script
export default {props: {message: {type: String,default: }}
}
/scriptvue3里面的写法
templatediv这里是父组件/divinput typetext v-modelinputMsg/divinputMsg:{{inputMsg}}/divdivmsg:{{msg}}/divdivbutton clickchangeMsg点击修改/button/divdiv stylemargin: 10px;分割线-------------------------/divchildView:toMsgmsg:toFuncfunc
/childView/templatescript setup
import { reactive, ref } from vue;
import childView from ./edit.vueconst inputMsg ref(这里是父组件的消息)
const msg ref()const func () {changeMsg()
}const changeMsg () {msg.value inputMsg.value
}/script子组件
templatedivdiv这里是子组件/divdiv收到父组件消息toMsg{{toMsg}}/div/divdivbutton clicktoFunc点击执行收到的父组件方法/button/divdivbutton clickchangeMsg点击修改toMsg/button/div/templatescript setup// 需要定义defineProps
const props defineProps({toMsg: {type: String,default: 100,},toFunc: {type: Function,default: async () {},}
})const changeMsg () {props.toMsg 子组件修改
}//或者直接接受不设定类型与默认值
const props defineProps([toMsg ])
/scriptstyle
/style对于取值setup中要通过props.msg取到模板中直接msg取到
2事件 事件是一种在子组件向父组件通信的方式。
vue2里面的写法
在子组件中定义事件
templatebutton clickonClickClick me/button
/template
script
export default {methods: {onClick() {this.$emit(button-clicked, Button clicked in child component);}}
}
/script在父组件中通过v-on缩写指令监听子组件触发的事件
templatechild-component button-clickedonButtonClicked /
/template
script
import ChildComponent from ./ChildComponent.vue;export default {components: {ChildComponent},methods: {onButtonClicked(message) {console.log(message);}}
}
/script这样当子组件中的按钮被点击时会触发button-clicked事件父组件会调用onButtonClicked()方法并接收子组件传递的数据。
vue3里面的写法 emit是最常见的用于子组件向父组件传递消息的方法。vue3使用使用defineEmits来声明emit它接收内容与emit选项是一致的。
1用法一给父组件发送自定义事件
// ----------子组件--------button clickbtn点击/button
script setup
import {defineEmits} from vue
const emit defineEmits([emit]) //数组里可以有多个自定义方法名
//或者使用ts约束自定义方法的参数
const emit defineEmits{(e:getAge,age:number):void //设置自定义函数名称参数类型与返回值类型// 可在此设置第二个自定义函数
}()function btn() {emit(getAge,18)
}
/script// ---------父级组件中--------// 在父级组件中使用子级的自定义事件在html中去写自定义事件名称事件名称(就是在子组件中emits的第一个参数)HelloWorld getAgehandleAge/
script setup
import HelloWorld from /components/HelloWorld
// 函数中data是个形参为子级传递过来的数据
const handleAge function (data) {console.log(data)
}
/script2用法二使用modelValue直接更新父组件数据
除了props和事件Vue3中还提供了provide/inject、$refs等方式来实现组件通信。
//结构
// 父组件CHild v-model:testtest/CHild//逻辑
let test ref()// 子组件//逻辑
const props defineProps({
test:,
})
const emit defineEmits([update:test]); //这个test就是接收的props
const resetTest () {
//更新test给父组件
emit(update:test,最新数据)
}这样父组件不需要自定义事件就能接受到最新的test数据。
注意不管使用props 或者emits 在vue3 里面都需要使用 defineProps 和 defineEmits 声明。
Vue2 里面父组件中调用子组件方法
方法1通过$refs来进行调用。
// 子组件templatediv我是子组件/div/templatescriptexport default {data() {return {name: jack}},methods: {childrenFuc() {//在这里做某些子组件的操作。更菜子组件的值等等this.name Tom}}}/script// 父组件templatechildBody refchildRef/childBodybutton clickhandleClick点击按钮/button/templatescriptexport default {data() {return {name: jack}},methods: {handleClick() {//通过点击事件触发子组件的函数方法this.$refs.childRef.childrenFuc();}}}/script
方法2使用emit 和 emit和emit和on的方法
在子组件的mounted或者created定义需要触发的函数
// 子组件templatediv我是子组件/div/templatescriptexport default {data() {return {name: jack}},mounted() {//使用$nextTick方法确保dom渲染完毕后加载该函数。this.$nextTick(function () {this.$on(childrenFuc, () {//在这里做某些子组件的操作。更菜子组件的值等等this.name Tom})})}}/script
// 父组件templatechildBody refchildRef/childBodybutton clickhandleClick点击按钮/button/templatescriptexport default {data() {return {}},methods: {handleClick() {//触发子组件的方法。this.$refs.childRef.$emit(childrenFuc);}},}/script
vue3 里面父组件中调用子组件方法 1通过ref直接调用子组件的方法 ref“RefChild”
2在函数中写 RefChild.value.reset(); “reset”为子组件中定义的函数名。
3子组件定义一个函数 reset()使用defineExpose抛出让父组件调用即可。
4这个方法也可以进行传值在括号中传入值子组件接收即可 。
父组件
templatediv classvc-boxel-button-groupel-button:typetabletype 1 ? primary : clickselectTable(1)按钮1/el-buttonel-button:typetabletype 2 ? primary : clickselectTable(2)按钮2/el-buttonel-button:typetabletype 3 ? primary : clickselectTable(3)按钮3/el-button/el-button-groupChildrefRefChildonselecthandleCriterionChangev-iftabletype 测试/Child/div
/templatescript nameindex setup langts
import Child from /modular/analysis/components/child.vue;const tabletype ref();// 获取子组件的引用
const RefChild ref();const selectTable i {if (RefChild.value) {RefChild.value.reset();}
}const handleCriterionChange (type: number) {console.log(输出点击事件)
}/script子组件
templateel-form :modelcriterionFormel-form-item label规范类别el-selectv-modelcriterionForm.criterionTypeclassm-2stylewidth: 130pxplaceholderSelectsizedefaultchangetype emits(onselect, type)el-optionv-foritem in criterionOptions:keyitem.value:labelitem.label:valueitem.value//el-select/el-form-item/el-form
/template
script setup langts
import { Ref } from vue;const emits defineEmits{ (e: onselect, value: number): void }();const criterionForm: Ref{ criterionType: number } ref({// 默认展示全部criterionType: 0
});const reset () {criterionForm.value.criterionType 0;
};const criterionOptions [{label: 全部,value: 0},{label: 合格,value: 1},{label: 不合格,value: 2}
];defineExpose({reset
});
/scriptVue3里面也支持provide / inject祖孙、父子组件 Vue3里面兄弟组件目前使用mittvue到3.0之后好像取消了bus全局事件总线选择使用mitt作为兄弟组件间通信和传参的方式。mitt的使用方法有两种可以单独创建一个文件哪里要用就引入它也可以 main.js 中挂载全局属性
3、Vue3的插槽
插槽是Vue3中用于在组件之间共享内容的一种机制。简单来说它们允许我们将内容插入到组件的特定区域中。Vue3中的插槽分为两种类型具名插槽和默认插槽。
Vue3中的插槽是一个强大的工具可以帮助我们更好地管理组件之间的内容共享。通过使用插槽我们可以更好地控制组件中的内容使其更易于维护和扩展。如果您正在使用Vue3构建Web应用程序插槽是一个不容错过的功能。
简单的实例如下
!-- 父组件 --
templatedivh1{{ title }}/h1slot/slot/div
/templatescript
export default {name: MyComponent,props: {title: {type: String,required: true}}
}
/script在父组件中我们定义了一个插槽它表示该组件可以接收子组件传递过来的任何内容并将其渲染在插槽所在的位置。
现在我们可以在父组件标签内传入任何我们想要展示的内容例如
!-- 使用父组件并在其中传入一些内容 --
my-component title这是标题p这是一些内容/pulli列表项1/lili列表项2/li/ul
/my-component
