vuejs 单文件组件.vue 文件的使用
vuejs自定义了一种.vue文件,可以把html,css,js写到一个文件中,从而实现了对一个组件的封装,一个.vue文件就是一个单独的组件。由于.vue文件是自定义的,浏览器不认识,所以需要对该文件进行解析。在webpack构建中,需要安装vue-loader对.vue文件进行解析。在sumlime编辑器中,我们书写.vue文件,可以安装vuesyntaxhighlight插件,增加对文件的支持。
用vue-cli新建一个vue项目,看一下.vue文件长什么样?在新建项目的过程中,命令行中会询问你几个问题,当询问是否安装vue-router时,这里先选择否。项目完成后,我们看到src 目录下有一个componet目录,里面有一个Hello.vue文件,内容如下,这里对template里面的内容做了一些删减
{{msg}}
EssentialLinks
可以看到,在.vue文件中,template中都是html代码,它定义了在页面中显示的内容,由于里面还有变量,也可以说定义了一个模版;script中都是js代码,它定义这个组件中所需要的数据和及其操作,style里面是css样式,定义这个组件的样式,scoped表明这里写的css样式只适用于该组件,可以限定样式的作用域。
script标签中exportdefalut后面的对象的理解。
在不使用.vue单文件时,我们是通过Vue构造函数创建一个Vue根实例来启动vuejs项目,Vue构造函数接受一个对象,这个对象有一些配置属性el,data,component,template等,从而对整个应用提供支持。
newVue({ el:'#app', data:{ msg:"helloVue" } })
在.vue文件中,exportdefault后面的对象就相当于newVue()构造函数中的接受的对象,它们都是定义组件所需要的数据(data),以及操作数据的方法等,更为全面的一个exportdefault对象,有methods,data,computed,这时可以看到,这个对象和newVue()构造函数中接受的对象是一模一样的。但要注意data的书写方式不同。在.vue组件,data必须是一个函数,它return(返回一个对象),这个返回的对象的数据,供组件实现。
把项目中自带的hello.vue内容清空,我们自己写一个组件来体验一下这种相同。
{{upper}}
页面中有一个input输入框,当进行输入的时候,输入框下面的内容会进行同步显示,只不过它是大写,当输入完成后,按enter键就会弹出我们输入的内容。获取用户输入的内容,我们用的是v-model指令,这个指令将用户输入的内容绑定到变量上,并且它响应式的,我们的变量值会随着用户输入的变化而变化,也就是说我们始终获取的都是用户最新的输入。下面大写的显示,用的是computed属性,弹窗则是给绑定了一个keypress事件,通过描述,你会发现,它简直就是一个vue实例,实际上它就是个vue实例。每一个vue组件都是一个vue实例,更容易明白exportdefault后面的对象了。
父子组件之间的通信
每一个.vue文件就是一个组件,组件和组件相互组合,就成了一个应用,这就涉及到的组件和组件之间的通信,最常用的就是父子之间的通信。在vue中,在一个组件中通过import引入另一个组件,这个组件就是父组件,被引入的组件就是子组件。
在我们这个vue-cli项目中,src文件夹下有一个App.vue文件,它的script标签中,importHellofrom'./components/Hello',那么App.vue就是父组件,components文件夹下的Hello.vue就是子组件。父组件通过props向子组件传递数据,子组件通过自定义事件向父组件传递数据。
父组件向子组件传值,它主要是通过元素的属性进行的.在App.vue的template中,有一个
在Hello.vue中,exportdefault后面的对象中,添加一个字段props,它是一个数组,专门用来接收父组件传递过来的数据.props:["mesFather"],这里定义了mesFather字符串,和父组件中定义的元素的属性一一对应.但是我们在父组件,就是在
App.vue的template更改如下: