Vue3 框架基础随笔 (一)
web前端：vue框架基础笔记(一)
VUE框架基础部分随笔
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
Vue可以使用简单的代码实现一个单页面应用。
基本格式
Vue通过模板语法来声明式的将数据渲染进DOM:
例如：
<div id = "app"> {{ message }} </div>
通过{{ }}即可将数据绑定至message位置
<script> const data = { data(){ return { message : 'hello Vue !' } } } Vue.createApp(data).mount('#app') </script>
通过以上方法即可成功创建一个Vue实例！
响应式框架
在一个Vue实例中所有数据都是响应式的{{}}中的数据会根据Vue实例中绑定的数据的实时变化发生改变。
Data中Created,methods,watch的区别
在一个Vue实例中，Vue为用户定义了五个函数执行区域，不同的区域在Vue生命周期的不同时间执行，因此可以用于不同情况。
<script> const data = { data(){ return { message : 'hello Vue !' } }, methods: { },
mounted: {
} watch: { }, create: { } } Vue.createApp(data).mount('#app') </script>
执行时间或作用：
created:在html加载完成之前执行 先执行父组。
件再执行子组件。
mounted:在html加载完成之后执行 先执行子组件再执行父组件。
methods:事件方法执行。
watch:监听一个值的变化，变化后执行。
指令
Vue中提供的特殊属性 包括：v-bind , v-on , v-model。
V-bind指令
v-bind 属性:通过此属性可以绑定元素中属性的值 借此实现属性的动态绑定。
例如：
vue代码：
<div id='app'>
<p v-bind:display='switch' >人生何处不相逢</p>
</div>
javascript代码：
<script> const data = { data(){ return { switch: 'none' } } } </script> Vue.createApp(data).mount('#app') </script>
以上代码即可实现动态控制<p>元素显示与隐藏。
V-on指令
v-on属性:通过此属性可以为元素添加一个事件监听器，来提高用户的交互
例如:
vue代码:
<div id='app'> <buttomv-on:click='tijiao'' >提交</buttom> </div>
javascript代码:
<script> const data = { data() { return { } } methods: { tijiao(){ //事件提交执行的函数 } } } Vue.createApp(data).mount('#app') </script>
用户点击button按钮是 vue将会调用tijiao()函数。
V-model指令:
Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
例如：
vue代码：
<div id="app"> <p>{{ message }}</p> <input v-model="message" /> </div>
javascript代码：
const data = { data() { return { message: '撑伞也是雨中人' } } } Vue.createApp(data).mount('#app')
以上代码即可实现用户输入与元素的双向绑定。
V-if指令:
v-if指令的值绑定data中的元素的值true或false 来控制元素的显示或隐藏。
V-for指令:
v-for指令可以实现列表渲染。
例如:
vue代码:
<div id="app"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div>
javascript代码:
const data = { data() { return { todos: [ { text: '落日归山海' }, { text: '陪伴成告白' } ] } } } Vue.createApp(data).mount('#app')
构建一个组件化单页面应用
vue可以组件树的构建方式来实现一个应用程序。
通过把页面中的一部分分为不同组件实现组件化编程，提高代码的可维护性。
vue框架基本目录结构:
|--node_modules 已安装的依赖
|--public 目录存放公共资源文件 如image icon等
|--src |--assets 目录储存公共样式，图标等
|--components 目录储存自己编写的组件文件
|--router 目录存储页面路由规则
|--views 目录存放自己编写的页面
|--plugins 目录存放element等配置文件
|--app.vue 文件是页面的入口
|--main.js 文件是js文件的入口 你需要在这里把js文件引入进去
|--ststic 目录存放一些图片图标等静态资源
组件
app.vue文件默认结构:
<template> <div id = 'app'> 项目主页 </div> </template> <script> data () { return { } } </script> <style scoped>
</style>
main.js文件默认结构:
<script> // 项目的入口文件 每次项目初始化都会加载此文件 import Vue from 'vue' import App from './App.vue' import router from './router' import './plugins/element.js' import axios from 'axios' Vue.config.productionTip = false axios.defaults.baseURL = '' Vue.prototype.$http = axios new Vue({ router, render: h => h(App) }).$mount('#app') </script>
路由
通过 Vue-router 技术实现页面的路由。
vue代码
<template> <router-link to='/admin'>页面跳转</router-link> <router-view></router-view> </template>
javascript代码
// // index.js 文件为编写路由的核心文件 // import Vue from 'vue' // 引入vue import VueRouter from 'vue-router' // 引入vue-router路由 import AboutMe from '../components/admin.vue' // 引入组件 <-- Vue.use(VueRouter) // Vue全局使用Router const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push (location) { return originalPush.call(this, location).catch(err => err) } const routes = [ // 配置路由 这里是一个数组 { path: '/admin', name: 'admin', component: admin } ] const router = new VueRouter({ routes }) export default router
下列代码实现路由 可以理解为html的<a>标签 。
<router-link to='/admin'>页面跳转</router-link>
将路由结果组件渲染到router-view中。 <router-view></router-view>
在vue应用程序中通常通过编写模块组件的方式由浅入深，自底向上的方式来实现一个大规模的应用程序。
下一篇继续了解:
1 . 使用vue创建多页面网站方法。
2 . 通过 Axios 技术发起http请求实现与后端接口的交互。
3 . 了解element-ui 组件便捷成型工具。
4 . vue-router深入理解。
16:08:46
本文章为作者个人总结，如有错误请指正。
