深入理解Vue的组建注册之new Vue({}).$mount(‘#app‘)

最新推荐文章于 2024-08-27 21:11:38 发布

is me monday

最新推荐文章于 2024-08-27 21:11:38 发布

阅读量5.7k

点赞数 2

分类专栏： vue的学习之路

本文链接：https://blog.csdn.net/qq_44742816/article/details/109001316

版权

vue的学习之路专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.先看一段官方Vue组件实例，再逐步加以分析

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <div>
    <h1>Hello App!</h1>
  </div>
</div>


<script>
//1注册一个Vue组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
//2创建一个Vue实例
new Vue({
	//3.将Vue实例挂载到id为‘app’的dom元素上
  el:'#app'
})
</script>

1注册一个Vue组件

1.1什么是组件？，注册组件是什么意思？

	官方文档说明：组件是可以复用的Vue实例;--我觉得更准确的应该是：组件是Vue相关类
	
	注册组件类比注册京东会员-把手机号（组件）绑定到京东上（Vue相关类）
		什么是组件？--组件是Vue相关类
		什么是Vue相关类？
			--Vue父类和它的子类如：const sonVue=Vue.extend({
			data:function(){return {}},
			template:'<div id="hello"/>'})

	那最后注册组件岂不是变成了：把手机号（Vue相关类）绑定到京东上（Vue相关类），我觉得这样理解是对的接着下面分析

1.2注册组件的几种方式
	Vue.extend({})--获取一个Vue的子类（相关类）
	Vue.component('别名'，相关类)----将相关类注册给Vue这个具体类

	官方原文：https://cn.vuejs.org/v2/api/#Vue-component
// 注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))

// 注册组件，传入一个选项对象 (自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })

// 获取注册的组件 (始终返回构造器)
var MyComponent = Vue.component('my-component')

1.3创建模板的几种方式

//1.直接在js中写template
const myVue=Vue.extend({
  data:function(){
    return{
      count:0
    }
  },
  template:'<div id="myVue"><my-vue2/><button @click="count++"> you clicked me {{count}} times.</button></div>'
})
//2.使用<script type="text/x-template"形式
<script type="text/x-template" id="count">
	<button @click="count++"> you clicked me {{count}} times.</button>
</script>
<script>
const myVue=Vue.extend({
  data:function(){
    return{
      count:0
    }
  },
  template:'#count'
</script>
//3.利用reder函数
const myVue=Vue.extend({
    render:function(createElement){
      return createElement(
        'h'+this.level,//标签名
          this.$slots.default//数据内容
      )
    },
    props:{
      level:{
        type:Number,
        required:true
      }
    }
  })

2.1创建一个Vue实例

new Vue()--代码看起来简单其实很难理解

1.创建的时候检测是否有挂在点：如果没有啥都不干
2.有了挂在点之后，检测当前Vue中是否有template属性：
		如果有就直接将template中的内容替换掉挂载点的内容
		如果没有，测将挂在点的Dom元素添加进内置template中（将挂载点作为自己的template内容）
例1：
<div id="app">
  <div>
    <h1>Hello App!</h1>
  </div>
</div>
new Vue({
  el:'#app',
  template:"<div id='tihuan'/>"
})

页面解析的dom元素：
	<body>
		<div id='tihuan'/>
	</body>
例2：
<div id="app">
  <div>
    <h1>Hello App!</h1>
  </div>
</div>
new Vue({
  el:'#app'
})

页面解析的dom元素：
	<body>
		<div id="app">
  			<div>
    			<h1>Hello App!</h1>
  			</div>
		</div>
	</body>

2.2创建一个Vue相关类的实例

//得到一个Vue子类myVue
const myVue=Vue.extend({
  data:function(){
    return{
      count:0
    }
  },
  template:'<div id="myVue"><my-vue2/><button @click="count++"> you clicked me {{count}} times.</button></div>'
})
//得到一个Vue子类myVue2
const myVue2=Vue.extend({
  data:function(){
    return{
      count:0
    }
  },
  template:'<div id="myVue2"><button @click="count++"> you clicked me {{count}} times.</button></div>'
})

//将myVue2注册给myVue并且别名：myVue2
//注册完后可以在myVue的template中使用myVue2
myVue.component('myVue2',myVue2)

//创建myVue实例并挂在到‘app上’
const myVueInstance=new myVue({
 	el:'#app'
 })

3.将Vue实例挂载到id为‘app’的dom元素上
	
```javascript
挂载的方式有两种：写法不用效果一样
new Vue({
el:'#app'
})

new Vue({}).$mount('#app')

is me monday

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录