Products
GG网络技术分享 2025-03-18 16:14 0
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架
特点：易用、灵活、高效
全家桶：vue + components（vue element / iview...） + vue-router + vuex + vue-cli
类库 vs 插件 vs 组件 vs 框架
声明式和命令式
MVC & MVVM
点击添加图片描述（最多60个字）
点击添加图片描述（最多60个字）
<div id=\"app\">
{{msg}}
</div>
<!-- IMPORT JS -->
< src=\"node_modules/vue/dist/vue.min.js\"></>
<>
new Vue({
el: \'#app\',
data: {
msg: \'hello world\'
}
});
setTimeout(() => {
vm.msg = \'你好世界\';
}, 1000);
</>
<div id=\"app\">
人民币：￥<input type=\"text\" v-model=\'price\'>元
<br>
美元：${{price/8}}
</div>
<!-- IMPORT JS -->
< src=\"node_modules/vue/dist/vue.min.js\"></>
<>
let vm = new Vue({
el: \'#app\',
data: {
price: 0
}
});
</>
VUE的基础语法
new Vue(options)
mustache（[ˈmʌstæʃ]） 小胡子语法
常用的指令（directive）
directive自定义指令
事件修饰符
表单元素的处理
计算属性、过滤器、监听器
data(){
return {
checked:false, //是否全选
checkModel:[]
}
},
watch:{
checkModel(){
if(this.checkModel.length==this.list.length){
this.checked=true;
}else{
this.checked=false;
}
}
}
复制代码
class和style绑定
生命周期函数（钩子函数）
常用的属性方法
案例：选项卡
案例：购物车计算器
案例：商城类别筛选
双向数据绑定的实现原理
//observer:观察者
function observer(obj) {
if (obj && typeof obj === \'object\') {
for (let key in obj) {
if (!obj.hasOwnProperty(key)) break;
defineReactive(obj, key, obj[key]);
}
}
}
function defineReactive(obj, key, value) {
observer(value);
Object.defineProperty(obj, key, {
get() {
return value;
},
set(newValue) {
observer(newValue);
if (value === newValue) return;
value = newValue;
}
});
}
function $set(data, key, value) {
defineReactive(data, key, value);
}
点击添加图片描述（最多60个字）
VUE中的组件（component）
组件的特点是：
1.全局组件 & 组件的基本语法
<my-component>
<template v-slot:xxx 或者 #xxx>
珠峰培训
</template>
</my-component>
{
templete:`<div>
<slot name=\'xxx\'></slot>
</div>`
}
2.局部组件
3.组件信息通讯之父传子：props属性传递
<my-component aa=\'zhufeng\' :bb=\'xxx\'></my-component>
Vue.component(\'my-component\',{
props:[\'aa\',\'bb\'],
})
4.vue的单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。
Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：
每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。子组件想修改时，只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改。有两种常见的试图改变一个 prop 的情形 :
5.组件信息通讯之子改父：this.$emit
<my-component @func=\'xxx\'></my-component>
new Vue({
methods:{
xxx(value){
//=>value是this.$emit时候传递的第二个参数值
}
}
});
{
methods:{
xxx(){
this.$emit(\'func\',10);
}
}
}
let eventBus=new Vue; //=>创建事件总线
//A组件
eventBus.$on(\'xxxA\',this.func);
//B组件
eventBus.$emit(\'xxxA\');
6.基于ref实现父子组件信息通信
7.基于provide和inject实现祖先与后代的通信
{
provide:{ //=>对象或者返回对象的函数都可以（属性值如果是data中的数据，则必须使用函数的方法进行处理）
name:\'zhufeng\',
year:10
},
}
{
inject:[\'name\'],
methods:{
func(){
let name=this.name;
}
}
}
VUE中的TRANSITION动画
1. 什么情况下会用动画
2. 如何实现动画
3. transition的基础使用
4.JAVA中的动画钩子函数
<transition
@before-enter=\"beforeEnter\"
@enter=\"enter\"
@after-enter=\"afterEnter\"
@before-leave=\"beforeLeave\"
>
</transition>
methods:{
beforeEnter: function (el,done) {
},
}
5. transition-group 处理多组元素动画
综合实战案例
1. 轮播图的实现
2. TASK OA任务管理系统（俗称TODO）
模糊匹配功能在下拉菜单的组件中用的非常多，于是打算写几个demo看看细节上是如何实现的。
一、最简单的模糊匹配：计算属性
| <!DOCTYPE html> <html lang=\"zh-CN\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"> <title>Document</title> </head> <body> <div id=\"app\"> <input type=\"text\" v-model=\"message\"> <ul> <li v-for=\"(option, index) in matchedOptions\" :key=\"index\">{{ option }}</li> </ul> </div> <script src=\"./vue.js\"></script> <script> new Vue({ el: \'#app\', data: { message: \'\', options: [\'html\', \'css\', \'javascript\'] }, computed: { matchedOptions() { if (this.message !== \'\') { return this.options.filter(option => option.includes(this.message)) } return this.options } } }) </script> </body> </html> |
在上面的例子中，计算属性matchedOptions会在文本框内容message变化时筛选options里的数据，效果图如下所示：
二、使用作用域插槽实现
使用插槽主要是为了使该功能组件化：在select组件中插入option，然后option通过作用域插槽从select中获取文本值：
| <!DOCTYPE html> <html lang=\"zh-CN\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"> <title>Document</title> </head> <body> <div id=\"app\"> <my-select> <template #default=\"{ message }\"> <ul> <li v-for=\"(option, index) in options\" :key=\"index\" v-show=\"option.includes(message)\">{{ option }}</li> </ul> </template> </my-select> </div> <script src=\"./vue.js\"></script> <script> Vue.component(\'my-select\', { template: ` <div class=\"my-select\"> <input type=\"text\" v-model=\"message\"> <slot :message=\"message\"></slot> </div> `, data() { return { message: \'\' } } }) new Vue({ el: \'#app\', data: { options: [\'html\', \'css\', \'javascript\'] } }) </script> </body> </html> |
全局注册了my-select组件后，可以删除app里的message数据，使用v-show来控制选项的显示，运行效果和计算属性方式相同。缺点就是无法单文件化（刚学vue没多久，不知道怎么在单文件里使用作用域插槽，试过直接把template里的东西封装成my-option好像并不管用）
三、混入广播和派发方法在独立组件中实现模糊匹配
首先需要一个emitter文件：
| /** * 子组件广播事件 * @param {string} componentName 子组件名 * @param {string} eventName 事件名 * @param {...any} params 事件参数 */ function _broadcast(componentName, eventName, ...params) { this.$children.forEach(child => { if (child.$options.name === componentName) { child.$emit(eventName, ...params) } _broadcast.call(child, componentName, eventName, ...params) }) } /** * 父组件派发事件 * @param {string} componentName 父组件名 * @param {string} eventName 事件名 * @param {...any} params 事件参数 */ function _dispatch(componentName, eventName, ...params) { if (this.$parent) { if (this.$parent.$options.name === componentName) { this.$parent.$emit(eventName, ...params) } _dispatch.call(this.$parent, componentName, eventName, ...params) } } /** * mixin */ export default { methods: { broadcast(componentName, eventName, ...params) { _broadcast.call(this, componentName, eventName, ...params) }, dispatch(componentName, eventName, ...params) { _dispatch.call(this, componentName, eventName, ...params) } } } |
注意，这里的$children和$parent都是指具有dom父子关系的vue组件。
最后，通过设置查询条件来控制子组件的显示与隐藏即可实现实时模糊搜索。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
Demand feedback
