前端框架 Vue.js
文章平均质量分 60
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。
赵书正
总结知识,相互学习,一起进步。
展开
-
Vuejs013---关于跨域请求的处理(ajax)
目录1.关于跨域请求的处理(1)举个栗子2.跨域请求的常用处理方式:(1)代理方式(2)CORS 方式(3)jsonp 方式jsonp 方式代码片段:1.关于跨域请求的处理同源:同源是指在一般情况下,浏览器发出请求访问的资源都是在相同的协议、域名、和端口号下的,这样的请求即为默认同源策略的访问。 由于浏览器的同源策略,凡是发送请求 url 的协议、域名、端口号三者之间任意一个(或者多个)与当前页面地址不同即为跨域。 在实际项目开发中,使用的当前页面有可能会原创 2021-08-25 20:57:45 · 171 阅读 · 0 评论 -
Vuejs012---vuejs 的 ajax 请求
一:vuejs 的 ajax 请求 vuejs 本身不支持发送 ajax 请求的 需要使用插件来实现 vue-resource 插件 axios 插件1.1get 和 post 请求使用 vue-resource 插件来实现 get 和 post 请求 vuejs 将请求发送到后台,后台进行请求处理 vue-resource的get请求<%@ page contentType="text/html;charset=UTF-8" language="j..原创 2021-08-25 20:36:59 · 395 阅读 · 0 评论 -
Vuejs011---vuejs 对象的生命周期
一:生命周期简介 生命周期是指 Vuejs 对象从创建到销毁的全过程。1.各个阶段详解:生命周期 1:创建阶段1.new Vue(): 执行代码 var vm = new Vue({}),表示创建一个 Vue 对象(实例)。 2.Init(Events&Lifecycle):执行完以上代码后步入到对象初始化的前期阶段,表示通过以上代码我们创建了 Vuejs 对象,此时,在新建的对象身上,具备了一些生命周期相关的函数(生命周期的钩子函数)和默认的事件,但..原创 2021-08-24 10:35:33 · 255 阅读 · 0 评论 -
Vuejs010---自定义指令
1-1 自定义全局指令指令与属性相似,是对指定元素样式或行为的赋予。 我们可以在实际项目开发中自定义一些我们所需的指令来有效的管 理元素。 在页面中自定义的全局指令,可以为每一个 vm 对象中的元素提供服务,只要 vm 中的标签引用了全局指令那么一定会即时生效,一般情况下我们普遍做的都是自定义全局指令来管理元素。值得一提的是自定义指令需要经常搭配 vuejs 中的钩子函数来进行操作。在我们学习完指令之后,将在下一个章节(对象的生命周期)对钩子函数进行详细的学习。自定义全局指令的语法原创 2021-08-24 10:05:26 · 79 阅读 · 0 评论 -
Vuejs009---过滤器
第一章 过滤器过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单的函数。 在实际项目开发中根据实际的需求,可以自己编写所需要的过滤器。 过滤器经常用在数据所需的格式化时使用: 例如字符串的格式化 以及日期时间的格式化等等 过滤器最大的作用就是体现其复用性,如果我们在前端处理的某些文本信息每一次都需要经过重复的特殊处理,那么我们一定是要编写一个过滤器来使用。1-1 全局过滤器的使用全局过滤器指的是所有 vm 对象都能共享使用的过滤器。 过.原创 2021-08-24 09:40:28 · 96 阅读 · 0 评论 -
Vuejs008---学生信息管理系统
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <!-- 引入vuejs框架 --> <script src="./lib/vue-2.4.0.js"></script> <style> .hFon.原创 2021-08-24 09:10:29 · 924 阅读 · 0 评论 -
Vuejs007---v-if 指令的应用
一:v-if 指令和 v-show 指令的使用和区别案例 1:v-if 的使用 案例 2:v-show 的使用 简单的比较 v-if 指令和 v-show 指令,效果是一模一样的 点击浏览器(F12)中的查看器观察显示页面元素信息 如果 flag 为 true,观察到的结果是一致的。如果 flag 为 false,观察到的结果是不同的其中 v-if 中的元素是本身就没有的,v-show 中的元素是存在的,只是 通过 false 属性值,系统为该元素新增了 di..原创 2021-08-24 09:07:16 · 199 阅读 · 2 评论 -
Vuejs006---v-for 指令
目录(1)v-for 指令的基本使用案例 1:遍历字符串数组案例 2:遍历对象数组案例 3:遍历对象的属性和属性值案例 4:遍历整型数字(2)v-for 指令使用注意事项(1)v-for 指令的基本使用 案例 1:遍历字符串数组 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document&原创 2021-08-24 08:59:03 · 323 阅读 · 0 评论 -
Vuejs005---使用 class 样式
使用 class 样式使用 vuejs 控制样式,会使样式变化的操作更加的灵活 (1)class 样式的使用 案例 1:传递一个 class 样式的数组,通过 v-bind 做样式的绑定 该形式与之前的形式没有太大的区别 :class="[样式 1,样式 2]" 案例 2:通过三目(元)运算符操作以上数组 boolean?true 执行 :false 执行 案例 3:使用对象(json) 来表达以上三目(元)运算符的操作 {样式:flag} 案例 4:原创 2021-08-24 08:40:18 · 414 阅读 · 0 评论 -
Vuejs004---v-model 指令实现双向数据绑定
目录一:使用 v-model 指令实现双向数据绑定1. v-bind2.双向数据绑定v-model一:使用 v-model 指令实现双向数据绑定1. v-bind 我们可以对 v-bind 的绑定数据的形式得出一个结论,v-bind 只能 实现数据的单向绑定,从模型(M)绑定到视图(V),使用 VM 将数 据去渲染视图,但是我们无法通过该形式实现数据的双向绑定。 2.双向数据绑定v-model在实际项目开发中,不仅仅只是将模型准确的渲染到视图中...原创 2021-08-24 08:29:12 · 583 阅读 · 0 评论 -
Vuejs003---使用 v-on 指令触发事件
(1)v-on 的基本使用 v-on:click="fun1"的形式来绑定事件 ,相当于原生 js 中的 onclick 。 v:bind-->: ,v-on-->@ (2)事件修饰符的使用 a.stop <div style="width:200px;height:200px;background-color:red" @click="fun1"> <div style="width:...原创 2021-08-22 19:14:57 · 373 阅读 · 0 评论 -
Vuejs 002---第二章 Vuejs 基础语法
目录2-1 第一个 Vuejs 案例_HelloWorld2-2指令属性的基本使用(v-cloak ,v-text,v-html,v-bind)2-1 第一个 Vuejs 案例_HelloWorld1. 插值表达式:<p>{{str1}}</p>2. varvm=newVue({ });当Vuejs框架包导入进来之后,在浏览器缓存中,就已经存在了一个Vue框架的构造函数。我们new出来的这个vm对象,就是页面中对于模型和视图(数据和页...原创 2021-08-22 18:03:37 · 137 阅读 · 0 评论 -
Vuejs001---第一章Vuejs 概述
目录1-1 什么是 Vuejs1-2 为什么要学习 Vuejs1-3MVC 和 MVVM 的区别1-1 什么是 Vuejs1. Vuejs 是一套构建用户界面的框架,它只关注视图层的内容,它是 前端的主流框架之一。2. 前端 3 大主流框架:Angular.js ,React.js ,Vue.js3. 前端框架主要负责的是 MVC 中的 V 的这一层,主要的工作就是和 界面打交道,主要是用来对页面中的数据进行处理,以及制作前端页 面相关的特效及动画。.原创 2021-08-22 17:08:23 · 126 阅读 · 2 评论