Vue 是一套用于构建用户界面的渐进式框架,具有其数据双向绑定和组件化开发的特点。 Vue 已经有了很多的设计优美的UI库可供调用,让后端程序员也能方便地搭建简易的前端页面。我早就安装了nodeJS 和 npm 工具,所以直接安装脚手架就可以。
#首先安装官方脚手架构建工具
$cnpm install vue-cli
#创建基于webpack模板的新项目
$vue init webpack my-project-name
#热启动,改动代码可以立即看到页面的更改。
$cnpm run dev
组件通信
作为一个非专业前端,我比较关心数据这一部分,Vue中父子组件通信需要子组件先声明一个这样的 Props ,然后父组件传递进去,这里有显式指定数据类型如 Array, Number 等,像这样
#子组件
export default{
props:{
propName:{
type: Array,
default: []
}
}
}
#父组件
<child v-bind:propName="dataName">
一个组件本身可以含有数据,用户对组件的操作可以更改这些数据,而组件本身的显示效果又依赖于这些数据,这就形成了一个简易的MVC模型。
组件本身的data是私有的,可读可写,而props里的数据都是从父组件里获得,或者是通过ajax请求从后端那里得到的,只能读。比如说一个轮播图,需要有一个 nowIndex 记录当前被激活的图片,这个数据就应该放在data中,而图片的地址和标题这些信息应该从父组件中传递过来。
前端路由
vue通过不同的路由转到不同的组件(页面),有时URL中当然会有参数,而且vue采用的是严格匹配,比如/hello 就不会匹配到下面的路径。
Vue.use(Router)
export default new Router({
routers:[
{
path :'/hello/:name'
component: HelloWorld
}
]
})
在html template中获取router参数
<html>
<h1>{{ msg }}, {{ $route.params.name }} </h1>
</html>
在script中获取router参数
alertParam(){
this.msg = this.$route.params['name']
}
其他
vue里关于各种列表渲染,动态绑定等网上都说明得很详细,这里主要记录一些比较生涩当经常要用到的的语法,方便下次查阅。
父组件传递数据并动态绑定, 其中list来自于父组件的data(),color来自data
<div v-for="item in list" v-bind:color="item.color"> 循环渲染
<a v-bind:class="['classA', {'red-font': hasError}]"> 绑定多个类
<div :class="[{'line-last' : index % 2 !== 0}, 'index-board-' + item.id]">绑定了两个类,一个是基于逻辑的动态绑定,一个是基于变量的动态绑定
一些vue的进阶学习资源。
- vuex-resouce 发起ajax请求。
- json-server 模拟后端接口,提供数据
- expess 一个node.js框架,可以提供后端服务器所能提供的一切。