vuejs自定义了一种。vue文件,可以把html, css, javascript写到一个文件中,从而实现了对一个组件的封装,一个。vue文件就是一个单独的组件。由于。vue文件是自定义的,浏览器不认识,所以需要对该文件进行解析。在webpack构建中,需要安装vue-loader对。vue文件进行解析。在sumlime编辑器中,我们书写。vue文件,可以安vue语法突出显示插装件,增加对文件的支持。
用vue-cli新建一个vue项目,看一下。vue文件长什么样?在新建项目的过程中,命令行中会询问你几个问题,当询问是否安装vue-router时,这里先选择否。项目完成后,我们看到src 目录下有一个组合目录,里面有一个“你好”。vue文件,内容如下,这里对模板里面的内容做了一些删减
可以看的到,在.vue文件中,模板中都是html代码,它定义了在页面中显示的内容,由于里面还有变量,也可以说定义了一个模版;脚本中都是js代码,它定义这个组件中所需要的数据和及其操作,风格里面是css样式,定义这个组件的样式,范围表明这里写的css样式只适用于该组件,可以限定样式的作用域。
<强>脚本标签中出口defalut后面的对象的理解。
在不使用。vue单文件时,我们是通过vue构造函数创建一个vue根实例来启动vuejs项目,vue构造函数接受一个对象,这个对象有一些配置属性el,数据、组件、模板等,从而对整个应用提供支持。
在。vue文件中,出口违约后面的对象就相当于新vue()构造函数中的接受的对象,它们都是定义组件所需要的数据(数据),以及操作数据的方法等,更为全面的一个出口违约对象,有方法,数据,计算,这时可以看的到,这个对象vue()和新构造函数中接受的对象是一模一样的。但要注意数据的书写方式不同。在.vue组件,数据必须是一个函数,它返回(返回一个对象),这个返回的对象的数据,供组件实现。
,把项目中自带的你好。vue内容清空,我们自己写一个组件来体验一下这种相同。
页面中有一个输入输入框,当进行输入的时候,输入框下面的内容会进行同步显示,只不过它是大写,当输入完成后,按回车键就会弹出我们输入的内容。获取用户输入的内容,我们用的是v模型指令,这个指令将用户输入的内容绑定到变量上,并且它响应式的,我们的变量值会随着用户输入的变化而变化,也就是说我们始终获取的都是用户最新的输入。下面大写的显示,用的是计算属性,弹窗则是给绑定了一个按键响应事件,通过描述,你会发现,它简直就是一个vue实例,实际上它就是个vue实例。每一个vue组件都是一个vue实例,更容易明白出口违约后面的对象了。
<>强父子组件之间的通信
每一个。vue文件就是一个组件,组件和组件相互组合,就成了一个应用,这就涉及到的组件和组件之间的通信,最常用的就是父子之间的通信。在vue中,在一个组件中通过进口引入另一个组件,这个组件就是父组件,被引入的组件就是子组件。
