汽车之家车报价大全,温州seo网络推广代理价格,网站建设策划需要涉及,wordpress的登录页文章目录 一、Vue3简介1. 简介2. 相关网站3. 前端技术对比4. JS前端框架5. Vue核心内容6. 使用方式 二、基础概念1. 创建一个应用2. 变量双向绑定#xff08;v-model#xff09;3. 条件控制#xff08;v-if#xff09;4. 数组遍历#xff08;v-for#xff09;5. 绑定事件… 文章目录 一、Vue3简介1. 简介2. 相关网站3. 前端技术对比4. JS前端框架5. Vue核心内容6. 使用方式 二、基础概念1. 创建一个应用2. 变量双向绑定v-model3. 条件控制v-if4. 数组遍历v-for5. 绑定事件v-on6. 表单 三、AJAX交互 一、Vue3简介
1. 简介
Vue是一个流行的JavaScript框架适合用于构建交互式的Web界面。 Vue的核心特性是响应式数据、组件系统、模板语法和虚拟DOM。 Vue提供了许多有用的工具和库例如路由、状态管理、指令、过滤器、过渡效果等。
Vue3相关技术栈
ECMAScript 6 (ES6) 提高 JavaScript 的可读性和可维护性引入了类Class的概念Node.js跨平台的 JavaScript 运行环境npmNode.js 的默认包管理器vite前端项目构建工具Router用于在 Vue 应用程序中实现页面间的导航和路由管理Pinia通过状态管理实现组件数据传递Axios在 Vue.js 应用中处理 HTTP 请求Element-plus基于 Vue 3 的开源 UI 组件库
2. 相关网站
Vue 3 官方中文文档 Vue3 教程
3. 前端技术对比 4. JS前端框架
jQuery优点是简化了DOM操作缺点是频繁操作DOM影响前端性能。Angular将后台的MVC模式搬到了前端增加了模块化开发的理念对后台程序员友好对前端程序员不太友好。React在内存中模拟DOM操作有效的提升了前端渲染效率缺点是使用复杂。Vue综合了Angular模块化和React虚拟DOM的优点。
5. Vue核心内容 6. 使用方式 通过 Vite 的构建 项目使用基于 Vite 的构建设置并允许使用 Vue 的单文件组件 (SFC)。 通过 CDN 使用 Vue 通过 CDN 使用 Vue 时不涉及“构建步骤”。这使得设置更加简单。但是无法使用单文件组件 (SFC) 语法。
二、基础概念
1. 创建一个应用
!DOCTYPE html
html langen
headtitleTest/titlemeta charsetUTF-8link relicon hrefdata:;base64,script srchttps://cdn.bootcdn.net/ajax/libs/vue/3.3.13/vue.global.prod.js/script
/head
body!-- 在页面声明一个将要被Vue控制的DOM区域 --div idapp/div
/body
script// 选项式 API 风格const app {// data() 返回的属性将会成为响应式的状态// 并且暴露在 this 上data() {return {count: 0}},// methods 是一些用来更改状态与触发更新的函数// 它们可以在模板中作为事件处理器绑定methods: {increment() {this.count}},// 生命周期钩子会在组件生命周期的各个不同阶段被调用// 例如这个函数就会在组件挂载完成后被调用mounted() {// this 指向当前组件实例console.log(The initial count is ${this.count}.)},// Vue 组件的模板template : button clickincrementCount is: {{ count }}/button}// 通过Vue框架使挂载的id可以使用app内定义的变量和方法Vue.createApp(app).mount(#app)
/script
/html2. 变量双向绑定v-model
使用 v-model 指令实现表单数据双向绑定
!DOCTYPE html
html langen
headtitleTest/titlemeta charsetUTF-8link relicon hrefdata:;base64,script srchttps://cdn.bootcdn.net/ajax/libs/vue/3.3.13/vue.global.prod.js/script
/head
bodydiv idappinput typetext v-modelmessagep{{ message }}/p/div
/body
scriptconst app {data() {return {message: }}}Vue.createApp(app).mount(#app)
/script
/htmlHTML页面效果
3. 条件控制v-if
使用 v-if 指令条件性地渲染元素
!DOCTYPE html
html langen
headtitleTest/titlemeta charsetUTF-8link relicon hrefdata:;base64,script srchttps://cdn.bootcdn.net/ajax/libs/vue/3.3.13/vue.global.prod.js/script
/head
bodydiv idappinput typetext v-modelnump v-ifnum0num 大于 0/pp v-else-ifnum0num 等于 0/pp v-elsenum 小于 0/p/div
/body
scriptconst app {data() {return {num: 0}}}Vue.createApp(app).mount(#app)
/script
/htmlHTML页面效果
4. 数组遍历v-for
使用 v-for 指令循环渲染元素
!DOCTYPE html
html langen
headtitleTest/titlemeta charsetUTF-8link relicon hrefdata:;base64,script srchttps://cdn.bootcdn.net/ajax/libs/vue/3.3.13/vue.global.prod.js/script
/head
bodydiv idappp v-foritem in items :keyitem.id{{ item.id }} - {{ item.text }}/p/div
/body
scriptconst app {data() {return {items: [{ id: 1, text: test 1 },{ id: 2, text: test 2 },]}}}Vue.createApp(app).mount(#app)
/script
/htmlHTML页面效果
5. 绑定事件v-on
使用 v-on 指令在 HTML 元素上绑定事件监听器v-on 指令可以缩写为 符号
!DOCTYPE html
html langen
headtitleTest/titlemeta charsetUTF-8link relicon hrefdata:;base64,script srchttps://cdn.bootcdn.net/ajax/libs/vue/3.3.13/vue.global.prod.js/script
/head
bodydiv idappbutton v-on:clickcount1Count is: {{ count }}/button/div
/body
scriptconst app {data() {return {count: 0}}}Vue.createApp(app).mount(#app)
/script
/htmlHTML页面效果
6. 表单
!DOCTYPE html
html langen
headtitleTest/titlemeta charsetUTF-8link relicon hrefdata:;base64,script srchttps://cdn.bootcdn.net/ajax/libs/vue/3.3.13/vue.global.prod.js/script
/head
body
div idappp单行文本框/pinput v-modeldata.message1 placeholder请输入……p输入内容: {{ data.message1 }}/pp多行文本框/ptextarea v-modeldata.message2 placeholder请输入……/textareap输入内容: {{ data.message2 }}/p
/div
/body
scriptconst app {data() {return {data : {message1: ,message2: }}}}Vue.createApp(app).mount(#app)
/script
/htmlHTML页面效果
三、AJAX交互
推荐使⽤Axios来完成AJAX请求。
!DOCTYPE html
html langen
headtitleTest/titlemeta charsetUTF-8link relicon hrefdata:;base64,script srchttps://cdn.bootcdn.net/ajax/libs/vue/3.3.13/vue.global.prod.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/axios/1.6.2/axios.js/script
/head
body
div idappdivp姓名 input typetext v-modeldata.baseAccountQueryVo.accountName/pbutton clicksubmitForm查询/button/divhrdivdiv v-foritem in items :keyitem.iddiv姓名: {{ item.accountName }}/divdiv电话: {{ item.mobileNum }}/div/div/div
/div
/body
scriptconst app {data() {return {items: [],data: {baseAccountQueryVo: {}}}},methods: {submitForm() {axios.post(http://127.0.0.1:8081/test/api/baseAccount/list,this.data).then(response {this.items response.data.baseAccountQueryVos;}).catch(error {console.log(error);});}}}Vue.createApp(app).mount(#app)
/script
/html
