Vue高级设计【组件、过渡效果】

刺骨的言语ヽ痛彻心扉 2023-03-13 02:20 6阅读 0赞

## 一.组件 ##

前面介绍了Vue的各种功能，但是这些功能并不能直接在项目中使用。因为如果直接使用的话，会导致出现一个非常大的Vue实例，这和将所有代码都写在一个文件的道理是一样的。所以Vue引入了组件来进行模块化功能。  
代码案例：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
    	</head>
    	<body>
    		<h1>组件</h1>
    		<div id="s8">
    		  <h3>hello world组件</h3>
    		  <hello-world></hello-world>
    		  <h3>从父组件传递数据</h3>
    		  <hello-world name="spark"></hello-world>
    		  <h3>动态传递数据</h3>
    		  <hello-world :name="name"></hello-world>
    		</div>
    		<script>
    		  let component1 = { 
    		    template: '<p>{ {hello}} { {name}}</p>',
    		    data() { 
    		      return { 
    		        hello: 'hello world'
    		      }
    		    },
    		    props: [
    		      'name'
    		    ]
    		  }
    		  let vm8 = new Vue({ 
    		    el: '#s8',
    		    data: { 
    		      name: 'scala'
    		    },
    		    components: { 
    		      'hello-world': component1,
    		    }
    		  })
    		</script>
    	</body>
    </html>

执行效果：  
![在这里插入图片描述][20200509165545184.png]  
定义组件和定义一个Vue实例类似。不同的是，组件需要有自己的模板，而且组件的data属性必须是一个函数。原因是假如一个组件在多个地方复用，那么原本的data属性会导致所有组件实例共用一个属性值。使用函数后，每个组件实例都会有自己独立的数据。  
如下：  
![在这里插入图片描述][20200509165818600.png]  
定义好了组件之后，我们还需要在Vue中注册它。第一种方法是全局注册，这样组件就可以在全局范围中使用。  
![在这里插入图片描述][20200509170127882.png]  
第二种方法更常见，就是局部注册。将组建注册到局部Vue实例，那么组件只会在该实例的作用域内可见。局部注册需要在创建Vue实例的时候将组件传入到components属性中。  
![在这里插入图片描述][2020050917035414.png]  
组件注册完毕之后，我们就可以像使用自定义标签一样使用它了。  
![在这里插入图片描述][20200509170529275.png]  
如果需要从父组件中传递数据，需要在子组件中声明props属性制定要传入的数据。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3NjAwNzIz_size_16_color_FFFFFF_t_70]  
如果需要传递动态数据，使用v-bind指令即可。  
![在这里插入图片描述][20200509170930460.png]

## 二.过渡效果 ##

Vue封装了一个组件transition，当其中的组件被插入、删除，或者发生变化的时候，会自动查看这些组件是否应用了过渡CSS类，然后再恰当的时机插入和删除这些类，从而实现过渡效果。过渡类名在官方文档中有介绍，还有一张过渡示意图，这里我就不再介绍了。  
比如说我现在需要一个透明度过渡效果。我可以这样编写CSS类。  
![在这里插入图片描述][20200509172716356.png]  
然后用下面的方法使用，就可以看到实际效果了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3NjAwNzIz_size_16_color_FFFFFF_t_70 1]  
效果：  
![在这里插入图片描述][20200509172811250.png]  
有很多第三方动画库，而且Vue允许我们自定义类名，以便和这些动画库配合使用。比方说Animate.css，我们可以将CDN添加到页面中来使用。引入如下：

代码：  
![在这里插入图片描述][20200509173214986.png]  
效果：  
![在这里插入图片描述][20200509174138622.png]  
![在这里插入图片描述][20200509174201126.png]

[20200509165545184.png]: /images/20230312/b64aaed8e6194b188e78eed72a39e04a.png
[20200509165818600.png]: /images/20230312/231d485fe08e4f40b629658109860bc1.png
[20200509170127882.png]: /images/20230312/40b60727c29d4e6596d8db3182e442dd.png
[2020050917035414.png]: /images/20230312/e8ebce44fbea4ff9b251fc8cc4e8c356.png
[20200509170529275.png]: /images/20230312/2d4d5d52aafe4067a88e3abeea493a4a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3NjAwNzIz_size_16_color_FFFFFF_t_70]: /images/20230312/2144be031ff6421bb655644027ac44f1.png
[20200509170930460.png]: /images/20230312/8988fae9f52a42eeb7d108c72855af4c.png
[20200509172716356.png]: /images/20230312/c9a5f868505d409a9a1ffc2266cd10a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3NjAwNzIz_size_16_color_FFFFFF_t_70 1]: /images/20230312/acdc7b13867643768581aff69deeadc0.png
[20200509172811250.png]: /images/20230312/d9372f1690114a5f918a073966fdb4e0.png
[20200509173214986.png]: /images/20230312/3a9e710986494658a5d6cbb55f7e7a65.png
[20200509174138622.png]: /images/20230312/b5f413be4469442ea2e4408aa1799d2b.png
[20200509174201126.png]: /images/20230312/a257ba070a584184bbd639b1cafa899a.png