做教学的视频网站有哪些问题,小波app推广网,成都工装设计公司,做网站的素材哪里找的vue 基础回顾
一、重要文件
node_modules#xff1a;当前项目依赖的 js 包assets#xff1a;静态资源存放目录(图片)components#xff1a;公共组件存放目录App.vue#xff1a;主组件#xff0c;页面的入口文件main.js#xff1a;整个项目入口文件package.json#xf…vue 基础回顾
一、重要文件
node_modules当前项目依赖的 js 包assets静态资源存放目录(图片)components公共组件存放目录App.vue主组件页面的入口文件main.js整个项目入口文件package.json项目配置信息、依赖包管理vue.config.js vue-cli 配置文件
二、常用配置及操作
1修改端口
在 vue.vonfig.js 文件中做以下配置
const { defineConfig } require(vue/cli-service)
module.exports defineConfig({transpileDependencies: true,devServer: {port: 7070}
})三、基本使用方法
1. vue 组件
template 结构 只有一个根元素写html代码 style 样式 编写 CSS全局样式 影响所有组件局部样式影响当前组件 script 逻辑 空值模板的数据和行为
2. 文本插值
作用用来绑定 data 方法返回的对象属性用法{{插值表达式}}
templatedivh1Hello, {{ name }}/h1pYou are {{ age }} years old./p/div
/templatescript
export default {name: HelloWorld,data() {return {name: 河狸,age: 18}}
}
/script3. 属性绑定 作用为标签的属性绑定 data 方法中返回的属性 用法v-bind:xxx简写为 :xxx
templatedivdivinput typetext v-bind:valuename/divdivinput typenumber v-bind:valueage/divdivimg :srcsrc//div/div
/templatescript
export default {name: HelloWorld,data() {return {name: 河狸,age: 18,src: https://th.bing.com/th/id/OIP.1a0WnlpFlpxePqohXEjh4QHaMM?rs1pidImgDetMain}}
}
/script4.事件绑定 作用为元素绑定对应的事件 用法v-on:xxx简写为 xxx
templatedivinput typeimage idimage altLogin :srcsrc v-on:clickhandle1 /input typeimage idimage altLogin :srcsrc clickhandle2 //div/templatescript
export default {name: HelloWorld,data() {return {name: 河狸,age: 18,src: https://th.bing.com/th/id/OIP.1a0WnlpFlpxePqohXEjh4QHaMM?rs1pidImgDetMain}},methods: {handle1() {alert(我是小河狸~)},handle2() {alert(我是大笨蛋~)}}
}
/script5.双向绑定
作用表单输入项和 data 方法中的属性进行绑定任意一方改变都会同步给另一方
用法v-model
templatedivdivinput typetext v-modelname/divdivinput typetext v-bind:valuename/divdivbutton clickhandle3改名/button/div/div
/templatescript
export default {name: HelloWorld,data() {return {name: 河狸,age: 18,src: https://th.bing.com/th/id/OIP.1a0WnlpFlpxePqohXEjh4QHaMM?rs1pidImgDetMain}},methods: {handle1() {alert(我是小河狸~)},handle2() {alert(我是大笨蛋~)},handle3() {this.name 呆呆的小河狸}}
}
/script6. 条件渲染 作用根据表达式的值来动态渲染页面元素 用法v-if、v-else、v-else-if
templatedivh1Hello, nobr v-ifage 20小河狸/nobrnobr v-else-ifage 50大河狸/nobrnobr v-else超大河狸/nobr/h1pYou are {{ age }} years old./p/divdivdivinput typetext v-modelname/divdivinput typenumber v-modelage/divdivinput typeimage idimage altLogin :srcsrc v-on:clickhandle1 /input typeimage idimage altLogin :srcsrc clickhandle2 //divdivbutton clickhandle3改名/button/div/div/templatescript
export default {name: HelloWorld,data() {return {name: 河狸,age: 18,src: https://th.bing.com/th/id/OIP.1a0WnlpFlpxePqohXEjh4QHaMM?rs1pidImgDetMain}},methods: {handle1() {alert(我是小河狸~)},handle2() {alert(我是大笨蛋~)},handle3() {this.name 呆呆的小河狸}}
}
/script7. axios
Axios 是一个基于 promise 的 网络请求库作用于浏览器和 node.js 中。使用Axios可以在前端项目中发送各种方式的HTTP请求。 安装命令npm install axios 导入import axios from axios
参数说明
url请求路径data请求体数据最常见的是JSON格式数据config配置对象可以设置查询参数、请求头信息
注在使用axios时经常会遇到跨域问题。为了解决跨域问题可以在 vue.config.js 文件中配置代理
const { defineConfig } require(vue/cli-service)
module.exports defineConfig({transpileDependencies: true,devServer: {port: 7070,proxy: {/api: {target: http://localhost:8080,pathRewrite: {^/api: }}}}
})axios的post请求示例
axios.post(/api/admin/employee/login,{username:admin,password: 123456}).then(res {console.log(res.data)}).catch(error {console.log(error.response)})axios的get请求示例
axios.get(/api/admin/shop/status,{headers: {token: ‘xxx.yyy.zzz’}})axios提供的统一使用方式示例二可以发送各种方式的请求
axios({url: /api/admin/employee/login,method:post,data: {username:admin,password: 123456}}).then((res) {console.log(res.data.data.token)axios({url: /api/admin/shop/status,method: get,params: {id: 100},headers: {token: res.data.data.token}})}).catch((error) {console.log(error)})四、路由 Vue-Router
vue 属于单页面应用所谓路由就是根据浏览器路径不同用不同的视图组件替换这个页面内容。
1. 路由组成
VueRouter路由器根据路由请求在路由视图中动态渲染对应的视图组件路由链接组件浏览器会解析成路由视图组件用来展示与路由路径匹配的视图组件
2. 路由配置
具体配置方式
在路由文件中配置路由路径和视图的对应关系
//维护路由表某个路由路径对应哪个视图组件
const routes [{path: /,name: home,component: HomeView},{path: /about,name: about,component: () import(/* webpackChunkName: about */ ../views/AboutView.vue)},{path: /404,component: () import(../views/404View.vue)},{path: /:catchAll(.*), // 不识别的path自动匹配404redirect: /404,}
]
在视图组件中配置 router-link标签用于生成超链接。在视图组件汇总配置router-view标签
点击不同的 router-link标签router-view标签显示不同的视图
router-link to/Home/router-link
router-link to/aboutAbout/router-link
router-link to/testTest/router-link
!--视图组件展示的位置--
router-view/通过 js 实现路由跳转
templatenavrouter-link to/Home/router-link |router-link to/aboutAbout/router-link/navinput typebutton value路由跳转 clickjump/ router-view/
/templatescriptexport default {methods: {jump() {this.$router.push(/about)}}}
/script3. 嵌套路由
1.在 src/router/index.js 中配置路由映射规则嵌套路由配置 {path: /c,component: () import(../views/container/ContainerView.vue),redirect: /c/pi,//嵌套路由子路由对应的组件会展示在当前组件内部children: [//通过children属性指定子路由相关信息path、component{path: /c/p1,component: () import(../views/container/P1View.vue)},{path: /c/p2,component: () import(../views/container/P2View.vue)},{path: /c/p3,component: () import(../views/container/P3View.vue)}]}2.在ContainerView.vue 布局容器视图中添加实现子视图组件展示
el-mainrouter-view/
/el-main3.在ContainerView.vue 布局容器视图中添加实现路由请求
el-aside width200pxrouter-link to/c/p1P1/router-linkbrrouter-link to/c/p2P2/router-linkbrrouter-link to/c/p3P3/router-linkbr
/el-aside注意子路由变化切换的是【ContainerView 组件】中 router-view/router-view 部分的内容
五、状态管理 vuex
在多个组件之间共享数据并且共享的数据是响应式的即数据的变更能及时渲染到模板。
vuex 采用集中式存储管理所有组件的状态。
1. 概念
state状态对象集中定义各个组件共享的数据mutations类似于一个事件用于修改共享数据要求必须是同步函数actions类似于mutation可以包含异步操作ajax通过调用mutation来改变共享数据
2.简单案例
import { createStore } from vuex
import axios from axiosexport default createStore({state: {name: 小河狸},getters: {},mutations: {setName(state, newname) {state.name newname}},actions: {setNamebyAxios(context) {axios({url: /api/home,method: get}).then(res {context.commit(setName, res.data.data)})}},modules: {}
})templatediv classaboutdiv classabouth1hi {{ $store.state.name }}/h1/divinput typebutton value修改数据 clickjump/input typebutton value修改数据 clickjump1//div
/templatescript
export default {methods: {jump() {this.$store.commit(setName, 大河狸)},jump1() {this.$store.dispatch(setNamebyAxios)}}
}
/script六、TypeScript
1. 常用类型
TS中的常用类型如下
类型例备注字符串类型string数字类型number布尔类型boolean数组类型number[],string[], boolean[] 依此类推任意类型any相当于又回到了没有类型的时代复杂类型type 与 interface函数类型() void对函数的参数和返回值进行说明字面量类型“a”|“b”|“c”限制变量或参数的取值class 类class Animal
