一：环境搭建
1.安装node.js
2.cnpm 下载包
地址：http://npm.taobao.org/
安装cnpm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
3.搭建vue的开发环境：
https://cn.vuejs.org/v2/guide/installation.html
1、必须要安装nodejs
2、搭建vue的开发环境 ，安装vue的脚手架工具 官方命令行工具
npm install --global vue-cli / cnpm install --global vue-cli （此命令只需要执行一次）
3、创建项目 必须cd到对应的一个项目里面
vue init webpack vue-demo01
cd vue-demo01
cnpm install / npm install 如果创建项目的时候没有报错，这一步可以省略。如果报错了 cd到项目里面运行 cnpm install / npm install
npm run dev
4、另一种创建项目的方式 （推荐） 安装文件比较简洁
vue init webpack-simple vuedemo02
cd vuedemo02
cnpm install / npm install
npm run dev
二：运行说明
1、cd 到demo里面
如：cd vuedemo
2、安装依赖：
cnpm install
3、运行项目
npm run dev
三：基本代码
{{msg}}---双大括号是插值表达式，小胡子语法。
el:'#app'---表示Vue实例控制页面上那个区域。
data:{ }---存放el中需要用到的数据
methods:{}---方法，定义当前实例所有可用的方法
四：Vue指令
1：v-cloak---解决在网络延迟时插值表达式闪烁问题
用法：
{{msg}}
2: v-text---默认没有闪烁问题，会覆盖元素中原本的内容
用法：
被v-text覆盖的内容
3: v-html---双大括号的方式会将数据解释为纯文本，而非HTML。为了输出真正的HTML，可以用v-html指令。它等同于JS的innerHtml属性
1212112
4: v-bind---绑定属性的指令，简写为 ：要绑定的属性。只能实现单向绑定，从M自动绑定到V
5：v-on---事件绑定机制，简写为 @
6：v-model---实现表单元素和Model数据双向绑定，只能运用在表单元素中。input(radio, text, address, email....) select checkbox textarea
7：v-for---循环数组
循环普通数组
{{item}}
循环对象数组
Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}
循环遍历对象身上的属性
迭代数字
这是第 {{ count }} 次循环
Key属性使用---循环时，key属性只能使用number和string,须使用 v-bind 属性绑定的形式，指定 key 的值
{{item.id}} --- {{item.name}}
8. v-if---每次都会重新删除或者创建元素,有更高的切换消耗
这是用v-if控制的元素
9. v-show---每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式
这是用v-show控制的元素
如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show
如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if
五：事件修饰符
.stop --停止--阻止冒泡
.prevent --阻止--阻止默认行为
.capture --捕获--实现捕获触发事件机制
.self--自己--实现只有点击当前元素时候，才会触发事件处理函数
.once--一次--只触发一次事件函数
六：Vue中样式
1.普通样式
一
2.传递一个数组，注意： 这里的 class 需要使用 v-bind 做数据绑定
传递一个数组
3.数组中使用三元表达式
数组中使用三元表达式
4.数组中嵌套对象
数组中嵌套对象
5.直接使用对象
直接使用对象
直接使用对象
6.使用内联样式
直接在元素上通过 `:style` 的形式，书写样式对象
这是一个善良的p
这是一个p
七：键盘修饰符以及自定义键盘修饰符
通过Vue.config.keyCodes.名称 = 按键值来自定义案件修饰符的别名：
Vue.config.keyCodes.f2 = 113;
八：过滤器定义
Vue.filter('过滤器的名称', function(){})
过滤器中的 function ，第一个参数，已经被规定死了，永远都是 过滤器 管道符前面 传递过来的数据
Vue.filter('过滤器的名称', function (data) {
return data + '123'
})
过滤器调用时候的格式 {{ name | 过滤器的名称 }}
私有过滤器：
1. HTML元素：
```
```
2. 私有 `filters` 定义方式：
```
filters: { // 私有局部过滤器，只能在 当前 VM 对象所控制的 View 区域进行使用
dataFormat(input, pattern = "") { // 在参数列表中 通过 pattern="" 来指定形参默认值，防止报错
var dt = new Date(input);
// 获取年月日
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, '0');
var d = dt.getDate().toString().padStart(2, '0');
// 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日
// 否则，就返回 年-月-日 时：分：秒
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`;
} else {
// 获取时分秒
var hh = dt.getHours().toString().padStart(2, '0');
var mm = dt.getMinutes().toString().padStart(2, '0');
var ss = dt.getSeconds().toString().padStart(2, '0');
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
}
}
```
### 全局过滤器
```
// 定义一个全局过滤器
Vue.filter('dataFormat', function (input, pattern = '') {
var dt = new Date(input);
// 获取年月日
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, '0');
var d = dt.getDate().toString().padStart(2, '0');
// 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日
// 否则，就返回 年-月-日 时：分：秒
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`;
} else {
// 获取时分秒
var hh = dt.getHours().toString().padStart(2, '0');
var mm = dt.getMinutes().toString().padStart(2, '0');
var ss = dt.getSeconds().toString().padStart(2, '0');
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
});
```
> 注意：当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！
九：生命周期函数
十：使用vue-resource请求数据的步骤
1.安装vue-resource模块，加上--save
npm install vue-resource --save / cnpm install vue-resource --save
2.在main.js引入vue-resource
import VueResource from 'vue-resource';
3.在main.js引入Vue.use(VueResource);
Vue.use(VueResource);
4.在组件里面直接使用
this.$http.get(地址).then(function(){
})
首页组件
-
{{item.title}}
十一：使用vue-axios请求数据
1.安装vue-axios
cnpm install axios --save
2.哪里使用哪里引入
import Axios from 'axios'
十二：组件使用
1.在script标签内引入组件
2. 在components内挂载组件
3.在模板中使用组件
十三：父组件给子组件传值 父组件给子组件传方法
1. 父组件调用字组件时候，绑定动态属性
2.在子组件里面通过props接收父组件传过来的数据
props:['title']
父组件代码：
首页组件
子组件代码：
我是头部组件--{{title}}---{{homemsg}}
十四：路由使用
1.安装
npm install vue-router --save / cnpm install vue-router --save
2、引入并 Vue.use(VueRouter) (main.js)
import VueRouter from 'vue-router'
Vue.use(VueRouter)
3、配置路由 下面四个在main.js里面
1、创建组件 引入组件
2、定义路由 （建议复制s）
const routes = [
{ path: '/home', component: Home },
{ path: '/news', component: News },
{ path: '*', redirect: '/home' }
]
3、实例化VueRouter
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
4、挂载
new Vue({
el: '#app',
router，
render: h => h(App)
})
5 、根组件的模板里面放上这句话
6、路由跳转
7.1.this.$router.go(val) => 在history记录中前进或者后退val步，当val为0时刷新当前页面。
2.this.$router.push(path) => 在history栈中添加一条新的记录。
十五：动画
1.使用transition元素，把需要被动画控制的元素包裹起来
被控制元素
2.自定义两组样式，来控制 transition 内部的元素实现动画
3.修改动画v-前缀 transition加入name属性
被控制元素
样式里面v-改完自定义名字
4.使用animate库实现动画，用npm安装看api
leave-active-class="animated bounceOut"> 这是一个H3
5.动画钩子函数
+1：定义 transition 组件以及三个钩子函数：
@before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
+2. 定义三个 methods 钩子方法
十六：使用ref获取DOM元素和组件
哈哈哈， 今天天气太好了！！！