动易 网站顶部导航 sitefactory,免费设计签名的软件,小程序商店怎么推广,微信小程序注册认证文章目录 一、Vue框架概述1.1 声明响应式的数据 二、Vue内置指令2.1、条件渲染指令v-if/v-show2.2 v-for: 列表渲染2.3、v-text/v-html 模板指令2.4 v-on:事件监听器2.6 动态绑定v-bind2.7 v-model表单元素值绑定 三、计算属性与监视3.1 计算属性computed3.2 watch侦听器3.3 wa… 文章目录 一、Vue框架概述1.1 声明响应式的数据 二、Vue内置指令2.1、条件渲染指令v-if/v-show2.2 v-for: 列表渲染2.3、v-text/v-html 模板指令2.4 v-on:事件监听器2.6 动态绑定v-bind2.7 v-model表单元素值绑定 三、计算属性与监视3.1 计算属性computed3.2 watch侦听器3.3 watch、watchEffect、computed区别 四、高级特性4.1 组件4.1.1 创建组件4.1.2 组件通信 4.2 生命周期 六、脚手架案例6.1 vue-router前端路由6.2 axios接口请求 本章学习目标 了解Vue框架架构思想掌握Vue核心指令掌握计算属性与监视掌握组件化开发模式 一、Vue框架概述
官方文档https://cn.vuejs.org/guide/introduction.html.文档可选择使用optionsAPI(选项式API阅读或者CompositionApi(组合式API阅读。选项式API更适合平滑从vue2过渡以下示例均以Compositions API方式编写。如何使用compositions API? : 在.vue文件的script标签上添加setup属性则被识别为使用compositionsAPI。不添加则默认为optionsAPI方式
script setup
// 组合式API写法
/scriptscript
// 选项式写法
export default {components:{},data(){ return {}},methods:{},
}
/script1、VUE的优势
渐进式框架没有强主张。只是个轻量视图只做了自己该做的事。渐进式数据绑定——》路由控制——》组件开发——》数据共享
2、Vue是什么
Vue.js (读音 /vju:/类似于view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是Vue 采用自底向上增量开发的设计轻量级MVVM框架通过简单的API提供高效的数据绑定和灵活的组件系统
3、VUE的引入步骤(三种方式
直接下载vue.js的库文件使用script标记引入到页面中。使用cdn进行引入网络上的vue。使用npm进行安装。
4、创建一个vue应用
本节以vue官方脚架方式来进行demo演示。vue3推荐使用create-vue来创建基于 Vite 的新项目。脚手架地址https://github.com/vuejs/create-vue
# 1、安装项目模板
npm create vuelatest
# 2、demo用对话内容都选No
# 3、进入创建好的文件
cd vue-project
# 4、安装依赖
npm install
# 5、启动项目
npm run dev 脚手架安装自定义选项 创建后生成项目目录结构如下: 成功启动后以浏览器中访问http://127.0.0.1:5173/ 打开项目后 打开App .vue入口模板文件打开components目录里面的所有.vue文件即为组件.vue文件即为vue模板组件主要分为三大块script交互脚本, templateHTML,style样式清除内容只留下script,template,style标签看页面如何变化 template
h1hello world!/h1
/templatescript setup
console.log(hello world!)
/scriptstyle scoped
h1{color:red;
}
/style1.1 声明响应式的数据
在vue3中新增了ref,reactive函数来定义一个响应式数据ref() 接收参数作为初始值并将参数包装为具有响应性的ref对象返回通过返回的ref对象的.value属性来取值在选项式API的setup()函数或在带setup属性的script标签中定义使用reactive() : 直接定义一个具有响应性的对象ref是将数据包装为特殊ref对象 reactive只能用于定义对象类型 (对象、数组和如 Map、Set 这样的集合类型)。不支持原始类型不能替换整个被定义的对象这样会导致响应性连接丢失reactive定义的响应式对象不能使用解构取值也会导致响应性连接丢失
templatedivp定义的ref值{{ refVal }}/pp定义的reactive值{{ obj.count }}/p/div
/templatescript setup
import {ref,reactive} from vue
let refVal ref(hello)
// 在template模板中会用ref对象的值时不需要.value但在script中需要
console.log(refVal.value)let obj reactive({count:1
})
/scriptstyle scoped
/style
二、Vue内置指令 以下demo以vue3的composition API为例使用 2.1、条件渲染指令v-if/v-show
v-if: 条件渲染显示与隐藏布尔值 v-if: 基于表达式值的真假性来条件性地渲染元素或者模板片段v-if-else与v-if搭配使用实现链式调用v-else与v-if搭配使用实现链式调用注意当 v-if 元素被触发元素及其所包含的指令/组件都会销毁和重构。如果初始条件是假那么其内部的内容根本都不会被渲染。 v-show条件渲染 原理v-show 通过设置内联样式的 display CSS 属性来工作当元素可见时将使用初始 display 值。 v-if与v-show的区别 v-if通过值的真假来控制元素是否被渲染来实现显隐而v-show通过css的display属性来控制实现显示与隐藏。v-if元素每一次触发都会引起重构。 templatedivdiv v-iftype AA/divdiv v-else-iftype BB/divdiv v-else-iftype CC/divdiv v-elseNot A/B/C/div/div
/templatescript setup
// 声明一个变量
let type B
/script
style scoped
/style
2.2 v-for: 列表渲染 基于原始数据多次渲染元素或模板块支持遍历的原始数据可以是Array | Object | number | string | Iterable templatediv!-- 遍历数组 --divspan v-for(item,index) in arr :keyindex{{item}},/span/div!-- 遍历对象 --divspan v-for(value,key) in obj :keykey{{key}}-{{value}},/span/div/div
/templatescript setuplet arr [apple,banana,peach,cherry]let obj{name:张三,age:18,sex:男}
/script
style scoped
/style
2.3、v-text/v-html 模板指令
v-text: 更新元素的文本内容类似DOM API中的innerTextv-html更新元素的 innerHTML。类似innerHTML)
templatedivdiv v-texttextStr/divdiv v-htmlhtmlStr/div/div
/templatescript setuplet textStr 这是一段文本html内容不会被解析为html.如h1h1标签/h1let htmlStr h1这是html内容可以被解析/h1
/script
style scoped
/style
2.4 v-on:事件监听器
给元素绑定事件监听器简写为参数event对象修饰符 .stop - 阻止冒泡调用 event.stopPropagation()。.prevent - 阻止默认行为调用 event.preventDefault()。.capture - 在捕获模式添加事件监听器。.self - 只有事件从元素本身发出才触发处理函数。.{keyAlias} - 只在某些按键下触发处理函数。.once - 最多触发一次处理函数。.left - 只在鼠标左键事件触发处理函数。.right - 只在鼠标右键事件触发处理函数。.middle - 只在鼠标中键事件触发处理函数。.passive - 通过 { passive: true } 附加一个 DOM 事件。
templatedivbutton v-on:clickonclick1普通点击/buttondiv v-on:clicktestPropogation防止冒泡点击使用别名绑定button click.stoponclick2防冒泡点击/button/divdiv click.capturecaptureHandlercaptureHandler:捕获触发click,点button,先触发captureHandler,再必testCapturebutton clicktestCapturetestCapture/button/diva hrefhttps://www.baidu.com click.preventpreventHandler点击不跳转/abutton click.onceonceHandler只响应一次再点没用/buttondiv按下enter触发input keyup.enteronEnter //div/div
/templatescript setupfunction onclick1(){alert(普通点击)}
// 冒泡测试function onclick2(){alert(防冒泡点击)}function testPropogation(){alert(点击div或冒泡触发)}
// 捕获测试
function captureHandler(){alert(点了外层div)
}
function testCapture(){alert(捕获触发或者直接点击按钮触发)
}
// prevent测试
function preventHandler(){alert(preventHandler)
}
// .once测试
function onceHandler(){alert(once事件触发再点没用)
}
// .{keyAlias}测试
function onEnter(){alert(按下enter键)
}
/script
style scoped
/style
2.6 动态绑定v-bind
用于绑定 class 或 style用于绑定组件prop简写
templatediv!-- 绑定DOM属性 --img stylewidth:100px v-bind:srcimgSrc/!-- 绑定style --img :style{width:200px,height:100px,marginLeft:20px} v-bind:srcimgSrc/!-- 绑定class --div :classclassArr 绑定class数组/div/div
/templatescript setup
let imgSrc http://imgsrc.baidu.com/baike/pic/item/ac345982b2b7d0a25cd01174cbef76094b369a39.jpg
// 绑定class
let classArr [w100,bg-blue]
/scriptstyle
.w100{width: 100px;height: 100px;
}
.bg-blue{background: blue;
}
/style
2.7 v-model表单元素值绑定
在表单输入元素或组件上创建双向绑定支持标签input,select,textarea或者vue components修饰符 .lazy - 监听 change 事件而不是 input.number - 将输入的合法字符串转为数字.trim - 移除输入内容两端空格
templatediv输入--------》input typetext v-modelinputVal双向绑定显示--------》divinputVal: {{inputVal}}/div/div
/template
script setup
// 使用 ref() 函数来声明响应式状态
import {ref,reactive} from vue
let inputValref(aaa)
// ref对象通过.value来获取其值
console.log(inputVal.value)
/script
style/style三、计算属性与监视
3.1 计算属性computed 对于复杂的变量值需要进一步通过逻辑处理返回的值推荐通过计算属性来定义返回值一个计算属性 ref但计算属性 ref 也会在模板中自动解包因此在模板表达式中引用时无需添加 .value计算属性会自动追踪响应式依赖computed函数参数默认为一个getter函数函数返回值即为想要的计算结果。传入包括get,set函数的对象可设置读写操作 templatediv计算属性1默认只可读{{ authorMsg }}/divdiv计算属性2{{fullName}}/div
/template
script setup
// ref() 函数来声明响应式状态
// computed() 函数来声明计算属性
import { ref,computed } from vue;
let author {name:张三,fruits:[apple,banana,peach,cherry]
}
// 示例1默认传入一个getter函数
let authorMsg computed((){let authorName author.namelet fruitsStr author.fruits.map(itemitem,)return ${authorName}喜欢吃的水果有${fruitsStr}
})const firstName ref(张)
const lastName ref(三)const fullName computed({// getterget() {return firstName.value lastName.value},// setterset(newValue) {// 注意我们这里使用的是解构赋值语法let [first, last] newValue.split()firstName.valuefirstlastName.value last}
})
setTimeout(() {fullName.value王五
}, 2000);
/script
style
/style3.2 watch侦听器 概述侦听器在侦听的某个响应式状态发生变化时触发其回调函数应用场景根据异步操作的结果去修改另一处的状态语法watch(数据源, 回调函数)数据源 ref (包括计算属性)、一个响应式对象(reactive)、一个 getter 函数、或多个数据源组成的数组深层侦听属性deep: true立即回调属性immediate: true回调触发时间 默认情况下回调会在vue组件更新之前调用因此若在回调中访问DOM会是更新前的状态所以尽量避免在watch回调中访问dom。如果想在回调中访问Vue更新之后 的DOM需要添加属性 {flush: ‘post’} 属性语法
watch(source, callback, {deep: true, // 深层侦听immediate: true, // 立即执行一次回调flush: post, // 访问Vue更新之后的DOM
})示例
templatedivdiv clickrandomChange(x)触发x变化/divdiv clickrandomChange(y)触发y变化/divdiv click() (obj.count 10)reactive值变化/div/div
/template
script setup
import { ref, watch, reactive } from vue;
const x ref(0);
const y ref(0);// 触发变化函数
function randomChange(name) {let randomNum Math.random() * 10;if (name x) {x.value randomNum;}if (name y) {y.value randomNum;}
}// 1、监听单个 ref
watch(x, (newX) {console.log(例1监听单个refx is ${newX});
});// 2、监听getter 函数,x,y的变化都会触发
watch(() x.value y.value,(sum) {console.log(例2getter函数监听变化sum of x y is: ${sum});}
);// 3、多个来源组成的数组
watch([x, () y.value], ([newX, newY]) {console.log(例3多来源数组监听x is ${newX} and y is ${newY});
});// 4、监听响应式对象
const obj reactive({ count: 0 });// 错误写法因为 watch() 得到的参数是一个 number
// watch(obj.count, (count) {
// console.log(count is: ${count})
// })
// 正确写法
watch(() obj.count,(count) {console.log(例4、监听reactive响应式对象count is: ${count});}
);
/scriptstyle
/style
其他参数 watch(source, (newValue, oldValue) {// 注意newValue 此处和 oldValue 是相等的// *除非* state.someObject 被整个替换了// deep: 深度监听// immediate:立即执行且当 source 改变时再次执行
}, { immediate: true ,deep:true})3.3 watch、watchEffect、computed区别 watchEffect使用场景有多个依赖项需要侦听或需要侦听一个嵌套数据结构中的几个属性时watchEffect() 比深度侦听器更有效 区别 watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西.且仅在数据源确实改变时才会触发回调。watch 会避免在发生副作用时追踪依赖 watchEffect会在副作用发生期间追踪依赖。它会在同步执行过程中自动追踪所有能访问到的响应式属性。computed必须有return返回使用方法与data中的数据一样如果函数所依赖的属性没有变化从缓存中读取 四、高级特性
4.1 组件 组件组件常常被组织成层层嵌套的树状结构。在vue中.vue文件就是组件单文件组件SFC 4.1.1 创建组件
1、参考vue-project项目生成目录其中components就是约定的组件存放目录在components中新建Child.vue组件如下
child.vue
templatediv h1{{ msg }}/h1/div
/template
script setup
import {ref, reactive} from vue
let msg ref(这是Child)
/scriptstyle scoped
/style
2、父组件中引入。以App.vue为例此处以setup语法糖方式编写只需引入Child.vue就会自动注册该组件。若在optionsApi中需要显示注册components
App.vue
templatediv class这是Parentp------------------------分隔线------------------/pChild //div
/template
script setup langts
// 引入组件
import Child from ./components/Child.vue
import {ref, reactive} from vue/script4.1.2 组件通信
组件通信主要分为父子组件间通信非父子组件间通信父传子props属性子传父子组件自定义事件并通过$emit触发
1、父传子props
Child.vue
templatediv h1{{ parentMsg }}/h1/div
/template
script setup
// 1. 引入defineProps宏
import { defineProps} from vue
// 2.定义props
defineProps({parentMsg: {type: String}
})
/script
App.vue
templatediv class这是Parentp------------------------分隔线------------------/p!-- 3.传入props --Child :parentMsgtoChild//div
/template
script setup langts
import Child from ./components/Child.vue
import {ref} from vuelet toChild ref(来自Parent的消息)
/script
子组件向父组件传递参数——自定义事件$emit调
2、子传父
App.vue
templatediv class这是Parentp------------------------分隔线------------------/p!-- 3.绑定子组件自定义事件 --Child sayHihiHandler//div
/template
script setup langts
import Child from ./components/Child.vue// 4.接收子组件抛出事件的参数msg
function hiHandler(msg){alert(msg)
}
/script
child.vue
templatediv h1 clickclickHandler点击传给Parent/h1/div
/template
script setup
// 1. 引入defineEmits宏
import { defineEmits } from vue
// 2.定义组件会抛出的事件
const emit defineEmits([sayHi])function clickHandler(){console.log(child 中触发点击)// 3.触发抛出事件emit(sayHi,来自Child的消息)
}
/script
3、py: provice/inject 如果是祖辈组件与孙辈组件间传值可使用provide、inject provide(key,value), 必须在组件的setup()阶段同步调用inject(key,defaultValue) : 注入一个由祖先组件或整个应用通过app.provide())提供的值,defaultValue可选当没匹配到key对应的值时显示 示例组件结构如下AppMiddleChildApp.vue
templatediv class这是App.vue子组件为Middle孙组件为Child(由middle包含)p------------------------分隔线------------------/pMiddle //div
/template
script setup langts
import Middle from ./components/Middle.vue
import {provide,ref} from vuelet count ref(0)// 提供静态值
provide(appName,测试Demo)
// 提供响应值
provide(count,count)
/scriptMiddle.vue
templatediv 这是隔代组件内部引入Child组件Child //div
/template
script setup
import Child from ./Child.vue
/script
Child.vue
templatediv 这是Child.vue内容p来自app.vue的appName: {{ appName }}/pp这是app.vue的count: {{ count }}/p/div
/template
script setup
import {inject} from vuelet appName inject(appName)
let count inject(count)/script
4.2 生命周期 在vue3 compositionAPI中生命周期钩子函数都有on前缀常用如onMounted,onUpdated,onUnmounted(),onActived() onMounted(): 组件挂载完成后执行onUpdated(), 在组件因为响应式状态变更而更新其 DOM 树之后调用onUnMounted(), 在组件实例被卸载之后调用。onActived()若组件实例是 缓存树的一部分当组件被插入到 DOM 中时调用。 templatediv {{ count }}/div
/template
script setup langtsimport {ref, onMounted,onUpdated} from vue
let count ref(0)
setTimeout((){count.valueconsole.log(count改变将触发onUpdated)
},2000)onMounted((){console.log(onMounted)
})
onUpdated((){console.log(onUpdated)
})
/script
六、脚手架案例
6.1 vue-router前端路由
官网地址https://router.vuejs.org/zh/ 在创建单页应用项目时脚手架会提醒是否安装vue routerVueRouter作为前端路由库控制整个Vue项目的页面跳转服务。以下示例介绍vue-router集成到vue项目中的使用 1、安装vue router
npm install vue-router42、定义路由 - 项目目录中新建router文件夹并新建index.js
// router/index.js
import {createRouter,createWebHashHistory} from vue-router// 1、定义路由组件实际应用中通过导入.vue文件组件
const Home ()import(/pages/Home.vue)
const About ()import(/pages/About.vue)// 2、定义路由
const routes [{ path: /, component: Home },{ path: /about, component: About },
]// 3. 创建路由实例并传递 routes 配置
const router createRouter({history:createWebHashHistory(), // 以hash模式创建路由routes,
})export default router3、挂载路由到Vue实例中 - 打开项目src/main.js文件
// main.js
import ./assets/main.css
import router from /routerimport { createApp } from vue
import App from ./App.vue// 创建应用实例
const app createApp(App)
// 整个应用支持路由
app.use(router)
// 挂载整个应用
app.mount(#app)4、页面中通过router-view渲染
App.vue templatediv这是App.vup------------------------分隔线------------------/prouter-link to/Go to Home/router-link brrouter-link to/aboutGo to About/router-linkdiv classrouter-page styleborder:1px solid #ddd;padding:10px;router-view/router-view/div/div
/template
script setup
/script
5、路由跳转及传参 在vue3中使用组合式API编写router业务时参考文档https://router.vuejs.org/zh/guide/advanced/composition-api.html script setup
import {useRouter, useRoute } from vue-router
import {onMounted} from vue
const router useRouter()
const route useRoute()function goAbout(){// 路由跳转router.push({path:/about,query:{name:lala}})
}
onMounted((){console.log(route.path)
})
console.log(router)
/script6.2 axios接口请求
官网地址 https://www.npmjs.com/package/axios#axios-api axios是一个基于Promise的http客户端请求工具可以在浏览器或者node.js中使用。 1、安装 npm install axios --save2、src目录下创建api文件夹简单封装 - 一般对axios进行简单封装使用统一域名请求拦截响应拦截设置超时时间等
// src/api/http.js
import axios from axiosconst request axios.create({baseURL: https://www.xxx.com, // 后端服务地址timeout: 120000, // 超时时间
})// 请求拦截器用于在发出请求前做一些操作
request.interceptors.request.use(config{// 假设本地有tokenif(localStorage.getItem(token)){config.headers.token token}return config
})// 响应拦截器用于处理后端报错等
request.interceptors.response.use(response{if(response.status!200){console.log(请求响应服务出错了具体再看)}return response
})export default request
封装业务请求
// src/api/login.js
import request from ./httpconst Api {getCode:/api/v1/getCode,login:/api/v1/login
}// 假设获取验证码
export function getCode(params){return request.get(Api.getCode, params)
}// 登录
export function login(params){return request.post(Api.login, params)
}3、组件间使用(伪代码示例用) - pages/login.vue
templatediv 这是登录页/div
/template
script setup
import {getCode,login} from /api/login
import {ref, onMounted} from vue// 调用请求
let params {name:zhangsan,password:123455
}
login(params).then(res{console.log(res)
})
/script
