vue2 几种初始化 挂载方式
vue2 几种初始化 挂载方式
常见的new Vue 传入el和render的方式 【在cli创建出的项目中】
el
类型：
string | Element限制：只在用
new创建实例时生效。详细：
提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。
在实例挂载之后，元素可以用
vm.$el访问。如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用
vm.$mount()手动开启编译。提供的元素只能作为挂载点。不同于 Vue 1.x，所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载 root 实例到
<html>或者<body>上。如果
render函数和templateproperty 都不存在，挂载 DOM 元素的 HTML 会被提取出来用作模板，此时，必须使用 Runtime + Compiler 构建的 Vue 库。
// main.js
import Vue from 'vue'
import App from './App'new Vue({el: '#app',store,router,// 字符串模板的代替方案render: h => h(App)
})
new Vue 传入render手动挂载$mount方式 【在cli创建出的项目中】
// main.js
import Vue from 'vue'
import App from './App.vue'new Vue({router,store,render: h => h(App)// 这里的$mount 提供了一个挂载节点，所以不用再手动插入某个节点中// (会替换 #app)
}).$mount('#app')
ProgressBar 这种手动挂载($mount()) 方式 手动挂载需要自己插入body 【在cli创建出的项目中】
import ProgressBar from '~/components/progress-bar.vue'/**
这里经过webpack的编译后，得到一个对象 对象中含有methods,data等方法
需要做的就是new 出实例，等待挂载
*/
// 得到一个对象 {methods: {…}, staticRenderFns: Array(0), _compiled: true, data: ƒ, render: ƒ, …}
console.log(ProgressBar)
// 得到一个vue实例 Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
console.log(new Vue(ProgressBar))// 全局进度条
// 手动挂载 这里的$mount 没有提供一个挂载节点，所以需要手动插入某个节点中
const bar = Vue.prototype.$bar = new Vue(ProgressBar).$mount()
// // 在文档之外渲染并且随后挂载
// 把挂载的el插入到body
document.body.appendChild(bar.$el)
通过extends扩展另一个组件 【在cli创建出的项目中】
const baseDom = new Vue({// body 每次都应该是一个真实divel: body,extends: chartFunc,// 能传入一些data，以此data为准data () {return {value: defaultValue,frontDict: props.data[0],timer: '',props: props,isPositve: true,isSelected: 'china',selectedYear: '2017',// 瓜达尔港图表selectedCountry: '巴基斯坦'}},props: {}})
根据页面上一个节点 传入 el 【html】
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue的基本代码</title></head><body><div id="oneDiv"><p>{{ msg }}</p></div><script src="lib/vue-2.4.0.js"></script><script>var vue = new Vue({// 表示当前我们的new 的这个 vue 实例，要控制页面上的那个区域el: '#oneDiv',// data 属性中，存放的是el中要用到的数据data: {// 通过 Vue 的指令，可以哼方便的就把数据渲染到页面上// 程序员不在手动操作DOMmsg: '欢迎学习vue'}})</script></body></html>
vue2 几种初始化 挂载方式相关推荐
- java二维数组两种初始化方法
写这篇博客的原因是因为从大一学习c语言开始 就对二维数组的声明 和初始化 一直没有搞懂....直到学到了Java依旧搞得不是很清楚. 先看一道Java的基础题 这道题 错误的选项 是 B. 二维数组的 ...
- Nginx入门之两种handler函数的挂载方式
请在文章页面明显位置给出原文连接,否则保留追究法律责任的权利. 接着上次的文章,今天研究<深入理解Nginx模块开发与架构解析>一书中给出的mytest的例子,发现和 /tengine.t ...
- Java面试题：final修饰的对象，有几种初始化方式
final修饰的对象初始化时分两种情况: 第一种:修饰成员对象时有3种初始化方式: 1,在定义变量时直接赋值 2,声明完变量后在构造方法中为其赋值 3,声明完变量后在构造代码块中为其赋值 第二种:修饰 ...
- 初始化一个java空数组_Java 数组的两种初始化方式
一.数组 1.数组中存储元素的类型是统一的,每一个元素在内存中所占用的空间大小是相同的,知道数组的首元素的内存地址,要查找的元素只要知道下标,就可以快速的计算出偏移量,通过首元素内存地址加上偏移量,就 ...
- java数组初始化的方式,java中初始化数组的方式有几种
java中初始化数组的方式有几种 发布时间:2020-06-01 16:12:45 来源:亿速云 阅读:153 作者:鸽子 三种初始化方式: 1.静态初始化:创建+赋值 2.动态初始化:先创建再赋值 ...
- ios首次加载web_IOS_IOS中UIWebView的使用详解，一、初始化与三种加载方式
UI - phpStudy...
IOS中UIWebView的使用详解 一.初始化与三种加载方式 UIWebView继承与UIView,因此,其初始化方法和一般的view一样,通过alloc和init进行初始化,其加载数据的方式有三种 ...
- 论vue3.0和vue2.0区别之编程方式及例子详解
系列文章目录 第一章 论vue3.0和vue2.0区别之编程方式及例子详解 第二章 同一台电脑 实现 vue-cli2和vue-cli3同时并存 及 常见命令 第三章 vue3.0项目实战 - Ele ...
- 嵌入式的几种固件烧录方式
嵌入式的几种固件烧录方式 1. 名词说明 1.1 什么是固件 固件,也成为firmware.下面引用百度的定义: 固件(firmware)一般存储于设备中的电可擦除只读存储器EEPROM(Electr ...
- Jenkins的四种安装部署方式以及Jenkins的基本配置与基本使用
Jenkins的四种安装部署方式以及Jenkins的基本配置与基本使用 安装Jenkins 1.yum安装Jenkins 下载与安装 修改配置 修改默认端口 2.基于War包的形式部署Jenkins ...
最新文章
- java和C#面向对象的区别
- 河南城建学院计算机分数,河南城建学院录取分数线2021是多少分(附历年录取分数线)...
- 深度学习100+经典模型TensorFlow与Pytorch代码实现大合集
- linux命令行安装使用KVM
- 怎样做到真实再现传统文化艺术？
- 通用shellcode代码
- android pick file,LFilePicker---文件选择利器，各种样式有它就够了
- 【填坑中】学生信息管理系统
- Unity3D学习笔记（二十五）：文件操作
- BestCoder4 1002 Miaomiao's Geometry (hdu 4932) 解题报告
- Codeforces Round #655 (Div. 2) B C
- php中一个字符占用几个字节？
- JavaScript之JSON详解
- 3dmax如何使阴天灯光设置更加自然
- html 图片上面显示文字,Html 让文字显示在图片的上面
- 百度霸屏什么意思？如何实现百度霸屏！
- 【分层实验框架】阿里妈妈大规模在线分层实验实践
- 继电保护matlab程序,自适应微机继电保护的matlab仿真实现 程序与算法
- 「新世相」都写过什么题材？如何通过数据挖掘写作题材
- 排除计算机硬件故障,如何快速准确地排除电脑硬件故障