Vue笔记
一：环境搭建
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---解决在网络延迟时插值表达式闪烁问题
用法：
<p v-cloak>{{msg}}</p>
<style>[v-cloak]{display: none;}</style>
2: v-text---默认没有闪烁问题，会覆盖元素中原本的内容
用法：
<p v-text="msg">被v-text覆盖的内容</p>
3: v-html---双大括号的方式会将数据解释为纯文本，而非HTML。为了输出真正的HTML，可以用v-html指令。它等同于JS的innerHtml属性
<p v-html="msg2">1212112</p>
4: v-bind---绑定属性的指令，简写为 ：要绑定的属性。只能实现单向绑定，从M自动绑定到V
<input type="button" value="按钮" v-bind:title="mytitle + '123'">
5：v-on---事件绑定机制，简写为 @
<input type="button" value="按钮" v-on:click="show">
<input type="button" value="按钮" @:click="show">
6：v-model---实现表单元素和Model数据双向绑定，只能运用在表单元素中。input(radio, text, address, email....) select checkbox textarea
<input type="text" v-model="msg">
7：v-for---循环数组
循环普通数组
<p v-for="item in list">{{item}}</p>
<li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}</li>
循环对象数组
<p v-for="(user, i) in list">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}</p>
循环遍历对象身上的属性
<div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>
迭代数字
<p v-for="count in 10">这是第 {{ count }} 次循环</p>
Key属性使用---循环时，key属性只能使用number和string,须使用 v-bind 属性绑定的形式，指定 key 的值
<p v-for="item in list" :key="item.id">
<input type="checkbox">{{item.id}} --- {{item.name}}
</p>
8. v-if---每次都会重新删除或者创建元素,有更高的切换消耗
<h3 v-if="flag">这是用v-if控制的元素</h3>
9. v-show---每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式
<h3 v-show="flag">这是用v-show控制的元素</h3>
如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show
如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if
五：事件修饰符
.stop --停止--阻止冒泡
.prevent --阻止--阻止默认行为
.capture --捕获--实现捕获触发事件机制
.self--自己--实现只有点击当前元素时候，才会触发事件处理函数
.once--一次--只触发一次事件函数
六：Vue中样式
1.普通样式
<p class="red thin">一</p>
2.传递一个数组，注意： 这里的 class 需要使用 v-bind 做数据绑定
<p :class="['thin', 'italic']">传递一个数组</p>
3.数组中使用三元表达式
<p :class="['thin','italic',flag?'active':'']">数组中使用三元表达式</p>
4.数组中嵌套对象
<p :class="['red', 'thin', {'active': isactive}]">数组中嵌套对象</p>
5.直接使用对象
<p :class="classObj">直接使用对象</p>
<p :class="red:true, italic:true, active:true,thin:true">直接使用对象</p>
6.使用内联样式
直接在元素上通过 `:style` 的形式，书写样式对象
<p :style="{color: 'red', 'font-size': '40px'}">这是一个善良的p</p>
<p :style="[ styleObj1, styleObj2, styleObj3]">这是一个p</p>
<script>
var vm = new Vue({
el: '#app',
data: {
flag: true,
classObj: { red: true, thin: true, italic: false, active: false }
},
methods: {}
});
</script>
<style>
.red {color: red; }
.thin {font-weight: 200;}
.italic {font-style: italic; }
.active {letter-spacing: 0.5em; }
</style>
七：键盘修饰符以及自定义键盘修饰符
通过Vue.config.keyCodes.名称 = 按键值来自定义案件修饰符的别名：
Vue.config.keyCodes.f2 = 113;
<input type="text" v-model="name" @keyup.f2="add">
八：过滤器定义
Vue.filter('过滤器的名称', function(){})
过滤器中的 function ，第一个参数，已经被规定死了，永远都是 过滤器 管道符前面 传递过来的数据
Vue.filter('过滤器的名称', function (data) {
return data + '123'
})
过滤器调用时候的格式 {{ name | 过滤器的名称 }}
私有过滤器：
1. HTML元素：
```
<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>
```
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}`;
}
});
```
> 注意：当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！
九：生命周期函数
<script>
// 开始创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: 'ok'
},
methods: {
show() {
console.log('执行了show方法')
}
},
beforeCreate() { 创建前// 这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它
// console.log(this.msg)
// this.show()
//刚初始化一个vue空的实例对象，这时候，这个对象身上，只有默认的一些生命周期函数和默认事件，其他东西都未创建
// 注意： 在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化
},
created() { 创建// 这是遇到的第二个生命周期函数
// console.log(this.msg)
// this.show()
// 在 created 中，data 和 methods 都已经被初始化好了！
// 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
},
beforeMount() { 即将挂载// 这是遇到的第3个生命周期函数，表示模板已经在内存中编译完成了，但是尚未把模板渲染到页面中，此时，页面还是旧的。
// console.log(document.getElementById('h3').innerText)
// 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
},
mounted() { 挂载// 这是遇到的第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
// console.log(document.getElementById('h3').innerText)
// 注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动
//肉果要通过某些插件操作页面上的DOM节点，最早要在mounted中进行。只要执行力mounted,就表示整个Vue实例已经初始化完毕，
//此时，组件已经脱离了创建阶段，进入到运行阶段。
},
// 接下来的是运行中的两个事件
beforeUpdate() { 更新前// 这时候，表示 我们的界面还没有被更新【数据被更新了吗？ 数据肯定被更新了】
/* console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
console.log('data 中的 msg 数据是：' + this.msg) */
// 得出结论： 当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步
},
updated() { 更新
console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
console.log('data 中的 msg 数据是：' + this.msg)
// updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
},
beforeDestroy(){ 销毁前
/* 当执行beforeDest钩子函数的时候，Vue实例就已经从运行阶段，进入到销毁阶段;
当执行beforeDe的时候，实例身上所有data和所有methods,以及过滤器，指令...都处于可用状态，此时，还没有真正执行销毁过程 */
},
destroyed(){ 完全销毁
/* 当执行到destroyed函数的时候，组件已经完全销毁了，此时组件中所有的数据，方法，指令，过滤器，都已经不可用了。 */
}
});
</script>
十：使用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(){
})
<template>
<!-- 所有的内容要被根节点包含起来 -->
<div id="home">
首页组件
<button @click="getData()">请求数据</button>
<hr>
<br>
<ul>
<li v-for="item in list">
{{item.title}}
</li>
</ul>
</div>
</template>
<script>
export default{
data(){
return {
msg:'我是一个首页组件msg',
flag:true,
list:[]
}
},
methods:{
getData(){
//请求数据
var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
this.$http.get(api).then((response)=>{
console.log(response);
//注意this指向
this.list=response.body.result;
},function(err){
console.log(err);
})
}
},
mounted(){ /*生命周期函数*/
this.getData();
}
}
</script>
十一：使用vue-axios请求数据
1.安装vue-axios
cnpm install axios --save
2.哪里使用哪里引入
import Axios from 'axios'
<script>
import Axios from 'axios';
export default{
data(){
return {
list:[]
}
},
methods:{
getData(){
var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
Axios.get(api).then((response)=>{
this.list=response.data.result;
}).catch((error)=>{
console.log(error);
})
}
},
mounted(){ /*生命周期函数*/
this.getData();
}
}
</script>
十二：组件使用
1.在script标签内引入组件
2. 在components内挂载组件
3.在模板中使用组件
<template>
<div id="app">
<v-home></v-home><!--在模板中使用组件 -->
<v-news></v-news>
</div>
</template>
<script>
//引入组件
import Home from './components/Home.vue';
import News from './components/News.vue';
export default {
data () {
return {
msg:'你好vue'
}
},
components:{ /*前面的组件名称不能和html标签一样*/
'v-home':Home, //挂载组件
'v-news':News
}
}
</script>
十三：父组件给子组件传值 父组件给子组件传方法
1. 父组件调用字组件时候，绑定动态属性
<v-header :title="title"></v-header>
2.在子组件里面通过props接收父组件传过来的数据
props:['title']
父组件代码：
<template>
<div id="home">
<v-header :title="title" :homemsg='msg' :run="run" :home="this"></v-header>
<hr>
首页组件
</div>
</template>
<script>
import Header from './Header.vue';
export default{
data(){
return {
msg:'我是一个home组件',
title:'首页111'
}
},
components:{
'v-header':Header
},
methods:{
run(data){
alert('我是Home组件的run方法'+data);
}
}
}
</script>
子组件代码：
<template>
<div>
<h2>我是头部组件--{{title}}---{{homemsg}}</h2>
<button @click="run('123')">执行父组件的方法</button>
<button @click="getParent()">获取父组件的数据和方法</button>
</div>
</template>
<script>
export default{
data(){
return{
msg:'子组件的msg'
}
},
methods:{
getParent(){
this.home.run()
}
},
props:['title','homemsg','run','home']
}
</script>
十四：路由使用
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 },
<!-- 属性1 是 path， 表示监听 哪个路由链接地址；
属性2 是 component， 表示，如果 路由是前面匹配到的 path ，则展示 component 属性对应的那个组件
注意： component 的属性值，必须是一个 组件的模板对象， 不能是 组件的引用名称
-->
{ path: '*', redirect: '/home' } <!-- 默认跳转路由 -->
]
3、实例化VueRouter
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
4、挂载
new Vue({
el: '#app',
router，
render: h => h(App)
})
5 、根组件的模板里面放上这句话
<!-- vue-router提供的占位符 将来，路由规则，匹配到的组件，就会展示到这个 router-view 中去-->
<router-view></router-view>
<!-- <router-view></router-view> 外层可以包裹 <transition>设置动画-->
6、路由跳转
<!--router默认渲染为a标签，使用tag属性可以更改默默认a标签 -->
<router-link to="/foo" tag="span">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
7.1.this.$router.go(val) => 在history记录中前进或者后退val步，当val为0时刷新当前页面。
2.this.$router.push(path) => 在history栈中添加一条新的记录。
十五：动画
1.使用transition元素，把需要被动画控制的元素包裹起来
<transition mode="out-in"> <!-- mode="out-in是动画先出后进" -->
<p>被控制元素</p>
</transition>
2.自定义两组样式，来控制 transition 内部的元素实现动画
<style>
/* v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入 */
/* v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素 动画已经结束了 */
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(150px);
}
/* v-enter-active 【入场动画的时间段】 */
/* v-leave-active 【离场动画的时间段】 */
.v-enter-active,
.v-leave-active{
transition: all 0.8s ease;
}
</style>
3.修改动画v-前缀 transition加入name属性
<transition name="my">
<p>被控制元素</p>
</transition>
样式里面v-改完自定义名字
<style>
.my-enter,.my-leave-to{opacity: 0;}
.my-enter-active,.my-leave-active{transition: all 0.8s ease;}
</style>
4.使用animate库实现动画，用npm安装看api
<transition enter-active-class="animated bounceIn"
leave-active-class="animated bounceOut">
<h3 v-if="flag">这是一个H3</h3>
</transition>
5.动画钩子函数
+1：定义 transition 组件以及三个钩子函数：
<div id="app">
<input type="button" value="切换动画" @click="isshow = !isshow">
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter">
<div v-if="isshow" class="show">OK</div>
</transition>
</div>
+2. 定义三个 methods 钩子方法
<script>
methods: {
// 注意： 动画钩子函数的第一个参数：el，表示 要执行动画的那个DOM元素，是个原生的 JS DOM对象
// 大家可以认为 ， el 是通过 document.getElementById('') 方式获取到的原生JS DOM对象
beforeEnter(el){
// beforeEnter 表示动画入场之前，此时，动画尚未开始，可以 在 beforeEnter 中，设置元素开始动画之前的起始样式
// 设置小球开始动画之前的，起始位置
el.style.transform = "translate(0, 0)"
},
enter(el, done){
// 这句话，没有实际的作用，但是，如果不写，出不来动画效果；
// 可以认为 el.offsetWidth 会强制动画刷新
el.offsetWidth
// enter 表示动画 开始之后的样式，这里，可以设置小球完成动画之后的，结束状态
el.style.transform = "translate(150px, 450px)"
el.style.transition = 'all 1s ease'
// 这里的 done， 起始就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用
done()
},
afterEnter(el){
// 动画完成之后，会调用 afterEnter
// console.log('ok')
this.flag = !this.flag
}
}
</script>
十六：使用ref获取DOM元素和组件
<h3 id="myh3" ref="myh3">哈哈哈， 今天天气太好了！！！</h3>
<script>
methods:{
console.log(this.$refs.myh3.innerText
}
</script>
