怎么删除织梦做的网站,小城镇建设网站参考文献,本地推广平台有哪些,营销思维与商业模式自定义指令#xff1a; vue中通过directive方法自定义指令#xff0c;如#xff1a;自定义一个v-focus指令#xff1a; scriptVue.directive(focus, {//通过directive(指令名,{配置})注册全局指令inserted: function (el) {//inserted:表示当自定义指令插入元素后…自定义指令 vue中通过directive方法自定义指令如自定义一个v-focus指令 scriptVue.directive(focus, {//通过directive(指令名,{配置})注册全局指令inserted: function (el) {//inserted:表示当自定义指令插入元素后后面跟处理函数el.focus()//通过原生API获取光标}})//实例化new Vue({el: #app,//directives:{},//directives可在实例中注册局部指令用法directives:{指令名:{inserted:处理函数}}})/scriptdiv idappinput v-focus/div//自定义使用使用组件化 组件是带有名称的可复用实例,组件系统是vue允许我们使用小型、独立、可重复的组件构建复杂应用如创建一个header组件并放到另一个组件中 // 1.定义数据配置const db {data() {return {text: header}},template:h2{{text}}/h2}// 2.创建 Vue 应用实例并将定义的数据配置给app实例:const app Vue.createApp(db)//新版vue中通过createApp函数创建实例// 3.给app定义名为 head-vue 的组件:component声明全局组件components声明局部组件//全局组件app.component(head-vue, {props: [person],//props:接收父组件变量供子组件使用,后面可接数组或对象当需要指定变量值类型时使用对象方式如person:Stringtemplate: li{{person.names}}button click$emit(big)按钮/button/li,//$meit用于调用内建括事件括号里面传入内建函数名如bigFont 1供按钮调用emits: [inFocus, submit]//定义已发出事件})// 局部组件声明const comA {}; //在对象中定义组件const comB {};const app Vue.createApp({components: {//components后面接一个对象对象中以组件名:组件 的形式声明组件componentA: ComA,componentB: ComB}})//注意局部注册的组件在其子组件中不可用如果想要在comA中使用comB,可这样声明组件const comA {components:{componentB:comB}}//或者使用es6中模块导入的方式import comB from ./comB.vueexport default {//在组件comA中components: {componentB:comB}}// 4.mount挂载 Vue 应用到Dom上app.mount(#box)//5.在另一个组件使用head-vuedivhead-vue/head-vue//可以将组件进行任意次数的复用,互不影响/div子组件和全局组件基本用法 script// 1.SPA架构// 2.父组件和子组件使用的是父组件被使用的是子组件父组件在使用子组件的时候父组件要声明子组件、引入子组件、使用组件对象// 3.子组件的使用// 1.创建一个子组件*.vue// 2.引入子组件到父组件script部分export default前面如引入一个footer组件 import footer from ./footer.vue// 3.export default{}中声明子组件components:{footervue:footer,headervue:header}// 4.父组件template中使用templatedivfootervue/footervue/div/template//4.全局组件的使用1.创建一个子组件*.vue2.在main.js文件中引入子组件import headervue from ./components/header.vue并使用vue.component(组件名,组件对象)声明为全局组件3.父组件template中使用templatedivfootervue/footervue/div/template//5.父组件传递值给子组件1.在父组件template中的子组件*** keyvalue/***加入keyvalue----传递参数或者*** v-bind:key变量名/***//2.在子组件export default 里的props里面加入参数的key如 props:[key,key1] -----接收父组件参数的设置//3.在子组件template中通过使用{{key}}的方式使用参数//注意在js中可以通过this.key的方式获取key并使用//6.vueBus的通信使用来实现子组件通信父组件1.创建一个sub.vue子组件文件并在main.js文件中引入子组件import sub from ./sub.vue并使用vue.component(sub,sub)使其成为全局子组件 或者 在components:{}中定义为局部子组件// 2.创建一个用来通信的连接器connector.js文件,此文件实际导出的是一个vue实例对象new Vue(),代码如//import Vue from vue;//var connector new Vue();//export default connector;// 3.分别在父组件和子组件引入connector.js连接器文件// 4.在父组件使用连接器connector.$on(事件名,function(mes){console.log(mes)})监听子组件的通讯// 5.在子组件使用connector.$emit(事件名,子组件发送的内容) 发送通讯唯一标识 子父一致//注意具体使用看Vuetest案例分析/scriptProvide\Inject父组件传递数据给子组件: 使用props从父组件向子组件传递数据时当子组件嵌套太深时要逐级传递数据会很麻烦此时使用Provide\Inject就方便多了具体使用如 //如在父组件fatherView中n层下面有一个子组件sonViewNz,此时子组件想要拿到父组件中的一个数据例如变量user中的值如下app.component(fatherView, {data() {arr: [1, 2, 3]},provide: { //provide用来在父组件中定义要传入子组件的数据数据通过键值对的方式传递给子组件user: jack,},provide() { //当要访问父组件属性值时上面的变量方法是行不通的要使用返回对象provide的函数的形式传递数据return {// fatherArrLenth: this.arr.length //:默认情况下传递的数据不是响应式的也就是说父组件中数据改变时传递的值不会改变想要改变就要使用Vue.computed方法处理数据如下fatherArrLenth: Vue.computed(() this.arr.length),}}})app.component(sonViewN, {data() {},inject: [user], //inject:在子组件中接收父组件中传入过来的数据后面接一个数组里面传入父组件中要传递数据的变量名created() { //钩子事件处理函数console.log(${this.user}); //通过this.变量名即可拿到数据}})使用keep-alive解决is性能问题 //利用is指令可以实现不同组件之间的切换但是有时候会保持这些组件的状态来避免反复渲染此时可以使用keep-alive如keep-aliveviewCom :is coms/viewCom/keep-alive异步组件 // 返回promise的工厂函数const app Vue.createApp({})const AsyncComp Vue.defineAsyncComponent(() new Promise((resolve, reject) {resolve({template: 异步})}))app.component(asyncComp, AsyncComp)//es6形式import {defineAsyncComponent} from vueconst AsyncComp defineAsyncComponent(() import (./components/AsyncComponent.vue))app.component(asyncComponent, AsyncComp) 生命周期钩子 Vue.createApp({data() {return { num: 1 }},created() {//created:当实例创建后执行处理函数生命周期钩子还有一些如 mounted、updated 和 unmountedconsole.log(this.num) // 1 this指向当前实例,通过this.变量可以拿到变量的值}})节流和防抖 vue没有内置的防抖和节流支持借用lodash可实现此功能如 script srchttps://unpkg.com/lodash4.17.20/lodash.min.js/scriptscriptVue.createApp({methods: {click: _.debounce(function() {//}, 300)}}).mount(#app)//注意此方式使可复用组件共享相同的防抖处理函数为彼此独立可将此添加到created钩子中/script获取DOM 1.前端框架就是为了减少DOM操作但是在特殊情况下也可以操作DOM的。2.操作DOM的步骤1.在需要操作的DOM元素上添加ref名称A2.在需要获取的地方加入this.$refs.名称A注意在子组件上获取DOM元素的方式为this.$refs.名称.$elmint-ui使用简介 // 1.mint-ui就是element-ui的移动端版本是饿了么团队开发的。// 2.使用步骤// 1.安装 npm install mint-ui -S// 2.引入vue : import Vue from vue // 3.1引入全部组件使用型 // 1.引入mint-ui : import Mint from mint-ui// 2.使用全部mint-ui Vue.use(Mint)// 3.2按需引入部分组件实用型// 1.引入部分组件 import {Cell,Checklist,...} from mint-ui// 2.使用部分mint-ui组件 Vue.component(Cell,name,Cell)过渡和动画 在vue中可以通过class和style自定义动画和过渡同时vue也提供了自己的动画及过渡。 !-- 1.transition namekey:控制元素或组件进入和离开时触发过渡,它有6个控制过渡效果的类名v-enter-from进入过渡开始状态、v-enter-active进入过渡生效状体、v-enter-to进入过渡结束状态、v-leave-from离开过渡开始状态、v-leave-active离开过渡生效状态、v-leave-to离开过渡结束状态这6个控制状态的class类在使用时需要注意transition上面应该有一个name属性其值为这6个类名的标识具体使用时将这6个类名中v替换为transition中name的属性值同时在transition中的元素被插入或删除时vue自动监听类的变化外还会监听钩子函数如下 --.fade-enter-from{}里面正常写CSS代码当p标签出现或消失时就会使用到这里6个类中对应状态的过渡效果transition namefadep v-ifshowhello/p/transitiontransition :duration1000.../transition!-- :duration毫秒值用来控制过渡或动画时间值也可以是一个对象{ enter: 500, leave: 800 }控制具体进入离开的时间 --transition before-enterbeforeEnter :cssfalsecssfalse用于跳过过渡检测提高性能/transition!-- 可在transition中声明钩子函数用函数控制具体的效果before-enter类似事件beforeEnter为事件处理函数名事件还有enter、after-enter、enter-cancelled、before-leave、leave、after-leave、leave-cancelled--transition modeout-in/transition!-- mode用于设置过渡模式其值有in-out新元素先过渡过渡完后当前元素在过渡、out-in顺序相反 --transition-group tagul/transition-group!-- 处理多个元素渲染列表等tag用于声明该组中transition-group类型如果里面元素为li等这里可设置为ul --watchers!-- 处理应用中不同状态的过渡 -- 提示本文图片等素材来源于网络若有侵权请发邮件至邮箱810665436qq.com联系笔者删除。 笔者苦海