目录
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：插值表达式{{}}.
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 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
-
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部曲<transition> <h1 v-if="flag"> 这是一个H1标签</h1> </transition>
1：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. 自定义两组样式，来控制 transition 内部的元素实现动画
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相同。
小技巧：
注意：
标签：Vue,自定义,暂存,元素,笔记,vue,指令,组件,data From： https://www.cnblogs.com/zyzmlc/p/17578104.html