Vue-cli开发环境搭建
1. 安装nodejs
2. 设置缓存文件夹
$ npm config set cache "D:vueProject odejs ode_cache"
3. 设置全局模块存放路径(设置成功后，之后用命令npm install XXX -g安装以后模块就在D:vueProject odejs ode_global里)
$ npm config set prefix "D:vueProject odejs ode_global"
4. 基于node js 安装cnpm淘宝镜像
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
5. 加入环境变量
D:vueProject odejs ode_global
6. 安装Vue
$ cnpm install vue -g
7. 安装vue-cli脚手架
$ cnpm install vue-cli -g
8. 根据模板创建项目
$ vue init webpack mytest
- Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写，所以我把名称改成了vueclitest
- Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。
- Author：作者，如果你有配置git的作者，他会读取。
- Install vue-router? 是否安装vue的路由插件，我们这里需要安装，所以选择Y
- Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n，如果你是大型团队开发，最好是进行配置。
- setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，我们这里不需要，所以输入n。
- Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n。
|-- build // 项目构建(webpack)相关代码 | |-- build.js // 生产环境构建代码 | |-- check-version.js // 检查node、npm等版本 | |-- utils.js // 构建工具相关 | |-- vue-loader.conf.js // webpack loader配置 | |-- webpack.base.conf.js // webpack基础配置 | |-- webpack.dev.conf.js // webpack开发环境配置,构建开发本地服务器 | |-- webpack.prod.conf.js // webpack生产环境配置 |-- config // 项目开发环境配置 | |-- dev.env.js // 开发环境变量 | |-- index.js // 项目一些配置变量 | |-- prod.env.js // 生产环境变量 |-- src // 源码目录 | |-- components // vue公共组件 | |-- router // vue的路由管理 | |-- App.vue // 页面入口文件 | |-- main.js // 程序入口文件，加载各种公共组件 |-- static // 静态文件，比如一些图片，json数据等 |-- .babelrc // ES6语法编译配置 |-- .editorconfig // 定义代码格式 |-- .gitignore // git上传需要忽略的文件格式 |-- .postcsssrc // postcss配置文件 |-- README.md // 项目说明 |-- index.html // 入口页面 |-- package.json // 项目基本信息,包依赖信息等
9. 安装工程依赖模块
$ cd mytest && cnpm install
10. 启动项目
$ cnpm run dev
属性绑定：
v-bind: 或者 :
<div id="root">
<span v-bind:title="'this is '+title">hello world</span>
</div>
<script>
new Vue({
el:"#root",
data:{
title:"hello world"
}
})
</script>
事件绑定：
v-on: 或者 @
<div id="root">
<h1 @click="handleClick">{{msg}}</h1>
</div>
<script>
new Vue({
el: "#root",
data: {
msg: "hello",
},
methods: {
handleClick: function () {
this.msg = "world";
}
}
})
</script>
双向数据绑定：
v-model
<div id="root">
<input v-model="content">
<div>{{content}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
content:"this is content"
}
})
</script>
计算属性：
computed:
<div id="root">
姓<input v-model="firstName">
名<input v-model="lastName">
<div>{{fullName}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
firstName:"",
lastName:""
},
computed:{
fullName:function () {
return this.firstName+" "+this.lastName
}
}
})
</script>
侦听器：
watch
<div id="root">
姓<input v-model="firstName">
名<input v-model="lastName">
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
firstName:"",
lastName:"",
count:0
},
computed:{
fullName:function () {
return this.firstName+" "+this.lastName
}
},
watch:{
firstName:function () {
this.count ++
},
lastName:function () {
this.count ++
}
}
})
</script>
v-if 和v-show的区别：
<div id="root">
<div v-show="show">hello world</div>
<button @click="handleClick">toggle</button>
</div>
<script>
new Vue({
el: "#root",
data: {
show: true
},
methods:{
handleClick:function () {
this.show = !this.show;
}
}
})
</script>
条件为false时：v-if 这个元素不复存在，v-show style="display:none"
v-for:
<div id="root">
<ul>
<li v-for="(i,index) in list" :key="index">{{i}}</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data: {
list:[1,2,3]
},
})
</script>
key的存在是为了提高遍历性能。
组件内使用v-for
<template>
<ul>
<item-component v-for="item in items" :item="item"></item-component>
</ul>
</template>
<script>
export default {
props: ['item']
}
</script>