vue 笔记暂存
目录
1：什么是Vue.js
2：MVC和MVVM。
3：为什么要学习前段框架
4：框架和库的区别
5：怎么使用Vue。
6：常见的Vue指令
7: 五大事件修饰符
8：在vue中使用class样式
9：使用内联样式
10：v-for指令
11：v-if和v-show指令
小技巧：
注意：
总结：
1：什么是Vue.js
1.1： Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex）
1.2：Vue.js 是前端的**主流框架之一**，和Angular.js、React.js 一起，并成为前端三大主流框架！
1.3： Vue.js 是一套构建用户界面的框架，**只关注视图层**，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）
2：MVC和MVVM（背诵）
前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；
3：为什么要学习流行框架
企业为了提高开发效率：在企业中，时间就是效率，效率就是金钱。
提高开发效率的发展历程：原生JS -> Jquery之类的类库（不断操作兼容性） -> 前端模板引擎(不断操作dom元素) -> Angular.js / Vue.js（能够帮助我们减少不必要的DOM操作；提高渲染效率；双向数据绑定的概念【通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了】）
+ 在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑；
4：框架和库的区别
4.1： 框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。
- node 中的 express；
4.2： 库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。
- 1. 从Jquery 切换到 Zepto
- 2. 从 EJS 切换到 art-template
5：怎么使用Vue；
5.1：导包
5.2：创建Vue对象。VM调度这，配置对象。
5.3：插值表达式{{}}.
5.3：插值表达式{{}}.
6：常见的指令
6.1：v-cloak 解决插值表达式的闪烁问题。原理是标签的显示隐藏。
6.2：v-text 用来实现数据。
6.3: v-html 用来展示html文本
6.4：v-bind: 是Vue中，提供用于绑定属性的指令。
v-bind:可以简写成：
6.5：v-on Vue中提供了v-on：事件绑定机制。
v-on：可以简写成@
6.6：v-model 双向数据绑定。
v-mdoel可以实现model和view的双向绑定 v-model只能用在表单元素中 。
input(radio, text, address, email....) select checkbox textarea
区别：
1：v-text：没有插值表达式闪烁的问题。
2: v-text会覆盖元素内容。但是插值表达式只会修改插值表达式，不会把整个内容覆盖。
7：五大事件修饰符
事件修饰符：
.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身（比如不是子元素）触发时触发回调
.once 事件只触发一次
8：在Vue中使用使用class样式
1. 数组
<h1 :class="['red', 'thin']">这是一个邪恶的H1</h1>
2. 数组中使用三元表达式
<h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1>
3. 数组中嵌套对象
<h1 :class="['red', 'thin', {'active': isactive}]">这是一个邪恶的H1</h1>
4. 直接使用对象
<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1>
9：使用内联样式
1. 直接在元素上通过 `:style` 的形式，书写样式对象
<h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1>
2. 将样式对象，定义到 `data` 中，并直接引用到 `:style` 中
+ 在data上定义样式：
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}
+ 在元素中，通过属性绑定的形式，将样式对象应用到元素中：
<h1 :style="h1StyleObj">这是一个善良的H1</h1>
3. 在 `:style` 中通过数组，引用多个 `data` 上的样式对象
+ 在data上定义样式：
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
h1StyleObj2: { fontStyle: 'italic' }
}
+ 在元素中，通过属性绑定的形式，将样式对象应用到元素中：
<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>
10：v-for遍历
1：遍历数组
2：遍历对象数组
3：遍历对象
4：遍历数组
key属性添加，如果出现错误的话，key的值是字符串或者数值。
11：v-if和v-show指令
v-if的特点是：每次都会重新删除或者创建元素
v-for的特点是：每次不会进行DOM的删除或者创建，只是切换元素的状态。
性能上：v-if有较高的性能消耗 ，v-show有较高的初始的渲染消耗
小技巧
1：!(英文)+点击enter或者Tab键快速生成基本的代码。
2：div#app直接点击enter生成div标签
注意 ：
1：在vm实例中，如果想获取data上的数据，或者想要调用methods中国你的方法，必须通过this.属性名字或者this.方法名，来进行访问，这里的this就表示我们new出来的vm实例对象。
2：箭头函数：用来解决内部this指向外部this的问题。
总结：
<!-- 1. MVC 和 MVVM 的区别 -->
<!-- 2. 学习了Vue中最基本代码的结构 -->
<!-- 3. 插值表达式 v-cloak v-text v-html v-bind（缩写是:） v-on（缩写是@） v-model v-for v-if v-show -->
<!-- 4. 事件修饰符 ： .stop .prevent .capture .self .once -->
<!-- 5. el 指定要控制的区域 data 是个对象，指定了控制的区域内要用到的数据 methods 虽然带个s后缀，但是是个对象，这里可以自定义了方法 -->
<!-- 6. 在 VM 实例中，如果要访问 data 上的数据，或者要访问 methods 中的方法， 必须带 this -->
<!-- 7. 在 v-for 要会使用 key 属性 （只接受 string / number） -->
<!-- 8. v-model 只能应用于表单元素 -->
<!-- 9. 在vue中绑定样式两种方式 v-bind:class v-bind:style -->
目录：
1：全局过滤器的使用
2：局部过滤器
3：自定义键盘码
4：自定义指令
5：自定义私有指令
6：Vue生命周期。
7：网络请求
1：全局过滤器的使用
Vue.filter("msgFormat", function(msg, arg){
return msg.replace(/单纯/g, arg);
});
Vue.filter("test", function (msg) {
return msg + "======";
});
html中：
<p>{{ msg | msgFormat("疯狂") | test}}</p>
2:局部过滤器
var vm = new Vue({
el: "#app"，
data:{
},
methods:{
},
// 这是私有过滤器
filters:{
},
});
3：按键修饰符号
.enter.tab.delete(捕获“删除”和“退格”键).esc.space.up.down.left.right
自定义全局键盘码：
Vue.config.keycodes.f2 = 113;
4:自定义全局指令
// 使用 Vue.directive() 定义全局的指令 v-focus
// 其中：参数1 ： 指令的名称，注意，在定义的时候，指令的名称前面，不需要加 v- 前缀,
// 但是： 在调用的时候，必须 在指令名称前 加上 v- 前缀来进行调用
// 参数2： 是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
Vue.directive('focus', {
// 一般进行一些样式的操作
bind: function (el) { // 每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次
// 注意： 在每个 函数中，第一个参数，永远是 el ，表示 被绑定了指令的那个元素，这个 el 参数，是一个原生的JS对象
// 在元素 刚绑定了指令的时候，还没有 插入到 DOM中去，这时候，调用 focus 方法没有作用
// 因为，一个元素，只有插入DOM之后，才能获取焦点
// el.focus()
},
// 一般进行一些js操作。
inserted: function (el) { // inserted 表示元素 插入到DOM中的时候，会执行 inserted 函数【触发1次】
el.focus()
// 和JS行为有关的操作，最好在 inserted 中去执行，放置 JS行为不生效
},
updated: function (el) { // 当VNode更新的时候，会执行 updated， 可能会触发多次
}
})
一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
-
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 -
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。 -
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
我们会在稍后讨论渲染函数时介绍更多 VNodes 的细节。
-
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。 -
unbind：只调用一次，指令与元素解绑时调用。
5：自定义私有的指令
var vm = new Vue({
el : "#app",
data : {
},
methods : {
},
// 自定义私有的过滤器
filter : {
},
// 自定义私有的指令
directives : {
"fontweight" : {
bind : function (el , binding) {
el.style.color = binding.value;
}
},
},
});
6：Vue的生命周期
beforeCreate() { // 这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它
// console.log(this.msg)
// this.show()
// 注意： 在 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中操作，
// 此时已经脱离了创建阶段，到了运行阶段。
},
// 接下来的是运行中的两个事件
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 数据已经保持同步了，都是最新的
}
当执行beforeDestory钩子函数的时候，Vue实例从运行阶段进入到销毁阶段
当执行beforeDestory钩子函数的时候，Vue实例身上所有的data和methods和过滤器和指令都处于可以利用的状态。此时还没有真正的销毁。
当执行Destoryed钩子函数的时候，Vue实例身上所有的data和methods和过滤器和指令都处于不利用的状态。
7：vue-resource
[vue-resource 实现 get, post, jsonp请求](https://github.com/pagekit/vue-resource)
除了 vue-resource 之外，还可以使用 `axios` 的第三方包实现实现数据的请求
1. 之前的学习中，如何发起数据请求？
2. 常见的数据请求类型？ get post jsonp
3. 测试的URL请求资源地址：
+ get请求地址： http://vue.studyit.io/api/getlunbo
+ post请求地址：http://vue.studyit.io/api/post
+ jsonp请求地址：http://vue.studyit.io/api/jsonp
小技巧：
1：在Vue中尽量不要使用jQuery。
2：在Vue中，使用时间绑定机制，为元素指定处理函数的时候，如果添加了小括号，就可以传递参数了。
3：循环遍历：foreach some filter indexOf.
4：数组添加是push，删除元素是splic。
注意：
1：在Vue中，已经实现了数据的双向绑定，每当我们修改了data的数据，Vue会默认监听到数据的变动，自动把最新的数据，应用到页面上。
目录：
1：Vue-resource中的全局配置。
2：Vue动画2部曲
3：animate动画
4：钩子函数动画
5：组件三部曲，推荐使用template标签来创建组件模板
1：Vue-resource中的全局配置。
1. 发送get请求：
getInfo() { // get 方式获取数据
this.$http.get('http://127.0.0.1:8899/api/getlunbo').then(res => {
console.log(res.body);
})
}
2. 发送post请求：
postInfo() {
var url = 'http://127.0.0.1:8899/api/post';
// post 方法接收三个参数：
// 参数1： 要请求的URL地址
// 参数2： 要发送的数据对象
// 参数3： 指定post提交的编码类型为 application/x-www-form-urlencoded
this.$http.post(url, { name: 'zs' }, { emulateJSON: true }).then(res => {
console.log(res.body);
});
}
3 发送JSONP请求获取数据：
jsonpInfo() { // JSONP形式从服务器获取数据
var url = 'http://127.0.0.1:8899/api/jsonp';
this.$http.jsonp(url).then(res => {
console.log(res.body);
});
}
4：全局配置。
Vue.http.options.emulateJSON = true;
Vue.http.options.root = '/root';
2：Vue动画
动画2部曲
1：transition标签包裹需要动画的标签
<transition>
<h1 v-if="flag"> 这是一个H1标签</h1>
</transition>
2. 自定义两组样式，来控制 transition 内部的元素实现动画
<style>
/* v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入 */
/* v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素 动画已经结束了 */
.v-enter,
.v-leave-to {
opacity: 0;
}
/* v-enter-active 【入场动画的时间段】 */
/* v-leave-active 【离场动画的时间段】 */
.v-enter-active,
.v-leave-active{
transition: all 0.8s ease;
}
</style>
2：动画的name，来修改前缀
3：使用animate来做动画
4：钩子函数动画
5：组件化开发
定义Vue组件
什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；
组件化和模块化的不同：
+ 模块化： 是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；
+ 组件化： 是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；
1：组件三部曲
// 1：使用Vue.extend 来扩展组件模板对象 extend：扩展
var com = Vue.extend({
template : "<h3>自定义组件</h3>" ,
});
// 2：注册组件
// Vue.component("MyCustomCom", com);
Vue.component("my-custom-com", com);
3：使用自定义组件
<my-custom-com></my-custom-com>
2:第二种创建组件方式
组件的名字，组件对象。
Vue.component("my-custom-com2", {
// template, 模板 extend 扩展。扩展组件模板
template : "<h1>自定义创建组件方式2</h1>",
});
3:template标签创建组件 推荐使用
Vue.component("my-custom-com3", {
template : "#com3",
})
<template id="com3">
<div>
<h1>这是通过template标签创建的组件</h1>
</div>
</template>
4:组件中的数据。
1：必须是一个function
2：必须返回一个对象
3：和实例中的msg相同。
小技巧：
注意：