网站建设手机版模板,免费做网站方案,自定义wordpress页面模板下载,网站建设项目说明书1.如果自己电脑vue版本是vue2版本#xff0c;下面将详细介绍如何在vue2版本基础上继续安装 vue3版本且不会影响vue2版本的使用 1-1 在c盘或者别的盘建一个文件夹vue3 1-2 在这个文件夹里使用WINR 打开终端 输入命令 npm install vue/cli 安装完即可 1-3 然后进入此文件夹中的n…1.如果自己电脑vue版本是vue2版本下面将详细介绍如何在vue2版本基础上继续安装 vue3版本且不会影响vue2版本的使用 1-1 在c盘或者别的盘建一个文件夹vue3 1-2 在这个文件夹里使用WINR 打开终端 输入命令 npm install vue/cli 安装完即可 1-3 然后进入此文件夹中的node_modules中的.bin文件夹中修改里面文件如下 vue修改为vue3, vue.cmd修改为vue3.cmd 1-4 然后把vue3.cmd拖拽到命令窗口中加上-v即可看到版本号 如下图所示 1-5 接下来就是配置环境变量 1-5-1 打开电脑系统属性-高级-环境变量 1-5-2 点击系统变量下方的新建 配置新的变量 变量名vue3_cli 变量值C:\vue3\node_modules\.bin(根据自己位置就行) 1-5-3 点击变量中的path 点击编辑 完了把新增 把%vue_cli3% 1-5-5 如果是建vue3项目的话 具体命令是 vue3 create demo_project,然后根据具体内容去选择
2.element-plus新增组件库 2-1 Text 基本用法 具体代码如下(可以直接新建完项目以后粘贴验证)
templatediv classdiv_containerh3Text 基本用法/h3el-text classmr-5Default/el-textel-text classmr-5 typeprimaryPrimary/el-textel-text classmr-5 typesuccessSuccess/el-textel-text classmr-5 typeinfoInfo/el-textel-text classmr-5 typewarningWarning/el-textel-text classmr-5 typedangerDanger/el-texth3Text 尺寸/h3el-text classmr-5 sizelargeLarge/el-textel-text classmr-5Default/el-textel-text classmr-5 sizesmallSmall/el-texth3 stylemargin-bottom: 10pxText 省略/h3div stylemargin-bottom: 10px通过 truncated 属性在文本超过视图或最大宽度设置时展示省略符。 通过line-clamp 属性控制多行的样式/divdivel-text classw-150px mb-2 truncatedSelf element set width 100px/el-textel-row classw-150px mb-2el-text truncatedSqueezed by parent element/el-text/el-rowel-text line-clamp2The -webkit-line-clamp CSS propertybr /allows limiting of the contents ofbr /a block to the specified number of lines./el-text/divh3Text 覆盖/h3el-space directionverticalel-textspan/el-textel-text tagpThis is a paragraph./el-textel-text tagbBold/el-textel-text tagiItalic/el-textel-textThis isel-text tagsub sizesmallsubscript/el-text/el-textel-textThis isel-text tagsup sizesmallsuperscript/el-text/el-textel-text taginsInserted/el-textel-text tagdelDeleted/el-textel-text tagmarkMarked/el-text/el-space/div
/templatescript setup
import element-plus/icons-vue;
/script
style scoped
.div_container {
}
.mr-5 {margin-right: 5px;
}
.w-150px {width: 150px;
}
.mb-2 {margin-bottom: 2px;
}
/style 2-2 TreeSelect 树形选择
templateh3TreeSelect 树形选择 选择任意级别/h3div stylecolor: lightseagreen(注意当属性 check-strictlytrue时任何节点都可以被选择否则只有子节点可被选择。)/divdiv classnode_css mt_15el-tree-selectv-modelvalue:datadata:check-strictlycheckStrictly:render-after-expandfalsestylewidth: 240px/div classmt_15show checkbox(only click checkbox to select):el-tree-selectv-modelvalue2:datadata:check-strictlycheckStrictly:render-after-expandfalseshow-checkboxstylewidth: 240px//divdiv classmt_15show checkbox with check-on-click-node:el-tree-selectv-modelvalue3:datadata:check-strictlycheckStrictly:render-after-expandfalseshow-checkboxcheck-on-click-nodestylewidth: 240px//div/divdiv styledisplay: flex; flex-direction: rowdiv styleflex: 5el-watermark:width130:height30imagehttps://element-plus.org/images/element-plus-logo.svgdiv styleheight: 500px //el-watermark/divdiv styleflex: 5el-watermark:fontfont:content[Element, Element Plus]:width130:height40div styleheight: 500px //el-watermark/div/div
/templatescript setup
import { ref, reactive, toRaw, onMounted } from vue;
const value ref();
const value2 ref();
const value3 ref();
const checkStrictly ref(false);
const demolist reactive({list: [{title: 一般,// icon: h(Home),name: home,value: 0,},{title: 还好,// icon: h(Category),name: category,value: 0,},{title: 很好,// icon: h(Find),name: find,value: 0,},{title: 最爱,// icon: h(Cart),name: cart,value: 0,},{title: 改进,// icon: h(My),name: my,value: 0,},],
});
const data [{value: 1,label: Level one 1,children: [{value: 1-1,label: Level two 1-1,children: [{value: 1-1-1,label: Level three 1-1-1,},],},],},{value: 2,label: Level one 2,children: [{value: 2-1,label: Level two 2-1,children: [{value: 2-1-1,label: Level three 2-1-1,},],},{value: 2-2,label: Level two 2-2,children: [{value: 2-2-1,label: Level three 2-2-1,},],},],},{value: 3,label: Level one 3,children: [{value: 3-1,label: Level two 3-1,children: [{value: 3-1-1,label: Level three 3-1-1,},],},{value: 3-2,label: Level two 3-2,children: [{value: 3-2-1,label: Level three 3-2-1,},],},],},
];
onMounted(() {console.log(demolist, demolist);console.log(toRaw(demolist));// console.log(JSON.parse(JSON.stringify(demolist)));
});
/script
style scoped
.mt_15 {margin-top: 15px;
}
.node_css {display: flex;flex-direction: column;
}
/style
3.vue3新增属性-setup使用俩种方式 3-1 第一种方式 标签以外写 setup 函数需要显式导入 defineComponent但上下文指向组件实例可以使用传统的生命周期钩子和直接访问组件的属性和方法。 3-2 第二种方式 语法更简洁但上下文不指向组件实例。
script setupimport {onMounted, ref} from vue;const valueref();const showFlagref(false);const handleClick(){};onMounted((){ console.log(showFlag)})
/script
4.vue3已废除$set向对象中添加响应式的属性 以下是常用的集中方法 4-1 使用ES6属性 Reflect
script setupimport { ref, reactive, toRaw, onMounted } from vue;const demolist reactive({list: [{title: 一般,// icon: h(Home),name: home,value: 0,},{title: 还好,// icon: h(Category),name: category,value: 0,},{title: 很好,// icon: h(Find),name: find,value: 0,},{title: 最爱,// icon: h(Cart),name: cart,value: 0,},{title: 改进,// icon: h(My),name: my,value: 0,},],}); const inpChange () {for (var e 0; e toRaw(demolist.list).length; e) {Reflect.set(toRaw(demolist.list)[e], index, e 1);}console.log(toRaw(demolist), demolist);}
/script 4-2 使用vue3响应式
script setupimport { ref, reactive, toRaw, onMounted } from vue;const demolist reactive({list: [{title: 一般,// icon: h(Home),name: home,value: 0,},{title: 还好,// icon: h(Category),name: category,value: 0,},{title: 很好,// icon: h(Find),name: find,value: 0,},{title: 最爱,// icon: h(Cart),name: cart,value: 0,},{title: 改进,// icon: h(My),name: my,value: 0,},],}); const inpChange () {for (var e 0; e toRaw(demolist.list).length; e) {toRaw(demolist.list)[e].index e 1;}console.log(toRaw(demolist), demolist);}
/script
效果图如下 4-3 上述俩种是有一定规律添加 如果是特定的添加 用以下这种方法
script setupimport { ref, reactive, toRaw, onMounted } from vue;const demolist reactive({list: [{title: 一般,// icon: h(Home),name: home,value: 0,},{title: 还好,// icon: h(Category),name: category,value: 0,},{title: 很好,// icon: h(Find),name: find,value: 0,},{title: 最爱,// icon: h(Cart),name: cart,value: 0,},{title: 改进,// icon: h(My),name: my,value: 0,},],}); const inpChange () {for (var e 0; e toRaw(demolist.list).length; e) {if (e % 2 0) {console.log(toRaw(demolist.list[e]),toRaw(demolist.list[e] %20;toRaw(demolist.list)[e].index e 1;} else {console.log(toRaw(demolist.list[e]),toRaw(demolist.list[e] %2!0);toRaw(demolist.list)[e].index e 2;}}console.log(toRaw(demolist), demolist);}
/script
效果图如下 4-4 vue3写法归总 持续更新中......
1.获取输入框 下拉框的值 使用.value去拿2.但是如果你这个属性是还包了一层 reactive 那么你就这样就代理了 打印出的值是包在了Proxy里想要获取值有俩种方式:第一种是vue自带的 toRaw(objectTarget) 第二种是序列化使用 JSON.parse(JSON.stringfy(objectTarget))5.vue3七种传值方式 5-1 Props方式
父组件代码
templatechild-components :listlist/child-componentsdivinput v-modelvalue typetext placeholder请输入/button clickhandleAdd typebutton添加/button/div
/template
script setup
import { ref } from vue
import ChildComponents from ./child.vue
const list ref([JavaScript, HTML, CSS])
const value ref()
// add 触发后的事件处理函数
const handleAdd () list.value.push(value.value)
/script子组件代码(子组件只需要对父组件传递的值进行渲染即可)
templateul li v-fori in props.list :keyi{{ i }}/li/ul
/template
script setup
import { defineProps } from vue
const props defineProps({list: {type: Array,default: () [],},
})
/script
效果图如下 5-2 emit方式 (emit方式也是Vue中最常见的组件通信方式该方式用于子传父) 效果图如上所述 就不展示了
父组件 在父组件中只需要监听子组件自定义的事件然后执行对应的添加操作。
templateh8我是父组件/h8ulli v-fori in list :keyi{{ i }}/li/ulchild-components addhandleAdd/child-components
/template
script setup
import { ref } from vue;
import ChildComponents from ./MainPage.vue;
const list ref([JavaScript, HTML, CSS]);
// add 触发后的事件处理函数
const handleAdd (value) {list.value.push(value);
};
/script子组件 在子组件中点击【添加】按钮后emit一个自定义事件并将添加的值作为参数传递。
templateh8我是子组件/h8divinput v-modelvalue typetext placeholder请输入 /button clickhandleSubmit typebutton添加/button/div
/template
script setup
import { ref, defineEmits } from vue;
const value ref();
const emits defineEmits([add]);
const handleSubmit () {emits(add, value.value);value.value ;
};
/script 5-3 v-model 是vue3 比较出色的语法糖 将会着重讲 5-3-1 单独传值如下:
父组件
templateh8我是父组件/h8ulli v-fori in list :keyi{{ i }}/li/ulchild-components v-model:listlist/child-components
/template
script setup
import { ref } from vue;
import ChildComponents from ./MainPage.vue;
const list ref([JavaScript, HTML, CSS]);
/script子组件
templateh8我是子组件/h8divinput v-modelvalue typetext placeholder请输入 /button clickhandleAdd typebutton添加/button/div
/template
script setup
import { ref, defineEmits, defineProps } from vue;
const value ref();
const props defineProps({list: {type: Array,default: () [],},
});
const emits defineEmits([update:list]);
// 添加操作
const handleAdd () {const arr props.list;arr.push(value.value);emits(update:list, arr);value.value ;
};
/script 5-3-2 多个传值情况写法如下 特别需要注意俩点1.在父组件中 绑俩个v-modelchild-components v-model:listlist v-model:listCopylistCopy/child-components2.在子组件中 const emits defineEmits([update:list,update:listCopy]);
父组件
templateh4我是父组件/h4ulli v-fori in list :keyi{{ i }}/li/ulh4我是父组件Copy/h4ulli v-fori in listCopy :keyi{{ i }}/li/ulchild-components v-model:listlist v-model:listCopylistCopy/child-components
/template
script setup
import { ref } from vue;
import ChildComponents from ./MainPage.vue;
const list ref([JavaScript, HTML, CSS]);
const list ref([JavaScriptCopy, HTMLCopy, CSSCopy]);
/script子组件
templateh4我是子组件/h4divinput v-modelvalue typetext placeholder请输入 /button clickhandleAdd typebutton添加/button/divh4我是子组件Copy/h4divinput v-modelvalueCopy typetext placeholder请输入 /button clickhandleAddCopy typebutton添加/button/div
/template
script setup
import { ref, defineEmits, defineProps } from vue;
const value ref();
const valueCopy ref();
const props defineProps({list: {type: Array,default: () [],},listCopy: {type: Array,default: () [],},
});
const emits defineEmits([update:list,update:listCopy]);
// 添加操作
const handleAdd () {const arr props.list;arr.push(value.value);emits(update:list, arr);value.value ;
};
const handleAddCopy () {const arr props.listCopy;arr.push(valueCopy.value);emits(update:listCopy, arr);valueCopy.value ;
};
/script 5-4 refs
在使用选项式API时我们可以通过this.$refs.name的方式获取指定元素或者组件但是组合式API中就无法使用哪种方式获取。如果我们想要通过ref的方式获取组件或者元素需要定义一个同名的Ref对象在组件挂载后就可以访问了。
父组件
templateulli v-fori in childRefs?.list :keyi{{ i }}/li/ul!-- 子组件 ref的值与script中的保持一致 --child-components refchildRefs/child-components!-- 父组件 --
/template
script setup
import { ref } from vue
import ChildComponents from ./MainPage.vue
const childRefs ref(null)
/script子组件
templatedivinput v-modelvalue placeholder请输入/button clickhandleAdd typebutton添加/button/div
/template
script setup
import { ref, defineExpose } from vue
const list ref([JavaScript, HTML, CSS])
const value ref(1)
// add触发后的事件处理函数
const handleAdd () {list.value.push(value.value)value.value
}
defineExpose({ list })
/script 5-5 provide/inject provide和inject是Vue中提供的一对API该API可以实现父组件向子组件传递数据无论层级有 多深都可以通过这对API实现。示例代码如下所示
父组件
template!-- 子组件 --child-components/child-components!-- 父组件 --divinput v-modelvalue placeholder请输入/button clickhandleAdd typebutton添加/button/div
/template
script setup
import { ref, provide } from vue
import ChildComponents from ./MainPage.vue
const list ref([JavaScript, HTML, CSS])
const value ref()
// 向子组件提供数据
provide(list, list.value)
// add 触发后的事件处理函数
const handleAdd () {list.value.push(value.value)value.value
}
/script子组件
templateul li v-fori in list :keyi{{ i }}/li/ul
/template
script setup
import { inject } from vue
// 接受父组件提供的数据
const list inject(list)
/script 5-6 事件总线 结合外部第三方库来完成 官方推荐了俩种 mitt和tiny-emitter 我这里以mitt为例来说 5-6-1 首先安装mitt
npm install mitt 5-6-2 找到vue项目中的utils文件夹新建一个bus.js代码
import mitt from mitt;
const mitter mitt();
export default mitter; 5-6-3 使用 我现在使用mitt进行兄弟组件之间的通信实现
父组件
templatechild1/child1 child2/child2
/template
script setupimport Child1 from ./MainPage.vue;import Child2 from ./GoodsPage.vue;
/script
子组件-child1
templatedivchild1button clickclick给child2 传值/button/div
/template
script setup
import emitter from /utils/bus;function click() {emitter.emit(child2Data, { name: 小米 });}
/script
子组件-child2
templatedivchild2---{{ str }}/div
/template
script setup
import emitter from /utils/bus;
import { onBeforeUnmount, ref } from vue;
let str ref();
emitter.on(child2Data, (data) {str.value data.name;
});
onBeforeUnmount(() {emitter.off(child2Data); //关闭
});
/script 效果图如下 6.后续会陆续补充 6-1 创建vue3项目的时候一些选择 6-2 element-plus新增组件在实际项目中使用 6-3 vue3新增属性及生命周期及写法element-plus 在实际项目中使用
持续更新中......
