Vue.js入门(三)

目录

第一章:组件化与模块的区别

第二章:组件的创建

2.1 创建组件的方式

2.1.1 第一种方式

2.1.2 第二种方式

2.1.3 第三种方式

2.2 使用定义私有组件

2.3 组件中的data

2.4 不同组件之间的切换

2.4.1 使用v-if与v-else切换组件

2.4.2 使用Vue提供的component元素切换组件

2.5 总结

第三章 组件的传值

3.1 父组件向子组件传值

3.2 父组件向子组件传递方法

3.3 子组件向父组件传值

第四章:使用ref获取DOM元素和组件引用

4.1 基本应用

4.2 利用ref引入组件

---

 

第一章:组件化与模块的区别

第二章:组件的创建

2.1 创建组件的方式

2.1.1 第一种方式

用extend创建template再用component加入组件

也可以直接加入组件

 

 

2.1.2 第二种方式

 

2.1.3 第三种方式

模板字符串的书写有点麻烦,在字符串里容易漏

2.2 使用定义私有组件

所谓全局就是不只是用在app中,还能用在别的地方.

 

2.3 组件中的data

下图的组件应用会相互影响

进行如下修改后便不会了,每次创建新的组件实例的时候,都会调用一下data函数,会return一个新开辟的对象,这样就保证了每个对象都是独有的.

2.4 不同组件之间的切换

2.4.1 使用v-if与v-else切换组件

2.4.2 使用Vue提供的component元素切换组件

component后的is,因为加上了is,所以是要绑定一个值,如果要绑定的值是字符串的话要加上''.

2.5 总结

公有:

私有:

应用:

第三章 组件的传值

3.1 父组件向子组件传值

                             

                              

3.2 父组件向子组件传递方法

模板:

 

绑定:

应用:

 

3.3 子组件向父组件传值

模板:

 

绑定:

 

应用:

第四章:使用ref获取DOM元素和组件引用

因为在Vue.js中不推荐操作DOM元素,所以Vue提供了一个ref.

4.1 基本应用

在h3中放置一个ref

可以看到在ref中引用了DOM元素

通过this即可应用

如果放置两个ref,则会

4.2 利用ref引入组件

 通过ref可以访问子组件中的值与方法