正文

vue从入门到放弃(代码片段)

胡金水  胡金水  2022-12-11  317

关键词：

----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------
----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------
----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------

今日学习内容：

1、动态组件

2、异步组件

3、keep-alive缓存组件

4、全局组件

5、公共组件函数调用

动态组件

dynamicComponentDemo.vue

<template>
  <div>
    <h1>动态组件</h1>
    <!-- 写法一： -->
    <!-- <slotDemo/> -->
    <!-- 写法二： -->
    <component :is="slotDemo"/>
    <!-- 动态遍历多个组件 -->
    <div v-for="(item,index) in arr" :key="index">
        <component :is="item"/>
    </div>
  </div>
</template>
<script>
import slotDemo from './slotDemo.vue'
import nextTickDemo from './nextTickDemo.vue'
import provideAndInjectDemo from './provideAndInjectDemo.vue'
import slotDemo2 from './slotDemo2.vue'
export default 
  name: "",
  components: 
    slotDemo,
    nextTickDemo,
    provideAndInjectDemo,
    slotDemo2
  ,
  data: () => (
    slotDemo:'slotDemo',
    arr:[
      'nextTickDemo',
      'provideAndInjectDemo',
      'slotDemo2'
    ]
  )

</script>

App.vue

<template>
  <div id="app">
    <dynamicComponentDemo/>
  </div>
</template>

<script>
import dynamicComponentDemo from './components/advanceDemo/dynamicComponentDemo.vue'
export default 
  name: 'App',
  components: 
    dynamicComponentDemo
  

</script>

异步组件

asynComponentDemo.vue

<template>
  <div>
    <h1>异步组件</h1>
    <p>使用场景：1.加载大组件；2.需要后置性的组件</p>
    <p>作用：提升性能、提升用户体验</p>
    <slotDemo/>
  </div>
</template>
<script>
// import slotDemo from './slotDemo.vue'
export default 
  components: 
    // slotDemo
    // 异步组件写法一：
    // slotDemo:()=>
    //   return import('./slotDemo.vue')
    // 
    // 异步组件写法二：
    slotDemo:()=> import('./slotDemo.vue')
  

</script>

App.vue

<template>
  <div id="app">
    <asynComponentDemo/>
  </div>
</template>

<script>
import asynComponentDemo from './components/advanceDemo/asynComponentDemo.vue'
export default 
  name: 'App',
  components: 
    asynComponentDemo
  

</script>

keep-alive缓存组件

keepAlivedDemo.vue

<template>
  <div>
    <h1>keep-alive 标签</h1>
    <button type="button" @click="changeFun('a')">A</button>
    <button type="button" @click="changeFun('b')">B</button>
    <button type="button" @click="changeFun('c')">C</button>

    <keep-alive>
      <comA v-if="tap === 'a'"/>
      <comB v-if="tap === 'b'"/>
      <comC v-if="tap === 'c'"/>
    </keep-alive>

    <p>keep-alive使用场景：用于缓存组件、频繁切换，不需要重复渲染的情况，也是vue常用性能优化方案之一</p>
    <p>复杂的组件可以使用keep-alive，简单的可以使用v-show来提高性能</p>
  </div>
</template>
<script>
import comA from './comA.vue'
import comB from './comB.vue'
import comC from './comC.vue'
export default 
  name: "",
  components: 
    comA,
    comB,
    comC
  ,
  data: () => (
      tap:'a'
  ),
  methods: 
    changeFun(val) 
      this.tap = val
    
  

</script>

comA.vue(comB.vue和comC.vue跟comA一样)

<template>
  <div>
    组件A
  </div>
</template>
<script>
export default 
  mounted() 
    console.log('A mounted');
  ,
  activated()
    console.log('keepalive加载');
  ,
  deactivated()
    console.log('keepalive离开');
  ,
  destroyed() 
      console.log('A destroyed');
  

</script>

App.vue

<template>
  <div id="app">
    <keepAlivedDemo/>
  </div>
</template>

<script>
import keepAlivedDemo from './components/advanceDemo/keepAlivedDemo.vue'
export default 
  name: 'App',
  components: 
    keepAlivedDemo
  

</script>

全局组件

allComponentDemo.vue

<template>
  <div>
      <h1>全局注册组件</h1>
      <loading/>
  </div>
</template>
<script>
// 全局注册的组件，可以在项目任意地方使用，不需要注册和引入
export default 
  name: "",
  data: () => (

  )

</script>

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 全局自定义指令
Vue.directive('foc', // 自定义指令v-foc
  inserted:el=>
    el.focus() // 聚焦
  
);

// 全局注册组件
import Loading from './components/advanceDemo/loading.vue'
Vue.component('Loading',Loading) // 第一个参数是组件名；第二个参数是组件

new Vue(
  render: h => h(App),
).$mount('#app')

App.vue

<template>
  <div id="app">
    <allComponentDemo/>
  </div>
</template>

<script>
import allComponentDemo from './components/advanceDemo/allComponentDemo.vue'
export default 
  name: 'App',
  components: 
    allComponentDemo
  

</script>

公共组件函数调用

toastCom.vue

<template>
  <div class="wrap">
    <div>text</div>
    <div>temp</div>
  </div>
</template>
<script>
export default 
  // props 写法一：
  // props: 
  //   text:String
  // ,
  // props 写法二：
  props: 
    text:
      type:String,
      default()
        return ''
      
    
  ,
  // props 写法三：
  // props: ['text']
  data: () => (
      temp:'Hello World'
  )

</script>
<!-- scoped表示只在当前样式生效 -->
<style lang="scss" scoped>
.wrap
   color: #fff;
   background: :rgba(0,0,0,0.8);
   width: 200px;
   padding: 10px;
   position: fixed;
   left:50%;
   top:50%;
   margin-left: -100px;
   margin-top: -60px;
   border-radius: 10px;

</style>

App.vue

<template>
  <div id="app">
    <toastCom text="这是一个标题"/>
  </div>
</template>

<script>
import toastCom from './components/advanceDemo/toastCom.vue'
export default 
  name: 'App',
  components: 
    toastCom
  

</script>

toastCom.js

// 1.引入组件和vue
import Vue from 'vue'
import toastCom from './toastCom.vue'
// 利用vue.extend函数，传入vue组件，返回构造函数
const toastConstractor = Vue.extend(toastCom)
// 2.利用构造函数，创建一个实例
function toastFun()
  const toastEle = new toastConstractor( // 构造函数转成ele节点
    el: document.createElement('div'), // 创建一个div
    data()
      return 
        text:text
      
    
  )
  document.body.appendChild(toastEle.$el)


// 3.函数挂在原型上
function expToastFun()
  Vue.prototype.$toast = toastFun()
  // 把函数挂在全局vue实例上，这样任何地方都可以通过￥toast来调用


export default expToastFun

// Vue.prototype.$toast = toastFun()
// this.$toast 调用

main.js

import Vue from 'vue'
import App from './App.vue'
import toastJs from './components/advanceDemo/toastCom.js'

Vue.config.productionTip = false

// 全局自定义指令
Vue.directive('foc', // 自定义指令v-foc
  inserted:el=>
    el.focus() // 聚焦
  
);

// 全局注册组件
import Loading from './components/advanceDemo/loading.vue'
Vue.component('Loading',Loading) // 第一个参数是组件名；第二个参数是组件

// 全局extend注册组件，并函数调用
Vue.use(toastJs)

new Vue(
  render: h => h(App),
).$mount('#app')

toastTest.vue

<template>
  <div>
    <h1>测试toast函数调用</h1>
  </div>
</template>
<script>
export default 
  mounted()
    this.$toast('This is toast')
  

</script>

App.vue

<template>
  <div id="app">
    <toastTest/>
  </div>
</template>

<script>
import toastTest from './components/advanceDemo/toastTest.vue'
export default 
  name: 'App',
  components: 
    toastTest
  

</script>

vue从入门到放弃(代码片段)

vue2.0创建项目命令：(base)goldwater@hujinshuivue%cnpminstall-gvue-cli(base)goldwater@hujinshuivue%vueinitwebpackvue2.0-demo?Projectnamevue2.0-demo#项目名称?ProjectdescriptionAVue.jsproject#项目描述?Au 查看详情

vue从入门到放弃(代码片段)

vue——filter过滤器filterDemo.vue<template><div><h1>过滤器</h1>message|lower</div></template><script>exportdefaultdata()returnmessage:'HelloWorld',fi 查看详情

vue从入门到放弃(代码片段)

vue——filter过滤器filterDemo.vue<template><div><h1>过滤器</h1>message|lower</div></template><script>exportdefaultdata()returnmessage:'HelloWorld',filters:low 查看详情

vue从入门到放弃(代码片段)

插值表达式templateDemo.vue<template><div>HelloWorld!!!<h1>插值表达式</h1>msgnamesex=='1'?'男':'女'<h1>指令</h1><!--尽量少用，会解析内查看详情

vue从入门到放弃(代码片段)

vue——v-forforDemo.vue<template><div><p>遍历数组</p><ul><liv-for="(item,index)inlistArr":key="item.id">index-item.id-item.title</l 查看详情

vue从入门到放弃(代码片段)

插值表达式templateDemo.vue<template><div>HelloWorld!!!<h1>插值表达式</h1>msgnamesex=='1'?'男':'女'<h1>指令</h1><!--尽量少用，会解析内容，会导致查看详情

vue从入门到放弃(代码片段)

今日学习内容：1.vuex的介绍2.vuex的结构和组成3.vuex的安装命令4.vuex的state、getters、mutations、actions的使用5.modules模块化和命名空间的使用vuex的介绍**VueX是一个专门为Vue.js应用设计的状态管理架构，统一管理和维护各个vue组... 查看详情

vue从入门到放弃(代码片段)

vue-cli从入门到放弃(代码片段)

一:vue是单文件组件导:之前注册组件有什么缺点?1-?缺乏语法高亮2-格式不好整体3-没有专门的写css代码等等参考:vue=>工具=>单文件组件什么是单文件组件?后缀为.vue的文件单文件组件的三个组成部分(代码块:scaffold自动提示)templ... 查看详情

vue从入门到放弃(代码片段)

vue介绍Vue(读音/vjuː/，类似于view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整... 查看详情

初识pytorch：从安装到入门，从入门到放弃(代码片段)

目录PyTorch安装配置安装验证PyTorchPyTorch是Facebook团队于2017年1月发布的一个深度学习框架，虽然晚于TensorFlow，也没有TensorFlow火，但目前已经与TensorFlow奇虎相当。而且PyTorch采用了Python语言的接口，可以说它才是Pytho... 查看详情

深度学习---从入门到放弃pytorch基础(代码片段)

深度学习—从入门到放弃(一)pytorchTensor类似于numpy的array，pandas的dataframe；在pytorch里的数据结构是tensor，即张量tensor简单操作1.Flattenandreshape###Originalz:tensor([[0,1],[2,3],[4,5],[6,7],[8,9],[10,11]])Flatte 查看详情

clickhouse从入门到放弃(代码片段)

最近公司需要使用clickhouse做数据分析，我赶紧从docker上下载一个，学习学习。学习成本不大，会mysql就行。clickhouse下载分区基本使用下载下载clickhouse包dockerpullyandex/clickhouse-clientdockerpullyandex/clickhouse-server启动clickhouse-... 查看详情

clickhouse从入门到放弃(代码片段)

django从入门到放弃(代码片段)

目录基于socket手写web框架基于wsgiref定义自己的web框架数据库取数据，渲染页面三大主流框架分析http协议分析Django下载，创建项目基于socket手写web框架py文件importsocketdefserver_run():soc=socket.socket()soc.bind((‘127.0.0.1‘,8008))soc.listen... 查看详情

go语言从入门到放弃(代码片段)

HelloWorld我们先看看一个最简单的HelloWorld代码1packagemain23import"fmt"45funcmain()6fmt.Println("Hello,World!")7这段代码可以在控制台输出"Hello,World!"下面让我们来刨析一下此段代码第一行的packagemain 定义了该程序的包名为main,main的功能同其... 查看详情

docker从入门到放弃(代码片段)

...机时候用到的docker，时间长了也忘了，准备好好梳理学习入门一波。《十分感谢大神的文章，本文基于大神的文章学习整理。》一、入门基础??Docker使查看详情

正文

vue从入门到放弃(代码片段)

动态组件

dynamicComponentDemo.vue

App.vue

异步组件

asynComponentDemo.vue

App.vue

keep-alive缓存组件

keepAlivedDemo.vue

comA.vue(comB.vue和comC.vue跟comA一样)

App.vue

全局组件

allComponentDemo.vue

main.js

App.vue

公共组件函数调用

toastCom.vue

App.vue

toastCom.js

main.js

toastTest.vue

App.vue

更多文章

vue从入门到放弃(代码片段)

vue从入门到放弃(代码片段)

vue从入门到放弃(代码片段)

vue从入门到放弃(代码片段)

vue从入门到放弃(代码片段)

vue从入门到放弃(代码片段)

vue从入门到放弃(代码片段)

vue从入门到放弃(代码片段)

vue从入门到放弃(代码片段)

vue-cli从入门到放弃(代码片段)

vue从入门到放弃(代码片段)

初识pytorch：从安装到入门，从入门到放弃(代码片段)

深度学习---从入门到放弃pytorch基础(代码片段)

clickhouse从入门到放弃(代码片段)

clickhouse从入门到放弃(代码片段)

django从入门到放弃(代码片段)

go语言从入门到放弃(代码片段)

docker从入门到放弃(代码片段)