目录
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