1.过滤器
这里又是没见过的语法。
在这里{ { date | dateStr } },这里的意思是从vue里面拿date,然后调用dateStr这个方法,把date传到func里面
这里注意一下,前面的Vue.filter这里是一个静态方法
2.vue-cli
今天主要搞的就是这个,所以今天在这里需要着重讲一下vue-cli
从前端往后台发送了一个http请求,之前我所了解的,无一不是让后台的controller来控制,进行数据交互,然后页面跳转,然后今天所了解到的,还有一个称之为路由:也就是vue-router
这里的意思就是说,我在前端就可以给一些页面设置跳转路径,可以经过后台也可以不经过后台,来直接快速跳转。。。关于路由的实际使用场景,以后接触了再了解把。
3.vue-cli的安装
这里vue-cli提供了6个模板项目,意思应该是,我们执行命令以后,可以自动生成6个模板,用这6个模板来进行开发
这里注意,每一次创建一个模板项目,都要装npm,把安装指令记一下
①先安装node
②安装镜像 npm install cnpm -g --registry=https://registry.npm.taobao.org
③cd demo
④npm install
⑤npm run dev
这里注意,每一次创建一个模板,都要npm install一下
这里vue-cli的安装是什么意思呢,首先安装node,然后通过cmd的指令来安装vue-cli,最后就可以download模板项目,然后就会生成一系列的一个完整项目
4.配置
这个项目,是有一系列的配置的地方的,比如packagejson等
index.js里面就有可以修改端口号的地方
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
自动打开浏览器
autoOpenBrowser: true,
结构(重点)
这里写的东西,.vue后缀的文件,里面有三要素:templates,js,css
.vue的文件称之为组件
然后这里面的组件(components)里面有一个根组件,这里的根组件就是App.vue
在vue里面是这样设计的,其他的vue文件也就是其他的组件,是可以嵌套在另一个.vue的组件文件上的
export default {
name: 'App',
components: {
HelloWorld
}
}
这里就是,在js里面,会默认的保留一个{ }
在其中会写你的这个组件名,然后含有哪些组件
组件你可以分为父组件,子组件,以及不相关的组件,各个组件之间是可以进行通信的
这个通信,也是非常基本的东西,propes阿等,有点类似android的fragments和activity之间的通信
引入组件就是用import
在这里注意一下,import以后还要映射,直接import以后是没用的,要加
components
组件写完了以后,还要写main.js
main.js才是一个入口
在main.js里面创建一个vue实例,然后在这里面把vue组件加进来
但是这时候只加了app的vue
打包:
npm run build
这里就是打包成一个dist,然后可以放在服务器上跑了
小结:
我们把一个前端页面,完全可以按照功能等方面,进行拆分,拆分完以后分为各个vue,这样就可以重复的对vue进行复用了,之前对于前端的认识,还是比较肤浅的,以为前端就是一些js,其实前端也是可以有其项目结构的,也可以作为一个"project"的去进行更深一级的分类。