Vue高级实战

已于 2023-03-29 14:48:29 修改
阅读量1.2k 收藏 2
点赞数 2
分类专栏： Web基础 文章标签： vue.js npm javascript
于 2022-06-15 00:19:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44796239/article/details/125284422
版权

Vue高级实战

1 Vue-cli

1.1 什么是Vue-cli

Vue cli是基于Vue的应用开发提供的一个标准的脚手架工具.为应用搭建基础的框架结构,提供插件、开发服务、Preset、构建打包功能
Vue cli 背后集成了现代化开发的诸多功能,通过简单的命令就可以完成 "零配置"的项目环境搭建

1.2 安装Vue-cli步骤

在安装vue-cli前，要确认自己的电脑是否安装了nodejs和npm.

1.2.1 安装Node.js

安装了node.js才有使用npm ，才能安装vue-cli

1.2.1.1 什么是node.js

简单的说 Node.js 就是运行在服务端的 JavaScript。

Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台。

Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境，基于 Google 的 V8 引擎，V8 引擎执行 Javascript 的速度非常快，性能非常好。

1.2.1.2 安装node.js

  1. 下载对应你系统的Node.js版本:

    http://nodejs.cn/download/

    我们统一安装: node-v14.19.1-x64.msi
    在这里插入图片描述

  2. 选安装目录进行安装, 我选择安装在了D盘: D:\Develop\nodejs

  3. 测试: 在命令提示符下输入命令

    node -v //会显示当前node的版本

    在这里插入图片描述

1.2.2 安装NPM

npm全称Node Package Manager，他是node包管理和分发的工具，使用NPM可以对应用的依赖进行管理，NPM 的功能和服务端项目构建工具maven的依赖管理功能差不多，我们通过npm 可以很方便的下载js库，打包js文件。

1.2.2.1 自动安装NPM

node.js已经集成了npm工具
在命令提示符输入 npm -v 可查看当前npm版本

在这里插入图片描述

1.2.2.2 查看包管理路径

包路径就是npm从远程下载的js包所存放的路径。 使用 npm config ls 查询NPM管理包路径（NPM
下载的依赖包所存放的路径），默认在C盘。

npm config ls
1.2.2.3 设置包管理路径

依赖包放在C盘不太合适,为了方便对依赖包管理, 我们将管理包的路径设置在单独的地方:

  1. 我们选择一个路径,专门存放这些依赖包.我选择创建一个目录: D:\Develop\nodejs_package
  2. 在D:\Develop\nodejs_package 下再创建 npm_modules 文件夹 和 npm_cache 文件夹:
    在这里插入图片描述
  3. 执行下边的命令,设置为自定义的包管理路径：
    npm config set prefix "D:\Develop\nodejs_package\npm_modules" 
npm config set cache "D:\Develop\nodejs_package\npm_cache"
  4. 此时再使用 npm config ls 查询NPM管理包路径发现路径已更改
    在这里插入图片描述
1.2.2.4 NPM环境变量配置

  1. 查看npm的全局路径是什么

    npm config get prefix

    在这里插入图片描述

  2. 配置PATH环境变量
    添加新的系统变量: key=NODE_HOME , value= D:\Develop\nodejs_package
    path中添加 %NODE_HOME%\npm_modules
    在这里插入图片描述

    在这里插入图片描述

1.2.2.5 安装cnpm

npm默认会去国外的镜像去下载js包，在开发中通常我们使用国内镜像，这里我们使用淘宝镜像
npm设置国内淘宝镜像

npm config set registry=https://registry.npm.taobao.org

下面我们来安装cnpm：
有时我们使用npm下载资源会很慢，所以我们可以安装一个cnmp(淘宝镜像)来加快下载速度。

  1. 联网情况下, 输入命令，进行全局安装淘宝镜像:
    //安装 
npm install -g cnpm --registry=https://registry.npm.taobao.org 
//查看cnpm的版本 
cnpm -v
    在这里插入图片描述
    在这里插入图片描述

1.2.3 安装vue-cli

目前主流版本是 2.x 和 3.x 版本,安装3.x 以上的版本是因为该版本既可以创建2.x项目与3.x 项目
注意: 以管理员身份打开命令行

  1. 安装命令
    npm install -g @vue/cli
    在这里插入图片描述
  2. 输入 vue命令
    在这里插入图片描述
  3. 输入 vue -V 查看版本
    在这里插入图片描述

1.3 快速构建Vue项目

1.3.1 步骤说明

我们使用vue-cli 快速构建项目,步骤如下:

  1. 桌面创建一个空的文件夹
    在这里插入图片描述

  2. 以管理员身份运行cmd , 进入到vueTest文件夹
    在这里插入图片描述

  3. 执行下面的命令

    基于交互式命令方式,创建项目 
//文件名 不支持驼峰（含大写字母）使用短横线方式 
vue create my-project

    在这里插入图片描述

  4. 选择自定义安装,点击回车

    在这里插入图片描述

  5. 在这列表中,选择我们要安装的组件,使用空格键选择,选好后回车

    在这里插入图片描述

  6. 按回车之后,提示选择什么模式的路由,我们输入 n (表示选择hash模式)
    在这里插入图片描述

  7. 选择项目配置文件单独存放
    在这里插入图片描述

  8. 是否保存模板,选择n 不创建
    在这里插入图片描述

  9. 安装完成,提示输入执行下面这两个命令

    cd my-project
npm run serve

    在这里插入图片描述

  10. 首先进入项目目录

    cd my-project

    在这里插入图片描述

  11. 启动项目
    在这里插入图片描述
    在这里插入图片描述

  12. 访问项目: http://localhost:8080/

    在这里插入图片描述

  13. 停止项目 只要关闭命令行窗口就可以

1.3.2 导入Vue项目到VSCode

  1. VSCode中右键选择打开文件夹

  2. 选择桌面上的项目

  3. 打开项目,可以看到如下项目结构

    在这里插入图片描述

1.3.3 项目结构介绍

|--- my-project 项目名称
	|--- node_modules 存放依赖包的目录 
	|--- public 静态资源管理目录 
	|--- src 组件源码目录(我们写的代码) 
		|--- assets 存放静态图片资源(CSS也可以放在这里) 
		|--- components 存放各种组件(一个页面可以看做一个组件)，各个组件联系在一起组成一个 完整的项目
		|--- router 存放了项目路由文件 
		|--- views 放置的为公共组件(主要还是各个主要页面)
		|--- App.vue app.vue可以当做是网站首页，是一个vue项目的主组件，页面入口文件 
		|--- main.js 打包运行的入口文件，引入了vue模块和app.vue组件以及路由route 
	|--- babel.config.js babel配置文件, 对源代码进行转码(把es6=>es5) 
	|--- jsconfig.json vscode配置了jsconfig.json就能提示文件路劲，提升开发效率
	|--- paxkage-lock.json 依赖配置文件 
	|--- package.json 项目及工具的依赖配置文件
	|--- README.md 项目说明
	|---vue.config.js  是以一个可选的配置文件，如果项目中的根目录 (和 package.json 同级的) 中存在这个文件，那么它会被 @vue/cli-service 自动加载。

1.3.4 Vue脚手架自定义配置

1.3.4.1 package.json 介绍

每个项目的根目录下面，一般都有一个 package.json 文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。 npm install 命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。

{
  //1.项目基本信息
  "name": "my-project",
  "version": "0.1.0",
  "private": true,

  //2.指定运行脚本命令
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  //3.生产环境所依赖模块的版本
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1"
  },
  //4.本地环境开发所依赖的版本
  "devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "vue-template-compiler": "^2.6.14"
  }
}
1.3.4.2 通过package.json 配置项目

配置内容采用JSON格式,所有的内容都用双引号包裹
打开package.json,再最末端添加如下配置:

"vue":{ 
	"devServer":{ 
		"port":"8888", 
		"open":true 
	} 
}

配置说明: 该配置设置打包时服务器相关的信息

  • port : 访问端口
  • open true: 打包完成自动打开浏览器

启动项目

  1. 在VSCode顶栏中选择 终端 - 新建终端
    **加粗样式**

  2. 输入命令

    npm rum serve

  3. 运行后发现端口号改为 8888,并且在打包完成后自动打开浏览器

    注意: 不推荐这种方式,因为package.json 主要是用来管理包的配置信息.为了方便维护,
    我们将Vue脚手架相关的配置单独定义到 vue.config.js 配置文件中

1.3.4.3 单独的配置文件配置项目
  1. 在项目的根目录创建文件 vue.config.js
  2. 删除掉package中新添加的配置项.
  3. 在vue.config.js 文件中进行相关配置
    module.exports = { 
  devServer:{ 
    host: 'localhost',
    open:true ,
    port:8889 
  } 
}

1.3.5 Vue 组件化开发

1.3.5.1 组件化开发

组件化是Vue的精髓，Vue项目就是由一个一个的组件构成的。 我们主要的工作就是开发的组件.

1.3.5.2 组件介绍
  1. 我们用 vue-cli 脚手架搭建的项目，里面有很多，如 index.vue 或者 App.vue 这一类的文件.
    每一个*.vue 文件都是一个组件 ，是一个自定义的文件类型, 比如 App.vue 就是整个项目的根组件。
  2. 常见的组件：
    • 页面级别的组件
      页面级别的组件，通常是 views 目录下的.vue组件，是组成整个项目的各个主要页面
    • 业务上可复用的基础组件
      这一类组件通常是在业务中被各个页面复用的组件，这一类组件通常都写到 components 目录下，然后通过import在各个页面中使用
  3. 组件的组成部分
    template : 组件的HTML部分
    script: 组件的JS脚本 (使用ES6语法编写)
    style: 组件的CSS样式
<!-- 1.template 代表html结构, template中的内容必须有且只有一个根元素 编写页面静态部分 就是 view部分 --> 
<template> 
	<div>测试页面... </div> 
</template> 
<!-- 2.编写vue.js代码 --> 
<script> 
	//可以导入其组件 
	// import Header from '../components/header.vue' 
	//默认写法, 输出该组件 
	export default { 
		name:"Home", // 组件名称，用于以后路由跳转 
		data() {
			// 当前组件中需要使用的数据 
			return {} 
		}, 
		methods: {} 
	} 
</script> 
<!-- 编写当前组件的样式代码 --> 
<style scoped> 
	/* 页面样式 加上scoped 表示样式就只在当前组件有效*/ 
</style>

1.4 项目运行流程

1.4.1 main.js

项目运行 会加载入口文件 main.js

/*
html文件中，通过script src = 'xxx'标签引入js文件。 
而vue中，通过 import 变量名 from 文件路径 的方式导入文件，不光可以导入js文件。 
	1.变量名: 指的是为导入的文件起一个名称，不是指导入的文件的名称，相当于变量名。 
	2.文件路径: 指的是文件的相对路径
*/
import Vue from 'vue'
import App from './App.vue'
import router from './router'

//关闭启动提示
Vue.config.productionTip = false

//创建Vue实例
new Vue({
  router,  //为整个项目添加路由
  render: h => h(App)  //这是一个函数ES6语法,作用是生成模板: App = App.vue
}).$mount('#app') //挂载的是App.vue组件中的id为app的区域

1.4.2 App.vue

App.vue 是vue项目的主组件，是页面入口文件 ，所有页面都是在App.vue下进行切换的

<!--App.vue 中的模板(HTML代码)-->
<template>
  <div id="app">
    <nav>
      <!--这里是两个路由导航链接 1. to="/" 项目根路径 跳转的是首页-->
      <router-link to="/">Home</router-link> 
      <!--2. to="/about" 点击About按钮,跳转到about组件-->
      <router-link to="/about">About</router-link>
    </nav>
    <!--router-view 的作用是 根据访问的路径,渲染路径匹配到的视图组件-->
    <router-view/>
  </div>
</template>

1.4.3 router 路由

找到路由文件,来看一下具体的路由配置

// 引入所需文件
import Vue from 'vue'  //vue库
import VueRouter from 'vue-router'  //vue-router库
import HomeView from '../views/HomeView.vue'  //首页

//使用路由功能
Vue.use(VueRouter)

//创建路由规则
const routes = [
 {
   path: '/', //路径
   name: 'home', //名称
   component: HomeView  //组件 HomeView.vue
 },
 {
   path: '/about',
   name: 'about',
   // route level code-splitting
   // this generates a separate chunk (about.[hash].js) for this route
   // which is lazy-loaded when the route is visited.
   component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
 }
]

//创建路由管理器,管理routes
const router = new VueRouter({
 routes
})

//export 用来导出模块 router就代表了整个路由文件
export default router

1.4.4 Home.vue组件

默认访问的是HomeView.vue 首页
在这里插入图片描述

// 视图部分
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

// JS部分
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  }
}
</script>

HelloWorld.vue 组件页面

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

1.5 组件的使用案例

1.5.1 创建Header.vue组件

  1. 在components 目录下创建 Header.vue
    在这里插入图片描述
  2. 编写Header.vue
    <template> 
    <div class="header">{{ msg }}</div> 
</template>

<script> 
//JS 部分 
export default { 
    name:"Header", //组件的名称 
    data() {  //data函数 
        return { 
            msg:"这是一个Header组件" 
        }
    }, 
}
</script>

//scoped 表示当前的样式,只作用与当前组件中的 template 视图. 
<style scoped>
    .header { 
        height: 100px; 
        line-height: 100px; 
        background-color: #eee;
        text-align: center; 
        color: blue; 
    }
</style>

1.5.2 引入 Header组件

修改Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <Header></Header>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import Header from '@/components/Header.vue'

export default {
  name: 'HomeView',
  components: {
    // HelloWorld
    Header
  }
}
</script>

1.5.3 组件的传参

props : 是组件中的属性, 表示组件可以接受参数
Header.vue

<template> 
    <div class="header">{{ msg }}</div> 
</template>

<script> 
//JS 部分 
export default { 
    name:"Header", //组件的名称 
    // data() {  //data函数 
    //     return { 
    //         msg:"这是一个Header组件" 
    //     }
    // }
    //参数传递 --- 需要传递的参数
    props:['msg']
}
</script>

//scoped 表示当前的样式,只作用与当前组件中的 template 视图. 
<style scoped>
    .header { 
        height: 100px; 
        line-height: 100px; 
        background-color: #eee;
        text-align: center; 
        color: blue; 
    }
</style>

HomeView.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <!--给参数赋值-->
    <Header msg="这是通过props属性进行赋值显示出来的"></Header>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import Header from '@/components/Header.vue'

export default {
  name: 'HomeView',
  components: {
    // HelloWorld
    Header
  }
}
</script>
添砖#Java
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
Vue项目实战
weixin_49455560的博客
12-04 9849
Vue项目实战开发 1.电商业务概述 客户使用的业务服务：PC端，小程序，移动web，移动app 管理员使用的业务服务：PC后台管理端。 PC后台管理端的功能：管理用户账号（登录，退出，用户管理，权限管理），商品管理（商品分类，分类参数，商品信息，订单），数据统计 电商后台管理系统采用前后端分离的开发模式 前端项目是基于Vue的SPA（单页应用程序）项目 前端技术栈:Vue,Vue-Router,Element-UI,Axios,Echarts 后端技术栈：Node.js,Express,Jwt(模拟ses
Vue2项目实战
C_jiayouya的博客
12-26 1067
本文仅仅简单介绍了项目的大概框架，一些简单的页面展示及简单的组件封装，在想成为高级开发的路上还是需要不断努力地！愿每个人都能在自己热衷的道路上越走越远。
今天，学会这几个Vue高级实战技巧就够了!
主要领域：前端开发
07-14 2022
前言 今天，我们来分享几个不可不知的vue高级实战技巧。 技巧 自动注册组件 我们平时可能这样引入注册组件。每次都得需要在头部引入，然后注册，最后在模板上使用。 <template> <div id="app"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </template> <script> import HelloWorld from './com
实战Vue：基于Vue的移动端购物商城
2401_85124130的博客
06-25 294
首先在mutations.js中定义将商品移出购物车的方法——即商品数量为1仍然减得操作在Cart.vue中配置删除商品的方法。
vue高级实战技巧-如何优化项目
Shirley_Song_1的博客
06-18 291
vue高级实战技巧-如何优化项目 一、路由的模块化与统一加载 1. 如何自动加载 require.context：批量require文件 （1）以业务为模块创建相应的模块目录： mode1-------------------------模块文件夹 |--pages----------------------模版文件夹 |---- model1.index.vue--------模版文件 |---- model1.second.vue-------模版文件 |--index.routes.js-------
Java：58-Vue高级实战
qq_59609098的博客
04-09 1319
/node -v //会显示当前node的版本//npm config set prefix "H:\software\nodejs_package\npm_modules" 全局位置设置 //npm config set cache "H:\software\nodejs_package\npm_cache" 缓存位置设置--|--- my-project 项目名称|--- node_modules 存放依赖包的目录|--- public 静态资源管理目录。
Vue3项目实战
qq_44930306的博客
08-24 1183
这章分享一下vue3语法在项目中的具体应用。
如何优雅的使用vue？不可不知的vue高级实战技巧
SweetAnnVII小宝贝的空间
11-11 586
解决繁琐import 结构清晰整洁，可读性高。便于维护。 全局注册组件 //将高频组件放在同一个目录下，在该目录下增加一个global.js文件，在main.js中引入 //global.js import Vue from 'vue' //获取指定目录下的指定格式的文件 let requireComps = require.context('./', false, /\.vue$/); //循...
Vue开发 高级学习教程
天马3798
03-04 2019
10.Vue 开发实战常遇到的问题整理（二）9.Vue 开发实战常遇到的问题整理（一）3.Vue 组合式函数、自定义指令。一、Vue开发 高级学习教程。4.Vue 组件之间传值、事件。6.Vue 内置组件和使用。7.Vue 单文件组件模式。1.Vue 组件详解。2.Vue 组件插槽。5.Vue 异步组件。8.Vue 动画技巧。
《Vue.js实战》
qq_43364241的博客
12-02 1220
Vue.js实战基础篇 Vue 实例与数据绑定 el用于指定一个页面中已存在DOM 元素来挂载 Vue 实例，它可以是 HTMLElement ，也可以是 css 选择器 。例：el: docur1’ent.getElementByld ( ’ app ’) 或者是 ’＃ app ’ Vue 常用的生命周期钩子 • created 实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载， $el 还不可用。 需要初始化处理一些数据时会比较有用，后面章节将有介绍． • mounted el
VUE实战项目开发_高级
06-21
本项目是集vue2.6+vuex+vue- router+Element Ul+ES6+webpack+axios+...本项目以实战项目为切入点，模拟公司Vue项目研发流程，从头到尾讲解项目功能实现和优化、打包上线流程等，帮助提高你的技术层级，突破技术瓶颈。
vue项目实战.zip
11-24
在“2019vue三套实战视频.txt”和“vue视频2019vue实战视频.txt”这两个文件中，可能详细列出了三套不同类型的Vue项目实战课程，这些课程可能涵盖了从基础到高级的Vue应用构建技巧，包括组件化开发、状态管理Vuex、...
vue前端开发实战PPT
01-25
Vue前端开发实战PPT系列涵盖了从基础到高级的Vue开发技能，旨在帮助开发者提升项目实战能力。 首先，从标题和描述我们可以看出，这个系列主要关注Vue的实际应用，通过一系列的PPT教程来教授开发人员如何有效地使用...
vue 实战项目demo
11-16
在这个"vue移动端实战app分享"项目中，我们将学习如何使用Vue 2.6和Vuerouter构建一个移动Web应用。这个项目被称为"vue-music-webapp"，显然是一款音乐相关的Web应用程序，可能包括播放音乐、搜索歌曲、创建歌单等...
Vue2.x开发实战
05-11
本实战指南将带你深入探索Vue2.x的精髓，从基础到高级，逐步构建起全面的Vue开发技能。 一、Vue2.x基础 1. 安装与设置：Vue可以通过CDN链接、npm或yarn进行安装，创建项目时推荐使用官方提供的CLI（命令行工具），...
Vue系列面试题
qq_44186810的博客
07-23 1247
Vue2中采用Object.defineProperty来实现数据响应式，Object.definePropery虽然可以监听到数组的变化，但是由于在性能和体验的性价比上考虑，Vue2放弃了这个特性。1）v-for优先于v-if被解析，从源码中发现，先处理静态节点，在处理once，在处理for，在处理if，代码显示for的优先级比if高，断点调试也证实for优先于if。v-if：是惰性渲染机制，在属性初始为false时，组件就不会被渲染，直到条件为true，并且切换条件时会触发销毁/挂载组件。
Vue详解
最新发布
敲厉害的燕宝的博客
08-03 555
Vue 是一套用于构建用户界面的渐进式 JavaScript 框架。
运行中动态加载远程vue文件，解析template、script、style并注册全局组件：
qq_42152032的博客
08-03 248
(1).通过http请求获取组件数据，然后使用http-vue-loader插件解析script(解析为各生命周期钩子函数和methods对象),然后动态注册为vueComponent使用。 通过:is 来动态切换组件。 必须使用全量vue库，因为需要Vue来解析。 因为template已由vue2-sfc-loader解析了，可不用全量vue库。),然后动态注册为vueComponent使用。通过:is 来动态切换组件。(1).通过http请求获取组件数据，然后。后再注册为VueComponent。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

添砖#Java

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值