搜企业信息的网站,网站优化要素,下载素材的网站,网站建设ppt下载Vue是什么#xff1f;为什么要学习他 Vue是什么#xff1f;
Vue是前端优秀框架#xff0c; 是一套用于构建用户界面的渐进式框架
为什么要学习Vue
Vue是目前前端最火的框架之一Vue是目前企业技术栈中要求的知识点Vue可以提升开发体验Vue学习难度较低… Vue开发前的准备 安…Vue是什么为什么要学习他 Vue是什么
Vue是前端优秀框架 是一套用于构建用户界面的渐进式框架
为什么要学习Vue
Vue是目前前端最火的框架之一Vue是目前企业技术栈中要求的知识点Vue可以提升开发体验Vue学习难度较低… Vue开发前的准备 安装Vue工具 Vue CLI
Vue CLI Vue.js 开发的标准工具Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统
npm install -g vue/cli安装之后你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue看看是否展示出了一份所有可用命令的帮助信息来验证它是否安装成功。
vue --version创建一个项目
运行以下命令来创建一个新项目
vue create vue-demo温馨提示 在控制台中可以用上下按键调整选择项 在控制台中可以用空格(spacebar)选择是否选中和取消选中 可以选择默认项目模板或者选“手动选择特性”来选取需要的特性。 我们选择Babel和Progressive Web App (PWA) Support 两个选项即可 温馨提示 在学习期间不要选中 Linter / Formatter 以避免不必要的错误提示 Vue目前有两个主流大版本vue2和vue3我们本套课程选择vue3最新版本 配置放在哪里? In dedicated config files 专用配置文件或者 In package.json 在package.json文件 将其保存为未来项目的预置? y代表保存并添加名字n不保存 项目创建成功如下提示信息 运行项目
第一步进入项目根目录cd vue-demo
第二步运行npm run serve 启动项目
安装Vue高亮插件
VSCode中安装vetur或者volar都可前者针对Vue2版本后者针对Vue3版本
模板语法 文本
数据绑定最常见的形式就是使用“Mustache” (双大括号) 语法的文本插值
spanMessage: {{ msg }}/span一般配合js 中的data()设置数据
export default {name: HelloWorld,data(){return{msg:消息提示}}
}原始 HTML
双大括号会将数据解释为普通文本而非 HTML 代码。为了输出真正的 HTML你需要使用v-html 指令
pUsing mustaches: {{ rawHtml }}/p
pUsing v-html directive: span v-htmlrawHtml/span/pdata(){return{rawHtml:a hrefhttps://www.itbaizhan.com百战/a}
}属性 Attribute
Mustache 语法不能在 HTML 属性中使用然而可以使用 v-bind 指令
div v-bind:iddynamicId/divdata(){return{dynamicId:1001}
}温馨提示 v-bind: 可以简写成 : 使用 JavaScript 表达式
在我们的模板中我们一直都只绑定简单的 property 键值Vue.js 都提供了完全的 JavaScript 表达式支持
{{ number 1 }}{{ ok ? YES : NO }}{{ message.split().reverse().join() }}这些表达式会在当前活动实例的数据作用域下作为 JavaScript 被解析。有个限制就是每个绑定都只能包含单个表达式所以下面的例子都不会生效。
!-- 这是语句不是表达式--
{{ var a 1 }}!-- 流程控制也不会生效请使用三元表达式 --
{{ if (ok) { return message } }}条件渲染 v-if
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。
p v-ifflag我是孙猴子/pdata() {return {flag: true}
}v-else
你可以使用 v-else 指令来表示 v-if 的“else 块”
p v-ifflag我是孙猴子/p
p v-else你是傻猴子/pdata() {return {flag: false}
}v-show
另一个用于条件性展示元素的选项是 v-show 指令
h1 v-showokHello!/h1v-if vs v-show 的区别
v-if 是“真正”的条件渲染因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的如果在初始渲染时条件为假则什么也不做——直到条件第一次变为真时才会开始渲染条件块。
相比之下v-show 就简单得多——不管初始条件是什么元素总是会被渲染并且只是简单地基于 CSS 进行切换。
一般来说v-if 有更高的切换开销而 v-show 有更高的初始渲染开销。因此如果需要非常频繁地切换则使用 v-show 较好如果在运行时条件很少改变则使用 v-if 较好
列表渲染 用 v-for 把一个数组映射为一组元素
我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法其中 items 是源数据数组而 item 则是被迭代的数组元素的别名。
ulli v-foritem in items{{ item.message }}/li
/uldata() {return {items: [{ message: Foo }, { message: Bar }]}
}维护状态
当 Vue 正在更新使用 v-for 渲染的元素列表时它默认使用“就地更新”的策略。如果数据项的顺序被改变Vue 将不会移动 DOM 元素来匹配数据项的顺序而是就地更新每个元素并且确保它们在每个索引位置正确渲染。
为了给 Vue 一个提示以便它能跟踪每个节点的身份从而重用和重新排序现有元素你需要为每项提供一个唯一的 key attribute
div v-for(item,index) in items :keyitem.id|index!-- 内容 --
/div事件处理 监听事件
我们可以使用 v-on 指令 (通常缩写为 符号) 来监听 DOM 事件并在触发事件时执行一些 JavaScript。用法为 v-on:clickmethodName 或使用快捷方式 clickmethodName
button clickcounter 1Add 1/buttondata() {return {counter: 0}
}事件处理方法
然而许多事件处理逻辑会更为复杂所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。
button clickgreetGreet/buttonmethods: {greet(event) {// event 是原生 DOM eventif (event) {alert(event.target.tagName)}}
}内联处理器中的方法
这是官方的翻译称呼其实我们可以直接叫他 “事件传递参数”
button clicksay(hi)Say hi/button
button clicksay(what)Say what/buttonmethods: {say(message) {alert(message)}
}表单输入绑定 你可以用 v-model 指令在表单 input、textarea 及 select 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇但 v-model 本质上不过是语法糖。它负责监听用户的输入事件来更新数据并在某种极端场景下进行一些特殊处理。
input v-modelmessage placeholderedit me /
pMessage is: {{ message }}/pdata() {return {message:}
}修饰符
.lazy
在默认情况下v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符从而转为在 change 事件之后进行同步
input v-model.lazymessage /
pMessage is: {{ message }}/pdata() {return {message:}
}.trim
如果要自动过滤用户输入的首尾空白字符可以给 v-model 添加 trim 修饰符
input v-model.trimmessage /data() {return {message:}
}组件基础 单文件组件
Vue 单文件组件又名 *.vue 文件缩写为 SFC是一种特殊的文件格式它允许将 Vue 组件的模板、逻辑 与 样式封装在单个文件中
templateh3单文件组件/h3
/templatescript
export default {name:MyComponent
}
/scriptstyle scoped
h3{color: red;
}
/style加载组件
第一步引入组件 import MyComponentVue from ./components/MyComponent.vue
第二步挂载组件 components: { MyComponentVue }
第三步显示组件 my-componentVue /
组件的组织
通常一个应用会以一棵嵌套的组件树的形式来组织 Props组件交互 组件与组件之间是需要存在交互的否则完全没关系组件的意义就很小了
Prop 是你可以在组件上注册的一些自定义 attribute
my-componentVue title标题/templateh3单文件组件/h3p{{ title }}/p
/templatescript
export default {name:MyComponent,props:{title:{type:String,default:}}
}
/scriptProp 类型
Prop传递参数其实是没有类型限制的
props: {title: String,likes: Number,isPublished: Boolean,commentIds: Array,author: Object,callback: Function
}温馨提示 数据类型为数组或者对象的时候默认值是需要返回工厂模式 自定义事件组件交互 自定义事件可以在组件中反向传递数据prop 可以将数据从父组件传递到子组件那么反向如何操作呢就可以利用自定义事件实现 $emit
templateh3单文件组件/h3button clicksendHandle发送数据/button
/templatescript
export default {name: MyComponent,methods:{sendHandle(){this.$emit(onCustom,数据)}}
}
/scriptstyle scoped
h3 {color: red;
}
/styletemplatemy-componentVue onCustomgetData /
/templatescriptimport MyComponentVue from ./components/MyComponent.vueexport default {name: App,components: {MyComponentVue},methods: {getData(data) {console.log(data);}}
}
/script组件生命周期 每个组件在被创建时都要经过一系列的初始化过程——例如需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数这给了用户在不同阶段添加自己的代码的机会 为了方便记忆我们可以将他们分类
创建时beforeCreate、created
渲染时beforeMount、mounted
更新时beforeUpdate、updated
卸载时beforeUnmount、unmounted
Vue引入第三方 Swiper 开源、免费、强大的触摸滑动插件
Swiper 是纯javascript打造的滑动特效插件面向手机、平板电脑等移动终端
Swiper 能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果 温馨提示 官方文档https://swiperjs.com/vue 安装指定版本: npm instal --save swiper8.1.6 基础实现
templatediv classhelloswiper classmySwiperswiper-slideSlide 1/swiper-slideswiper-slideSlide 2/swiper-slideswiper-slideSlide 3/swiper-slide/swiper/div
/templatescript
import { Swiper, SwiperSlide } from swiper/vue;
import swiper/css;export default {name: HelloWorld,components: {Swiper,SwiperSlide,}
}
/script添加指示器
templatediv classhelloswiper classmySwiper :modulesmodules :pagination{ clickable: true }swiper-slideimg src../assets/logo.png alt/swiper-slideswiper-slideimg src../assets/logo.png alt/swiper-slideswiper-slideimg src../assets/logo.png alt/swiper-slide/swiper/div
/templatescript
import { Pagination } from swiper;
import { Swiper, SwiperSlide } from swiper/vue;
import swiper/css;
import swiper/css/pagination;export default {name: HelloWorld,data(){return{modules: [ Pagination ]}},components: {Swiper,SwiperSlide,}
}
/scriptAxios网络请求 Axios 是一个基于 promise 的网络请求库
安装
Axios的应用是需要单独安装的 npm install --save axios
引入
组件中引入: import axios from axios
全局引用:
import axios from axiosconst app createApp(App);
app.config.globalProperties.$axios axios
app.mount(#app)// 在组件中调用
this.$axios网络请求基本示例
get请求
axios({method: get,url: http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php
}).then(res {console.log(res.data);
})post请求 温馨提示 post请求参数是需要额外处理的 安装依赖: npm install --save querystring转换参数格式: qs.stringify({}) axios({method:post,url:http://iwenwiki.com/api/blueberrypai/login.php,data:qs.stringify({user_id:iwenqq.com,password:iwen123,verification_code:crfvw})
}).then(res {console.log(res.data);
})快捷方案
get请求
axios.get(http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php).then(res {console.log(res.data);})post请求
axios.post(http://iwenwiki.com/api/blueberrypai/login.php, qs.stringify({user_id: iwenqq.com,password: iwen123,verification_code: crfvw})).then(res {console.log(res.data);})Axios网络请求封装 在日常应用过程中一个项目中的网络请求会很多此时一般采取的方案是将网络请求封装起来
在src目录下创建文件夹utils并创建文件request用来存储网络请求对象 axios
import axios from axios
import qs from querystringconst errorHandle (status,info) {switch(status){case 400:console.log(语义有误);break;case 401:console.log(服务器认证失败);break;case 403:console.log(服务器拒绝访问);break;case 404:console.log(地址错误);break;case 500:console.log(服务器遇到意外);break;case 502:console.log(服务器无响应);break;default:console.log(info);break;}
}const instance axios.create({timeout:5000
})instance.interceptors.request.use(config {if(config.method post){config.data qs.stringify(config.data)}return config;},error Promise.reject(error)
)instance.interceptors.response.use(response response.status 200 ? Promise.resolve(response) : Promise.reject(response),error {const { response } error;errorHandle(response.status,response.info)}
)export default instance;在src目录下创建文件夹api并创建文件index和path分别用来存放网络请求方法和请求路径
// path.js
const base {baseUrl:http://iwenwiki.com,chengpin:/api/blueberrypai/getChengpinDetails.php
}export default base// index.js
import path from ./path
import axios from ../utils/requestexport default {getChengpin(){return axios.get(path.baseUrl path.chengpin)}
}在组件中直接调用网络请求
import api from ../api/indexapi.getChengpin().then(res {console.log(res.data);
})网络请求跨域解决方案 JS采取的是同源策略
同源策略是浏览器的一项安全策略浏览器只允许js 代码请求和当前所在服务器域名,端口,协议相同的数据接口上的数据,这就是同源策略.
也就是说当协议、域名、端口任意一个不相同时都会产生跨域问题所以又应该如何解决跨域问题呢
跨域错误提示信息 目前主流的跨域解决方案有两种
后台解决cors前台解决proxy
devServer: {proxy: {/api: {target: url,changeOrigin: true}}
}温馨提示 解决完跨域配置之后要记得重启服务器才行哦 Vue引入路由配置 在Vue中我们可以通过vue-router路由管理页面之间的关系
Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成让用 Vue.js 构建单页应用变得轻而易举
在Vue中引入路由
第一步安装路由 npm install --save vue-router
第二步配置独立的路由文件
// index.js
import { createRouter, createWebHashHistory } from vue-router
import HomeView from ../views/HomeView.vueconst routes [{path: /,name: home,component: HomeView},{path: /about,name: about,component: () import(../views/AboutView.vue)}
]const router createRouter({history: createWebHashHistory(),routes
})export default router第三步引入路由到项目
// main.js
import router from ./router
app.use(router)第四步指定路由显示入口 router-view/
第五步指定路由跳转
router-link to/Home/router-link |
router-link to/aboutAbout/router-link路由传递参数 页面跳转过程中是可以携带参数的这也是很常见的业务
例如在一个列表项点击进入查看每个列表项的详情
第一步在路由配置中指定参数的key
{path:/list/:name,name:list,component:() import(../views/ListView.vue)
}第二步在跳转过程中携带参数
lirouter-link to/list/内蒙内蒙旅游十大景区/router-link/li
lirouter-link to/list/北京北京旅游十大景区/router-link/li
lirouter-link to/list/四川四川旅游十大景区/router-link/li第三步在详情页面读取路由携带的参数
p{{ $route.params.name }}城市旅游景区详情/p嵌套路由配置 路由嵌套是非常常见的需求
第一步创建子路由要加载显示的页面
第二步在路由配置文件中添加子路由配置
{path:/news,name:news,redirect:/news/baidu,component:() import(../views/NewsView.vue),children:[{path:baidu,component:() import(../views/NewsList/BaiduNews.vue),},{path:wangyi,component:() import(../views/NewsList/WangyiNews.vue),}]
}第三步指定子路由显示位置router-view/router-view
第四步添加子路由跳转链接
router-link to/news/baidu百度新闻/router-link |
router-link to/news/wangyi网易新闻/router-link第五步重定向配置 redirect:/news/baidu
Vue状态管理(Vuex) Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 库。它采用集中式存储管理应用的所有组件的状态并以相应的规则保证状态以一种可预测的方式发生变化。
简单来说状态管理可以理解成为了更方便的管理组件之间的数据交互提供了一个集中式的管理方案任何组件都可以按照指定的方式进行读取和改变数据 引入Vuex的步骤
第一步安装Vuex npm install --save vuex
第二步配置Vuex文件
import { createStore } from vuexexport default createStore({state: {counter:0}
})第三步在主文件中引入Vuex
import store from ./store
app.use(store)第四步在组件中读取状态
pcounter:{{ $store.state.counter }}/p
// 或者
import { mapState } from vuex;
computed:{...mapState([counter])
}Vue状态管理核心(Vuex) 最常用的核心概念包含: State、Getter、Mutation、Action
Getter
对Vuex中的数据进行过滤
import { createStore } from vuexexport default createStore({state: {counter: 0},getters: {getCount(state){return state.counter 0 ? state.counter : counter小于0不符合要求}}
})import { mapState,mapGetters } from vuex;
computed:{...mapGetters([getCount])
}Mutation
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方并且它会接受 state 作为第一个参数
import { createStore } from vuexexport default createStore({state: {counter: 0},getters: {},mutations: {setCounter(state, num) {state.counter num}}
})import { mapState,mapMutations } from vuex;methods:{...mapMutations([setCounter]),clickHandler(){// this.$store.commit(setCounter,20)// 或者// this.setCounter(10)}
}Action
Action 类似于 mutation不同在于
Action 提交的是 mutation而不是直接变更状态Action 可以包含任意异步操作
import { createStore } from vuex
import axios from axiosexport default createStore({state: {counter: 0},getters: {getCount(state){return state.counter 0 ? state.counter : counter小于0不符合要求}},mutations: {setCounter(state, num) {state.counter num}},actions: {asyncSetCount({ commit }){axios.get(http://iwenwiki.com/api/generator/list.php).then(res {commit(setCounter,res.data[0])})}}
})
import { mapState,mapMutations,mapGetters,mapActions } from vuex;methods:{...mapActions([asyncSetCount]),clickAsyncHandler(){// this.$store.dispatch(asyncSetCount)// 或者// this.asyncSetCount()}
}Vue3新特性1 Vue3是目前Vue的最新版本自然也是新增了很多新特性
六大亮点
Performance性能更比Vue 2.0强。Tree shaking support可以将无用模块“剪辑”仅打包需要的。Composition API组合APIFragment, Teleport, Suspense“碎片”Teleport即Protal传送门“悬念”Better TypeScript support更优秀的Ts支持Custom Renderer API暴露了自定义渲染API
ref或者reactive
在2.x中通过组件data的方法来定义一些当前组件的数据
data() {return {name: iwen,list: [],}
}在3.x中通过ref或者reactive创建响应式对象
import { ref,reactive } from vue
export default {name: HelloWorld,setup(){const name ref(iwen)const state reactive({list:[]})return{name,state}}
}methods中定义的方法写在setup()
在2.x中methods来定义一些当前组件内部方法
methods:{http(){}
}在3.x中直接在setup方法中定义并return
setup() {const http (){// do something}return {http};
}setup()中使用props和context
在2.x中组件的方法中可以通过this获取到当前组件的实例并执行data变量的修改方法的调用组件的通信等等但是在3.x中setup()在beforeCreate和created时机就已调用无法使用和2.x一样的this但是可以通过接收setup(props,ctx)的方法获取到当前组件的实例和props
export default {props: {name: String,},setup(props,ctx) {console.log(props.name)ctx.emit(event)},
}Vue3新特性2 在setup中使生命周期函
你可以通过在生命周期钩子前面加上 “on” 来访问组件的生命周期钩子。
下表包含如何在 setup () 内部调用生命周期钩子
Options APIHook inside setupbeforeCreateNot needed*createdNot needed*beforeMountonBeforeMountmountedonMountedbeforeUpdateonBeforeUpdateupdatedonUpdatedbeforeUnmountonBeforeUnmountunmountedonUnmounted
export default {setup() {// mountedonMounted(() {console.log(Component is mounted!)})}
}Provide / Inject
provide() 和 inject() 可以实现嵌套组件之间的数据传递。这两个函数只能在 setup() 函数中使用。父级组件中使用 provide() 函数向下传递数据。子级组件中使用 inject() 获取上层传递过来的数据。不限层级
// 父组件
import { provide } from vuesetup() {provide(customVal, 我是父组件向子组件传递的值);
}// 子组件
import { inject } from vuesetup() {const customVal inject(customVal);return {customVal}
}Fragment
Fragment翻译为“碎片”
不再限于模板中的单个根节点
templateimg altVue logo src./assets/logo.pngHelloWorld msgWelcome to Your Vue.js App /
/templateVue3加载Element-plus Element一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
Element Plus 基于 Vue 3面向设计师和开发者的组件库
安装Element-Plus
npm install element-plus --save完整引用
如果你对打包后的文件大小不是很在乎那么使用完整导入会更方便
import { createApp } from vue
import ElementPlus from element-plus
import element-plus/dist/index.css
import App from ./App.vueconst app createApp(App)app.use(ElementPlus)
app.mount(#app)按需导入
按需导入才是我们的最爱毕竟在真实的应用场景中并不是每个组件都会用到这会造成不小的浪费
首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件
npm install -D unplugin-vue-components unplugin-auto-import然后修改vue.config.js配置文件
const { defineConfig } require(vue/cli-service)
const AutoImport require(unplugin-auto-import/webpack)
const Components require(unplugin-vue-components/webpack)
const { ElementPlusResolver } require(unplugin-vue-components/resolvers)module.exports defineConfig({transpileDependencies: true,configureWebpack: {plugins: [AutoImport({resolvers: [ElementPlusResolver()]}),Components({resolvers: [ElementPlusResolver()]})]}
})最后可以直接在组件中使用
templateel-buttonDefault/el-buttonel-button typeprimaryPrimary/el-button
/template实时效果反馈
1. 在Vue3项目中引入饿了么UI组件库下来命令正确的是
A npm install --save element-iu
B vue add element
C npm install element-plus --save
D vue add element-plus
答案
1C
Vue3加载Element-plus的字体图标 Element-plus不仅仅是提供了各种组件同时还提供了一整套的字体图标方便开发者使用
安装icons字体图标
npm install element-plus/icons-vue全局注册
在项目根目录下创建plugins文件夹在文件夹下创建文件icons.js文件
import * as components from element-plus/icons-vue;
export default {install: (app) {for (const key in components) {const componentConfig components[key];app.component(componentConfig.name, componentConfig);}},
};引入文件
在main.js中引入icons.js文件
import elementIcon from ./plugins/icons;
app.use(elementIcon)使用方式
接下来就可以直接在组件中引入使用了
el-icon classexpand color#409EFC :size30expand /
/el-iconst AutoImport require(‘unplugin-auto-import/webpack’) const Components require(‘unplugin-vue-components/webpack’) const { ElementPlusResolver } require(‘unplugin-vue-components/resolvers’)
module.exports defineConfig({ transpileDependencies: true, configureWebpack: { plugins: [ AutoImport({ resolvers: [ElementPlusResolver()] }), Components({ resolvers: [ElementPlusResolver()] }) ] } })
最后可以直接在组件中使用html
templateel-buttonDefault/el-buttonel-button typeprimaryPrimary/el-button
/template实时效果反馈
1. 在Vue3项目中引入饿了么UI组件库下来命令正确的是
A npm install --save element-iu
B vue add element
C npm install element-plus --save
D vue add element-plus
答案
1C
Vue3加载Element-plus的字体图标
[外链图片转存中…(img-mgqnmUrO-1712537495244)]
Element-plus不仅仅是提供了各种组件同时还提供了一整套的字体图标方便开发者使用
安装icons字体图标
npm install element-plus/icons-vue全局注册
在项目根目录下创建plugins文件夹在文件夹下创建文件icons.js文件
import * as components from element-plus/icons-vue;
export default {install: (app) {for (const key in components) {const componentConfig components[key];app.component(componentConfig.name, componentConfig);}},
};引入文件
在main.js中引入icons.js文件
import elementIcon from ./plugins/icons;
app.use(elementIcon)使用方式
接下来就可以直接在组件中引入使用了
el-icon classexpand color#409EFC :size30expand /
/el-icon
