用vue-cli搭建vue项目
node安装vue-cli安装什么的就不用细说了
直接在指定的一个文件夹里:
vue init webpack mytest //webpack表示打包工具的选择,mytest是自己的项目名称。
然后一系列的傻瓜操作后。。。。
就有了项目的初始结构:
目录结构.pngmock.json是我自己加的用来做mock数据用。node_modules是运行了npm install后安装的依赖包。下面的学习主要是先做一个SPA,然后再引申到多页面等。
最重要的还是build和config这两个文件夹里的js代码我现在是还看不太懂。
项目分析:
我还是选择做豆瓣,简单而且也有内容。最主要是可以配合着ES6一起学习,美滋滋。
首先是在组件中定义变量和平常的单独使用js来定义vue变量的时候用法有什么不一样?
先来看我之前开发的,使用js时的变量和方法设定:
img1.png先通过import引入Vue,在实例化一个vue对象,在其中定义其data,methods,components等
按照我的想法,我做了下面的尝试:
1、
test1.png
直接在script中定义data。报错!!!
2、
test2.png
实例化一个vue,再定义data,还是报错。在组件中再引入Vue,还是报错
3、
test3.png
使用export default {} ,然后定义data方法,返回一个对象。啊哈,成功了,不报错了,而且数据渲染也成功了。
这是什么原因呢?
个人觉得:组件是依托于html文件而存在的,在外层的main.js中已经实例化了Vue对象,所以没必要再次实例化Vue,而直接定义的data:{},人家也不认识这个东西啊。通过将一个名称为data的方法导出,那么vue会检测每个组件中的data方法,并根据其返回的对象给对应的组件进行数据渲染。我觉得是这样的。
然后,我们现在创建几个组件,因为在构建项目的时候就使用了vue-router,可以在router文件夹的index文件中进行路由配置。
router.png就是这样。
组件的通信
好,现在开始比较重要的一点。如果在父组件中有一个变量,子组件要用,怎么办?子组件的一个变量,父组件要用,怎么办?
一般情况下,我觉得大部分变量应该定义在外层。内层的变量应该作为子组件的私有变量存在。这也符合程序设计的规范。而子组件如果有一些变动的话,会通过事件通知父组件让其做出相应的变动。
prop.png所以我们在父组件中定义一些变量,在子组件中调用这些变量使用。
如图:
我直接就用了数据绑定了,这样如果username发生变化的话,传递给子组件的username也会相应的发生改变。
子组件如何接受?子组件会声明一个叫做props的数组,这个数组是用来声明子组件期望从父组件中获取到的数据的名称。如图:
image.png当然,也可以通过this.$parent来获取到父组件。
然后就是如何做到通过事件来传播子组件的变动呢?
首先,在父组件视角上,给其包含的子组件上自定义一个事件,然后该事件触发时会执行一个方法。如图:
father1.png自定义事件change和触发change事件后执行的事件changeValue。在父组件中定义这个changeValue方法。
然后移步子组件视角,在子组件中,我们需要找到一个合适的时机(找不到确切的词汇了)去触发父组件的change方法。比如也是点击一个按钮,如图:
son1.png son2.png上图中,当点击修改按钮,会触发子组件中的changeName方法,在changeName方法中,通过
this.$emit('change') 通知父组件去触发change事件,也就是相应的调用了父组件中的changeValue方法了。
写到这里,好像还没有什么实质性的作用。再继续慢慢研究学习。
学习补充:
通过$emit方法可以给父组件传递参数啊!如图:
son3.png这样,通过把子组件中自定义的私有变量username通过参数的形式传递给父组件绑定在change事件上的方法,那么父组件就可以拿到这个值了。
解惑
一、看Vue文档的时候,有一部分说要在某组件的根元素上加上.native。是什么意思呢?
假设现在定义了一个my-button组件。在点击这个button的时候,会有两个事件:
1、my-button组件内部定义的一些事件,必然触发
2、对于父组件而言,想要在点击 my-button的时候触发一些东西。
很明显,2中的事件是一个click原生事件,这时候我们需要在父组件这一层中的定义my-button的这个组件上,绑定一个原生的click事件,也就是用.native。如图,是在我的项目中,给路由组件绑定了一个原生的
click事件,如果不加上.native,是不会触发的。
网友评论