
前端框架Vue学习
从0开始学习Vue
悠玄烛远
一页,一书,纸上觉深浅。半杯,半盏,饮中悟乾坤。
展开
-
【前端框架学习】结合Node手写JSONP服务器剖析JSONP原理
摘要原创 2022-02-17 11:00:52 · 709 阅读 · 0 评论 -
【前端框架学习】vue-resource实现get、post、jsonp请求
摘要原创 2022-02-07 11:54:25 · 1738 阅读 · 0 评论 -
【前端框架学习】生命周期函数 中 组件运行与销毁时的钩子函数
摘要原创 2022-01-30 10:31:55 · 6210 阅读 · 0 评论 -
【前端框架学习】生命周期函数 及组件创建时的钩子函数
摘要原创 2022-01-29 11:19:56 · 404 阅读 · 0 评论 -
【前端框架学习】指令函数的简写
摘要原创 2022-01-23 11:41:51 · 423 阅读 · 0 评论 -
【前端框架学习】定义私有指令
摘要原创 2022-01-23 11:35:13 · 479 阅读 · 0 评论 -
【前端框架学习】自定义设置颜色的指令
摘要原创 2022-01-22 13:05:49 · 1161 阅读 · 0 评论 -
【前端框架学习】自定义全局指令让文本框获取焦点
摘要原创 2022-01-21 11:43:23 · 1097 阅读 · 0 评论 -
【前端框架学习】自定义按键修饰符
摘要原创 2022-01-20 11:47:09 · 774 阅读 · 0 评论 -
【前端框架学习】字符串的padStart方法法使用
摘要原创 2022-01-19 12:43:04 · 933 阅读 · 0 评论 -
【前端框架学习】定义私有过滤器
摘要原创 2022-01-19 12:32:14 · 204 阅读 · 0 评论 -
【前端框架学习】定义格式化时间的全局过滤器
摘要原创 2022-01-18 11:25:51 · 362 阅读 · 0 评论 -
【前端框架学习】vue中全局过滤器的基本使用
摘要原创 2022-01-17 11:26:10 · 1095 阅读 · 0 评论 -
【前端框架学习】 VUE调试工具 vue-devtools的安装
摘要原创 2022-01-16 16:50:26 · 364 阅读 · 0 评论 -
【前端框架学习】实验三 品牌案例管理
摘要原创 2022-01-16 16:59:44 · 219 阅读 · 0 评论 -
【前端框架学习】知识点总结1
<!-- 1. MVC和MVVM的区别--><!-- 2.学习了Vue中最基本代码的结构--><!-- 3.插值表达式 v-cloak v-text v-htm1 v-bind (缩写是: ) v-on (缩写是@ ) v-mode 1 v-for v-if v-show --><!-- 4.事件修饰符 : . stop .prevent .capture .self .once--&.原创 2022-01-15 14:30:14 · 260 阅读 · 0 评论 -
【前端框架学习】v-if和v-show的使用
一般来说,v-if有更高的切换性能消耗,而v-show有更高的初始渲染消耗。因此,如果需要频繁切换,最好不要使用v-if,此时使用v-show较好;如果一个元素在创建之后,运行时条件不大可能改变,此时使用 v-if会更好。写法一:<body> <div id="app"> <input type="button" value="toggle" @click="toggle()"> <h3 v-if="...原创 2022-01-15 14:16:23 · 357 阅读 · 0 评论 -
【前端框架学习】v-for指令和key属性
1.迭代数组<p v-for="item in list">{{item}}</p>data: { list: [1, 2, 3, 4, 5, 6]}当然,我们需要用到数组中某一项的索引值时,可以写:<p v-for="(item, i) in list">索引值是{{i}}----每一项的值是{{item}}</p>除了循环普通数组以外,我们也可以循环复杂数组:<p v-for="user in list2"&原创 2022-01-15 10:53:31 · 833 阅读 · 0 评论 -
【前端框架学习】vue中通过属性绑定为元素设置class类样式
一、使用class样式 <style> /*颜色*/ .red { color: red; } /*字体宽度*/ .thin { font-weight: 200; } /*字体倾斜*/ .italic { font-style: italic; } /原创 2022-01-14 16:22:25 · 593 阅读 · 0 评论 -
【前端框架学习】实验二 使用v-model实现简易计算器
方法一:<body> <div id="app"> <input type="text" v-model='n1'> <select v-model='opt'> <option value="+">+</option> <option value="-">-</option> <optio原创 2022-01-14 13:36:04 · 385 阅读 · 0 评论 -
【前端框架学习】v-model与双向数据绑定
v-model是唯一一个能够实现双向数据绑定的指令。v-bind只能实现数据的单项绑定,从M层自动绑定到v中去,无法实现数据的双向绑定。 <div id='app'> <h4>{{message}}</h4> <input type="text" :value="message"> </div> <script src="https://cdn.jsdelivr.net/npm原创 2022-01-14 12:09:50 · 809 阅读 · 0 评论 -
【前端框架学习】v-on的事件修饰符的使用
1.先来看一个有关事件修饰符的表格:名称 含义 .stop 阻止冒泡 .prevent 阻止默认事件 .capture 添加事件侦听器时使用事件捕获模式 .self 只在当事件在该元素本身(比如不是子元素)出发时发生回调 .once 事件只触发一次 2.一个实例首先来观察一下这个例子,当点击按钮时,会触发哪些事件。<body> <div id='app'> <div cla..原创 2022-01-14 11:20:47 · 276 阅读 · 0 评论 -
【前端框架学习】第一次实验 跑马灯效果的制作
一.什么是跑马灯效果每隔一段时间,排在首位的字符会被后一个字符所代替,而首位字符会被移到队尾。二.实验过程1.首先创建控制区域与vue实例: <div id="app"> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var vm = new Vue({原创 2022-01-13 18:17:29 · 1597 阅读 · 0 评论 -
【前端框架学习】使用v-on定义Vue中的事件
1.使用传统js的方式定义事件传统的js中通常会操作DOM来定义事件。<div id="app"> <input type="button" id='btn'></div><script> //传统js方式定义事件 document.getElementById('btn').onclick = function(){ alert('hello,world!'); }</script&原创 2022-01-13 16:01:57 · 423 阅读 · 0 评论 -
【前端框架学习】v-bind指令
1.v-bind是vue中提供的用户绑定属性的指令。其中,一般格式为<!-- 仅看v-bind的部分 --><input type="button" value="btn" v-bind:title="message">2.v-bind会把“ ”中的值当作js代码去解析执行,即当作了表达式,所以在v-bind中可以写合法的js表达式。实际上在添加的时候,可以在 message 后面任意加上字符串,即:<input type="button" value原创 2022-01-13 14:13:13 · 448 阅读 · 0 评论 -
【前端框架学习】v-clock、v-html、v-text的使用
ddd.v-clock使用v-clock能够解决插值表达式闪烁的问题css代码 <style> [v-clock] { display: none; } </style>页面代码 <div id="app"> <!-- 使用v-clock能够解决插值表达式闪烁的问题--> <p v-clock>{{message}}&原创 2022-01-13 13:49:45 · 1189 阅读 · 1 评论 -
【前端框架学习】vue.js基本代码和MVVM之间的关系
1.导入相关的包文件,这里采用cdn的方式<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>2.创建一个Vue实例当导入包之后,在浏览器的内存中多了Vue的构造函数 <script> //2.创建一个Vue实例 //当导入包之后,在浏览器的内存中多了Vue的构造函数 var vm = new Vue({原创 2022-01-13 12:44:54 · 207 阅读 · 0 评论 -
【前端框架学习】MVC与MVVM
MVC是后端的分层开发概念。MVVM是前端视图层的概念。MVVM是前端视图层的分成开发思想,主要把每个页面,分成了M、V和VM。其中,VM是MVVM思想的核心,因为VM是M和V之间的调度者。...原创 2022-01-13 12:27:35 · 1422 阅读 · 0 评论 -
【前端框架学习】框架和库的区别
框架:一套完整的解决方案,对整个项目的侵入性比较大,如果项目要更换框架,则需要重新架构整个项目。例如:node.js中的express,Java后端中的springboot库(插件):提供某一个小的功能,对项目的侵入性较小,如果某个库无法满足某些需求,可以很容易的切换到其他库实现需求。例如:从jQuery切换到Zepto,从EJS切换到art-template。...原创 2022-01-13 11:52:11 · 238 阅读 · 0 评论