npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g vue-cli
d:\test\
,输入vue init 项目名称
即可。如果你想引入vue2.0框架,必须把nodejs、webpack和npm升级到最新版本。cnpm install
安装所有的开发和运行依赖项注意: 1.按照上述步骤搭建最终可以创建好vue项目,但也遇到几个坑 2.安装的nodejs和webpack、npm不是最新版本 3.如遇坑可以参考此博客:地址
学习一个新框架,首先是看文档,最重要还是实践。写一个hello world过于简单,要玩就玩个大的。我们就来实现一个Tag(标签)组件领悟一下vue的强大。
<template>
<div class="tag-wrap">
<span>标签:</span>
<input type="text" id="tag" name="tag" v-model="val" />
<button id="apply" v-on:click="add" >添加</button>
<ul class="tag-cont clear" v-bind:style="{width: width}">
<li v-for="item in cont">{{item}}</li>
</ul>
</div>
</template>
1.1 template只是模板语言的标记,解析后不会生成到页面,所以内容需要用一个div包裹住;
1.2 template中可以访问Js代码中data()和Methods、props等相关属性;
1.3 props用于父组件向子组件传递值,此值可以动态传递;
1.4 v-on绑定事件,v-for用于迭代集合。
<script>
export default{
name: 'tag',
data () {
return {
cont: [],
val: ''
}
},
methods: {
add: function () {
let _val = this.val
if (_val.length === 0 || this.cont.indexOf(_val) > -1) {
return
}
this.cont.push(this.val)
}
},
props: {
width: {
type: String,
default: 'auto'
}
}
}
</script>
2.1 使用v-model="val"实现输入自动更新val这个属性;
2.2 add方法获取val这个属性的值,然后判断是否为空,以及是否在已添加标签数据中存储,如果不存在则添加到标签数组中。
2.3 props的width类型和默认值,限制类型为String,默认值为auto。
<style lang='scss' scoped >
@keyframes item-show{
from{ opacity: 0; }
}
.clear{
zoom: 1;
}
.clear:after{
content: '';
display: block;
width: 0px;
height: 0px;
overflow: hidden;
clear: both;
}
$back-color:#fed;
span{
background: $back-color;
}
.tag-cont{
list-style: none;
margin: 10px auto;
padding: 5px;
border: 1px solid lightblue;
}
.tag-cont > li{
float: left;
padding: 5px;
border:1px solid gray;
border-radius: 10px;
animation: item-show 1s;
margin: 10px;
}
</style>
3.1 用lang来标记style标签内的Css实现
<template>
<div id="app">
<tag width="300px"></tag>
</div>
</template>
<script>
import Tag from './components/Tag'
export default {
name: 'app',
components: {
Tag
}
}
</script>
Tag组件其实是一个很小的组件,业务价值很低,主要用于Vue新手入门。主要实现Vue常用的父组件改变子组件的值,view改变model,model的变化反应到view上,事件的绑定等功能。
还需要继承深入了解,以及vuex管理vue组件的应用,还有组件之间的通信。