环境准备
1、安装node.js，为了使用npm
2、装完后，cmd进入控制台，查看node版本号node -v，查看npm版本号npm -v
3、查看path环境变量，cmd进入控制台，输入path查看是否有node字样，没问题进入下一步。
4、安装git，为了快捷地开发
5、装完之后，在需要开发的文件夹里面右击，选择Git Bash Here
6、由于npm源在国外速度慢，可以选择换源，或者使用淘宝镜像工具
7、安装淘宝npm镜像，可以使用cnpm，代替npm
npm install -g cnpm --registry=https://registry.npm.taobao.org
8、安装vue（其中的npm命令可以适当换成cnpm）
//全局安装vue-cli npm install --global vue-cli //创建一个基于webpack模板的新项目 vue init webpack my-project //其他选项都可以直接回车或输入N回车，在vue-router的时候，输入Y回车
//当看见All packages installed，就完成了
//安装依赖包 cd my-project npm install npm run dev
9、项目进行中时不要关闭git，若关闭了重新打开：cd my-project ,npm run dev 即可
项目的创建
1、在src目录下面创建自己的项目文件夹，如bb
2、在该项目下面创建视图文件，xxx.vue
<template> <p>Hello World</p> </template>
3、设置路由，src目录下的router下的index.js，如：
import HelloWorld from '@/components/HelloWorld' /*当前@表示src目录*/ import xiangmu from '@/xiangmu/index.vue' /*第二种引入方式*/ export default new Router({ routes: [{ path: '/', //当地址栏输入/的时候，找到下面component的地址 name: 'HelloWorld', //按照需求给这个路由命名 component: HelloWorld //地址栏 }, //记得两个路由之间要加上逗号 { path: '/xiangmu', name: 'xiangmu', // component: require('@/xiangmu/index.vue') //第一种引入方式，这种方式有些版本不支持 component: xiangmu //第二种方式，全通用 } ] })
4、去掉默认大logo，src目录下App.vue，删除开头的的<img src="./assets/logo.png">标签，完成
5、浏览器访问 http://localhost:8080/#/ 到达首页
生命周期
生命周期图片：https://cn.vuejs.org/images/lifecycle.png
组件生成的时候就会自动调用生命周期函数，具体生命周期的实现如：
<script> export default{ data(){ //每个组件都会有data这个函数 return{} }, //两函数之间要用逗号隔开 beforeCreate(){ console.log('beforeCreate 创建之前'); }, created(){ console.log('created 已经创建'); }, beforeMount(){ console.log('beforeMount 挂载之前'); }, mounted(){ console.log('mounted 已经挂载'); }, //生命周期函数监听到才触发 beforeUpdate(){ console.log('beforeUpdate 更新之前'); }, updated(){ console.log('updated 已经更新'); }, beforeDestroy(){ console.log('beforeDestroy 销毁之前'); }, destroyed(){ console.log('destroyed 已经销毁'); } } </script>
选项数据
data
export default { data() { return { bb: 'hello', //两个变量之间用逗号分隔 cc: 'how are you' //这里定义的是全局变量，视图模板可以用，后续函数也可以用 } },
//code... }
模板调用
<template> <div> <!-- 如需调用不多个选项数据，那必须在该div里面 --> <div>{{bb}}</div> <!--模板调用只需要 {{变量名}} 即可-->
<!-- code... --> </div> </template>
computed
//接着上面的export default 里面定义
computed: { //computed是一个对象，里面可以定义各种函数 hi() { return this.bb + this.cc; //调用data里面的变量 = this.变量名 } },
模板调用
//接着在模板{{bb}}后面写
<div>{{hi}}</div>
methods
methods:{ //methods对象，里面定义各种行为性的函数
hello(){
alert("hello");
}
}
模板调用
//接着在模板{{hi}}后面写 <div @click="hello()">打招呼</div> //用@click给该div绑定点击事件
//函数不需要传参时，后面()可写可不写
模板语法
data语法
//在模板输出data属性（选项数据说过）
//data定义 data() { return { bb: 'Hello!' } } //模板输出 <div>{{bb}}</div>
嵌入js语法
//在模板上面嵌入js
//data定义 data() { return { bb: 'Hello! ', //两个变量之间用逗号分隔 cc: 'How are you?' //这里定义的是全局变量，视图模板可以用，后续函数也可以用 } } //模板输出 <div>{{bb + cc +bb}}</div> //js的字符串拼接
v-html
//动态地嵌入html标签
//data定义 data() { return { dt:"<p>html是动态的，更改data里面属性值，html就会变化</p>" } } //模板输出 <div v-html="dt"></div> //将dt里面的html嵌入到这个div里面
v-bind
//动态的属性名
//data定义 data() { return { lei:"nihao" } } //模板输出 <div v-bind:class="lei"></div> //class = data里面lei的value 。 //更改lei的value，该div的class就会发生改变
v-on
//绑定事件函数
//methods定义 methods:{ say(h){ alert(h); } } //模板输出 <div v-on:click="say(hi)">点击触发函数</div> //缩写形式：@click="say(hi)"
过滤器
//对模板中的变量进行过滤，通过过滤器，改变原来的输出
//data定义 data() { return { bb:"你好！" } }, //filters定义，filters里面定义各种过滤器函数 methods:{ say(h){ alert(h+h); } } //模板输出 <div> {{bb | say(bb)}} </div> //输出结果：你好！你好！ //没有过滤器的时候直接输出bb变量，通过say(bb)过滤器,输出了两个bb变量
计算属性（computed）
//模板与js分离（过多的嵌套js会导致模板页面维护成本变高）
//js分离：模板文件容易维护 //data定义 data() { return { bb:"Hello！" } }, //computed定义 computed: { fanzhuan(){ return this.bb.split('').reverse().join(''); } } //模板输出 <div> {{bb}} </div>