Vue实例与组件入门

「爱情、让人受尽委屈。」 2023-06-17 02:59 21阅读 0赞

让Vue框架跑起来，首先需要安装，通常在做大型项目时会使用到Vue官方推荐命令行工具 Vue CLI ， Vue CLI 的安装比较复杂，对于初学者来说先使用官方提供的cdn来引入vue.js,能够快速的入门和理解Vue。

来记得《[MVVM 模式与Vue][MVVM _Vue]》中的代码吗？我们实现了一个简单的双向数据绑定，现在把代码改写成一下

<div id="app">
      <input type='text' v-model='title'>
      <p id="title">{
       {title}}</p>
      <p id="title2">{
       {title}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script> let vm = new Vue({ el:"#app", data:{ title:"Hello world", } }); console.log(vm); </script>

执行的结果是不是很令人惊喜，那么你知道视图模型ViewModel的好处了吗，那些繁琐的dom操作Vue替我们完成了。

下面在控制台观察一下Vue函数：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]

# 创建一个 Vue 实例 #

Vue是一个构造函数，一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例和可选的嵌套的、可复用的组件树组成。

let vm = new Vue({ 
      options
    })

new Vue()的参数是一个选项对象，如上面的代码中就包含了el和data，下面的例子中将用到下面三个选项：

*  el: 指定Vue实例的挂载目标（挂载点），将页面上已存在的DOM元素作为Vue实例的挂载目标
 *  data：用于声明需要响应式绑定的数据对象
 *  components：用于局部注册组件

[Vue实例的参数options说明][Vue_options]

Vue 实例内置了一些有用的实例属性与方法。它们都有前缀 $和\_，以便与用户定义的属性区分开来,不要用这两个前缀定义自己的属性。  
在控制台打印Vue的实例vm:  
![Vue实例][Vue]  
Vue 实例中内置的常用实例属性与方法

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$el</td> 
   <td>HTMLElement</td> 
   <td align="left">挂载元素，Vue实例的DOM根元素</td> 
  </tr> 
  <tr> 
   <td>$root</td> 
   <td>Vue实例</td> 
   <td align="left">用来访问当前组件树的根实例</td> 
  </tr> 
  <tr> 
   <td>$parent</td> 
   <td>Vue实例</td> 
   <td align="left">父实例</td> 
  </tr> 
  <tr> 
   <td>$children</td> 
   <td>Array</td> 
   <td align="left">用来访问当前组件实例的直接子组件实例</td> 
  </tr> 
  <tr> 
   <td>$data</td> 
   <td>Object</td> 
   <td align="left">用来访问组件实例观察的数据对象</td> 
  </tr> 
  <tr> 
   <td>$options</td> 
   <td>Object</td> 
   <td align="left">用于当前 Vue 实例的初始化选项。</td> 
  </tr> 
  <tr> 
   <td>$props</td> 
   <td>Object</td> 
   <td align="left">当前组件接收到的 props 对象。</td> 
  </tr> 
  <tr> 
   <td>$attrs</td> 
   <td>Object</td> 
   <td align="left">包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。</td> 
  </tr> 
  <tr> 
   <td>$refs</td> 
   <td>Object</td> 
   <td align="left">用来获取注册了ref属性的dom元素和组件实例</td> 
  </tr> 
  <tr> 
   <td>$listeners</td> 
   <td>Object</td> 
   <td align="left">包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>参数</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>vm.$on（）</td> 
   <td>event, callback</td> 
   <td align="left">监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。</td> 
  </tr> 
  <tr> 
   <td>vm.$emit( )</td> 
   <td>eventName, […args]</td> 
   <td align="left">触发当前实例上的事件。附加参数都会传给监听器回调。</td> 
  </tr> 
 </tbody> 
</table>

[详细的属性请见官方文档][Link 1]

# 组件 #

Vue的两大核心是数据驱动和组件化。  
组件是可复用的 Vue 实例，实际上， new Vue 创建的根 Vue实例相当于根组件，一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例和可选的嵌套的、可复用的组件树组成，这种结构和DOM类似，组件之间存在父子、兄弟、祖先后代这类的关系。

实例和组件的属性基本是一样的，区别是：

*  实例比组件多出el和router属性
 *  组件的data数据必须要以函数返回的形式，这是因为组件是可重用的，必须做到组件每复用一次，data数据就应该被复制一次，当某一复用的组件内的data被改变时，其他复用地方组件的data数据不受影响。

### 组件注册 ###

要在模板中使用组件，要先将组件注册到Vue实例中。

##### 组件参数 #####

注册组件时，需要提供2个参数：组件名和options选项。

##### 1、组件名 #####

定义组件名的方式有两种：

1.  短横线分隔命名法  
    每一个单词都小写，单词中间用短横线分隔，如组件命名为：my-card,在DOM模板中使用<my-card >引用
2.  大驼峰命名法  
    每一个单词的首字母都大写,如组件命名为：MyCard，在DOM模板中使用<my-card>引用，在字符串模板中还可以使用<MyCard>引用

##### 2、options对象，这个对象里面包含 template，data，methods，computed等属性。 #####

*  template 是html格式的模板，注意必须只能有一个顶层标签,template中定义的模板称为字符串模板。
 *  data 用于存放数据，注意在这里data是一个方法，而根实例的选项中，data是个属性，组件中的 data方法，必须return一个对象

##### 全局注册 #####

利用Vue的静态方法component(),可以全局注册一个组件，这样做相当于扩展了Vue构造器，全局组件，能在任何地方应用。

Vue.component('my-component-name', { 
      // ... 选项 ...
    })

全局组件必须写在Vue实例创建之前，才在该根元素下面生效；  
在模板中遇到全局注册的组件名称作为标签时，会自动调用类似于 new myVue 这样的构造函数来生成组件实例，并挂载到自定义元素上。

##### 局部注册 #####

局部组件注册方式，就是直接在Vue实例里面注册，在实例的 components 选项中注册想要使用的组件。components 中的组件以键值对的形式存在，键名是局部注册的组件名，键值是组件的选项。

1、template选项中定义模板

<div id="app">
      <h1>{
       {title}}</h1>
      <component-a></component-a>
      <component-b></component-b>
    </div>
    <script src="./vue.js"></script>
    <script> //全局注册一个组件ComponentA Vue.component('ComponentA', { template: `<input v-model="title">`, data() { return { title: '这是组件A' } } }); let vm = new Vue({ el: "#app", data: { title: "Vue组件的注册" }, components: { //局部注册组件ComponentB 'ComponentB': { template: `<input v-model="title">`, data() { return { title: '这是组件B' } } } } }); console.log(vm.$children); </script>

通过vm.$children来观察一下组件树  
![在这里插入图片描述][20191206110929195.png]  
在vue调试工具devtools中，能够更清晰的看到组件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 1]

### 挂载点和模板 ###

##### 挂载点 #####

挂载点是Vue的实例要去处理的dom节点，Vue仅处理挂载点下面的内容；  
实例化Vue的时候，设置的el选项，就是用来指定实例的挂载点，即项目（SPA项目）的入口。

##### 模板 #####

不指定模板的情况下挂载点的内部内容就是模板；  
模板看起来很像DOM，但并不是真实的DOM，模板的本质是字符串，Vue通过编译将template 模板转换成渲染函数(render函数),执行渲染函数可以得到一个虚拟节点树vnode,在经过将patch算法把vnode渲染成真实的DOM。  
模板的渲染经历这样的过程：模板 → 渲染函数 → 虚拟DOM树 → 真实DOM

#### Virtual DOM ####

Virtual DOM虚拟DOM,本质上就是一个JS对象，它是真实 DOM 的抽象。和DOM模型一样，它像是虚拟节点（VNode ）组成的树，最终会通过一系列操作使这棵树映射到真实环境上。  
上例中的虚拟DOM:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 2]

#### 定义组件的模板 ####

##### 1、字符串模板 #####

组件的模板一般在组件的template选项中定义，属性值是一个字符串或ES6的字符串模板，但如果组件的template过长会使得代码非常难以阅读，可以将模板写在script标签中，也可以使用Vue提供的内联模板功能,将组件模板设置在组件之外。

*  字符串
 *  字符串模板
 *  写在script标签中，设置type=“x-template”
 *  内联模板  
    下面的组件A、B、C、D分别用不同的方法书写：

<div id="app">
      <component-a></component-a>
      <component-b></component-b>
      <component-c></component-c>
      <component-d inline-template>
        <div>
          <p>这是组件D</p>
        </div>
      </component-d>
    </div>
    <script src="./vue.js"></script>
    <script type="x-template" id="component-c"> <div> <p>这是组件C</p> </div> </script>
    <script> let vm = new Vue({ el: "#app", components: { 'ComponentA': { template:'<div><p>这是组件A</p></div>' }, 'ComponentB': { template:`<div> <p>这是组件B</p> </div>` }, 'ComponentC': { template:"#component-c" }, 'ComponentD':{ } } }); </script>

##### 2、render函数 #####

Vue通过编译将template 模板转换成渲染函数(render函数),也可以直接用render函数直接用js语言来构建虚拟DOM。  
当使用render函数描述虚拟DOM时，需要一个函数（createElement()）作为参数，它是构建虚拟DOM需要的工具。

render函数的返回值：VNode（即：虚拟节点），也就是我们要渲染的节点。

###### createElement函数的3个参数 ######

1.  用于提供dom的html内容，类型可以是字符串、对象或函数。比如”div”就是创建一个
    
    标签。
2.  主要用于设置这个dom的一些样式、属性、传的组件的参数、绑定事件等等，一个包含模板相关属性的数据对象。类型：\{Object\}。可选。
3.  用于定义当前节点的子节点的内容，可以由 createElement() 构建而成，也可以使用字符串来生成“文本虚拟节点”。类型：\{String | Array\}。可选。

<div id="app"></div>
        <script src="./vue.js"></script>
        <script> let vm = new Vue({ el: "#app", template:'<app />', components: { 'App': { template: `<div> <p id="title">{ {title}}</p> </div>`, data(){ return { title: "Hello world" } } }, } }); </script>

如将上面的字符串模板改用render函数，即App组件的template属性改为下面的render方法

render: function (createElement) { 
         const vDom = createElement(
             'div',
             [
                 createElement('p',
                     {  attrs: {  'id': 'title' } },
                     this.title
                 )
             ]
         )
         console.log(vDom)
         return vDom
     }

createElement可以简写为h，render函数可以用ES6语法进行简写

render: h => h(
        //...
      )

createElement() 构建虚拟Dom的语法比较繁琐，更方便的方法是[在Vue 中使用 JSX 语法][Vue _ JSX]

##### 3、单文件组件 #####

单文件组件是把组件写到单独的.vue 文件中，可以把html, css, js 写到一个文件中，从而实现了对一个组件的封装， 一个.vue 文件就是一个单独的组件。由于.vue文件是自定义的，浏览器不认识，所以需要对该文件进行解析。  
在webpack构建中，需要安装vue-loader 对.vue文件进行解析。

这是一个单文件组件的例子ComponentF.vue,以后我们在项目中会主要用这种方式定义模板。

<template>
      <div>
        <p>这是组件F</p>
      </div>
    </template>
    
    <script> export default { name: 'ComponentF' } </script>
    
    <style lang="scss"> </style>

[MVVM _Vue]: https://editor.csdn.net/md/?articleId=103261379
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191127133321453.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw==,size_16,color_FFFFFF,t_70
[Vue_options]: https://blog.csdn.net/dreamingbaobei3/article/details/103286992
[Vue]: https://img-blog.csdnimg.cn/20191127135450194.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw==,size_16,color_FFFFFF,t_70
[Link 1]: https://cn.vuejs.org/v2/api/#%E5%AE%9E%E4%BE%8B%E5%B1%9E%E6%80%A7
[20191206110929195.png]: https://img-blog.csdnimg.cn/20191206110929195.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191206111756129.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191206151700404.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw==,size_16,color_FFFFFF,t_70
[Vue _ JSX]: https://blog.csdn.net/dreamingbaobei3/article/details/115802440