- 博客(29)
- 收藏
- 关注
RSS订阅原创 vue-x
一、vuex简介1.vuex是什么？ 概念：专⻔在vue中实现集中式状态（数据）管理的⼀个插件，对vue应⽤中多个组件的共享状态进⾏集中式的管理（读写），也是⼀种组件间的通信⽅式，且适⽤于任意组件间通信2.什么时候使⽤vuex多个组件依赖于同⼀状态来⾃不同组件的⾏为需要变更同⼀状态总结⼀句话：多个组件需要共享数据时二、vuex⼯作原理图三、搭建vuex环境1.创建⽂件 src/store/index.js//引⼊vueimpor...
2021-10-19 19:24:49
332
原创 vue路由
一、嵌套路由（多级路由）1.配置路由规则，使⽤children配置项：routes:[ {path:'/home', //路径 component: Home, //组件 children: [ //通过children配置⼦路由 { path:'message', //此处⼀定不要写：/message component: Message, }, { path:'news', //此处⼀定不要写：/news component: News, }
2021-10-18 16:30:16
136
原创 vue-router
1.路由 （1）路由（route）：就是⼀组key-value的对应关系 （2）路由器（router）：多个路由需要经过路由器的管理 2.vue-router的理解 vue的⼀个插件库，专⻔⽤来实现SPA应⽤ 3.对SPA应⽤的理解 （1） 但⻚⾯web应⽤（single page web application，SPA） （2） 整个应⽤只有⼀个完整的⻚⾯ （3）点击⻚⾯中的导航链接不会刷新⻚⾯，只会做⻚⾯的局部更新 （4） 数据需要通过ajax请求获取 4.路由的
2021-10-15 15:20:14
113
原创 vue组件通信、插槽
一、组件通信1.1⽗组件向⼦组件传值⽗组件向⼦组件传值时通过prop，所有的 prop 都使得其⽗⼦ prop 之间形成了⼀个单向下⾏绑定：⽗级prop 的更新会向下流动到⼦组件中，但是反过来则不⾏。这样会防⽌从⼦组件意外变更⽗级组件的状态，从⽽导致应⽤的数据流向难以理解。额外的，每次⽗级组件发⽣变更时，⼦组件中所有的 prop 都将会刷新为最新的值。这意味着不应该在⼀个⼦组件内部改变 prop。如果这样做了，Vue 会在浏览器的控制台中发出警告。<!DOCTYPE html>&
2021-10-15 15:15:14
129
原创 vue的混合、插件、过滤器和自定义指令
一、混合1.功能：可以把组件共⽤的配置提取成⼀个混⼊对象2.使⽤⽅法：（1）第⼀步定义混合，例如：{data(){...},methods:{...},....}（2）第⼆步使⽤混合，例如：1）全局混⼊：Vue.mixin(xxx)2）局部混⼊：mixing:['xxx']二、插件1.功能：增强Vue2.本质：包含install⽅法的⼀个对象，install的第⼀个参数是Vue，第⼆个参数是插件使⽤者传递的数据3.定义插件：4.对...
2021-10-14 15:19:00
215
原创 vue脚手架
二、脚⼿架2.1介绍1.vue脚⼿架是vue官⽅提供的标准化开发⼯具（开发平台）2.最新的版本是4.x3.⽂档：https://cli.vuejs.org/zh/2.2使⽤步骤第⼀步（仅第⼀次执⾏）：全局安装@vue/clinpm install -g @vue/cli第⼆步：切换到你要创建项⽬的⽬录，然后使⽤命令创建项⽬vue create xxx第三步：启动项⽬(⾸先得进⼊你创建的项⽬)dir xxxnpm run serve三、脚⼿架结构分析
2021-10-13 14:13:11
81
原创 vue中的计算属性、监听属性、组件
一、计算属性1.计算属性的基本使⽤<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2021-10-13 14:04:35
144
原创 vue条件渲染、列表渲染、生命周期
一、条件渲染1.v-if 写法：1）v-if="表达式"2）v-else-if="表达式"3）v-else="表达式"适应于：切换频率较低的场景特点：不展示的DOM元素直接移除注意：v-if可以和v-else-if、v-else⼀起使⽤，但要求解构不能被“打断” <body> <div id="app"> <h2>条件渲染</h2> ...
2021-10-11 15:23:25
450
原创 vue数据绑定、事件处理等
一、数据的绑定vue中有两种数据绑定⽅式（1）单向绑定（v-bind（简写为：））：数据只能从data流向⻚⾯（2）双向绑定（v-model）：数据不仅能从data流向⻚⾯，还可以从⻚⾯流向data 注意：1.双向绑定⼀般都应⽤在表单类元素上（如：input、select...） 2.v-model:value 可以简写为v-model，因为v-model默认收集的就是value的值二、el和data的两种写法总结：1.el有两种写法...
2021-10-09 16:36:01
323
原创 vue简单介绍
一、介绍 1. vue是什么？一套用于构建用户见面的渐进式JavaScript框架构建用户界面：使用某种方式拿到数据，将数据放到合适的位置渐进式：vue可以自底向上逐层应用（既可以构建简单应用，也可以构建一个复杂应用）二、vue与jQuery、原生js对比vue完全的脱离dom操作三、特点: (1)采用组件化开发，提高代码的复用率，并且让代码更好的维护(2)声明式编码，让编码人员无需直接操...
2021-10-08 16:26:11
443
原创 es6中的类、继承
一、类ES6 的class可以看作只是⼀个语法糖，它的绝⼤部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像⾯向对象编程的语法⽽已。 1.构造函数：constructor()⽅法是类的默认⽅法，通过new命令⽣成对象实例时，⾃动调⽤该⽅法。⼀个类必须有constructor()⽅法，如果没有显式定义，⼀个空的constructor()⽅法会被默认添加。 function Animal (name,age){ this.name = ...
2021-10-02 20:42:44
116
原创 es6中Generator函数、Promise函数和Async函数
一、Generator函数1.作用：（1）生成迭代器 （2）异步编程的解决方案异步编程：setTimeout（function（）{}，3000），ajax，nodejs=>文件的操作（IO）、数据库的操作，回调函数能解决异步编程问题2. Generator函数形式上来看，Generator 函数是⼀个普通函数，但是有两个特征。（1）function关键字与函数名之间有⼀个星号；（2）函数体内部使⽤yield表达式，定义不同的内部状态3.异步编程(文件的操...
2021-10-02 13:30:32
179
原创 es6关于Symbol、迭代器的介绍
一、Symbol 1.创建一个Symbollets1=Symbol()s1=>Symbol创建出来的Symbol表示一个独一无二的值，symbol和对象不一样，不能给他添加属性 let s1 = Symbol('foo') //引号里为描述信息 let s2 = Symbol('bar') let s3 = Symbol('head') console.log(typeof ...
2021-10-02 12:48:07
230
原创 es6集合
集合可迭代元素：Array()、Set()、Map()、string、类数组对象 一、Array（）letarr=[]letarr=newArray（） 二、Set（可用来数组去重,是无序的):可以存储任意数据类型，无序，不重复的 1.创建方式构造函数Set（）letset=newSet()//参数是一个可迭代的数据结构，用作初始化...
2021-10-02 12:35:01
212
原创 es6函数拓展、模块化
一、函数拓展 1.函数参数的默认值function add(a,b){ return a+b } add(1) //NaN function add(a,b=10){ return a+b } add(1) //11 2.参数的解构 function add({name,age}){ console.log(a+b) } let obj ...
2021-10-02 12:22:06
115
原创 es6数值拓展
一、数值拓展(用来检测数字)1.Number.isFinite()检测一个数值是否有限let a = 1let r = Number.isFinite(a) //将a添加到Number中 如果a不是数字，直接返回falseconsole.log(r);2.Number.isNaN()let a = 1let r = Number.isNaN(a)console.log(r);3.Number.parseInt()let a = 1...
2021-09-29 09:16:30
112
原创 ES6介绍（变量的声明、结构、字符串的拓展）
一、介绍 ES6是 JavaScript 语⾔的下⼀代标准，在 2015 年 6 ⽉正式发布。它的⽬标，是使得 JavaScript 语⾔可以⽤来编写复杂的⼤型应⽤程序，成为企业级开发语⾔。之前我们学的是ES5，是在2011年发布的。ES6 既是⼀个历史名词，也是⼀个泛指，含义是 5.1 版以后的 JavaScript 的下⼀代标准，涵盖了 ES2015、ES2016、ES2017 等等，⽽ ES2015 则是正式名称，特指该年发布的正式版本的语⾔标准。nodejs对ES6的⽀持很⾼，⽬前...
2021-09-28 19:46:36
138
原创 定位布局、浮动布局、flex布局
布局1.默认文档流：默认文档流就是对页面布局不加任何修饰，元素自动的布局方式特点：1）元素在页面中的显示顺序与元素在代码中出现的顺序是一致的。 2）块级元素独占一行空间，宽度默认为父级的100%，高度由其内容高度所决定。 3）行内元素与其他元素共享一行空间，宽高由其内容所决定。2.浮动布局因为元素有默认的排列方式，想要改变这种布局，使用浮动布局1)float属性取值(如果一个元素添加folat属性，那么这个元素就会成为一个浮...
2021-09-15 15:22:54
936
原创 用js，html，css写代码
1.原生ajax操作（1）初始化对象(XLHttpRequest)varxhr=newXLHttpRequest()（2）建立连接(设置请求行)xhr.open(type,ur)（3）设置请求头xhr.setRequestHeader(key,val)（4）发送请求xhr.send(data)//get:data可以不传；post：data必须传form-data...
2021-09-15 14:52:48
129
原创 如何在html中使用js
1.使用script标签，将js代码写入标签(html和js没有分离)在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间。<script> console.log(Number.MAX_VALUE) var s = 'hello world' var n = 10 var u =undefined var l =null
2021-09-15 14:31:14
7083
原创 Jquery(第三方库)
1.介绍：jQuery是一个Javascript库，是对于ECMAScript、dom、bom的一个浅封装，让用户更方便操作。2.Jquery使用（1）安装：下载源码（建议使用BootCDN）BootCDN jQuery（2）引入：在编辑器中建一个jQuery.js,然后打开BootCDN jQuery链接，选一个打开其网址，将全部代码复制到jQuery.js中，用的时候使用<script src='./Query.js'> </script>标签引入就可以用了（3）
2021-09-09 15:05:32
326
原创 css中的优先级和继承
1.优先级(在所有的选择器中某个选择器定义的规则是否能够胜出（即优先级）取决于三个元素：（1）先考虑权重，权重一样的，后面的样式回覆盖前面的样式（2）!important声明(Importance)在css规则的值末尾添加"!important"能够保证该规则优先其他规则。（3）特性值(权重)通过4个特性值来量化一个选择器Thousands 声明在元素的style属性中。特性值记为1000Hundreds包含在...
2021-09-09 14:34:49
174
原创 css选择器（多选择器、属性选择器、伪类选择器）
1.多选择器（1）逗号选择器<h1>zx</h1> <h2>sd</h2> <h3>gh</h3> <h4>bn</h4> <h5>tu</h5> <div class="text">tyu</div><style> h1,h2,h3,h4,h5,.text{
2021-09-09 14:17:32
600
原创 css选择器（层次选择器）
1.后代选择器 <ul> <li>语文</li> <li>数学</li> <li>英语</li> <li>物理</li> <li>化学</li> <li>政治</li> <li>历史</li> &l
2021-09-08 20:08:07
117
原创 如何在html中使用css
在html中使用css，有三种方法：行内样式、内联样式、外部样式1.行内样式：行内样式可用于为单个元素应用唯一的样式。 将样式写在元素的style属性中，style 属性可包含任何 CSS 属性。<divstyle='color:red;font-sian:20px;'>缺点：1.结构和样式没有分离 2.代码的复用率低 优点：优先级高2.内联样式：将代码写在head标签中的style标签中<sy...
2021-09-08 19:32:35
598
原创 css选择器（核心选择器）
1.什么是 CSS？CSS 指的是层叠样式表* (Cascading Style Sheets) CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作。它可以同时控制多张网页的布局 外部样式表存储在 CSS 文件中*：也称级联样式表。2.CSS 选择器CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。我们可以将 CSS 选择器分为五类：核心选择器：标签选择器、类选择器、id选择器、普遍选择器 层次选择器：后代选择器、子代选择器、
2021-09-08 15:09:41
93
原创 html表单
一.html表单HTML 表单用于搜集不同类型的用户输入1.什么是Form？ Form表单主要用于用户与Web应用程序进行数据的交互，它允许用户将数据发给Web应用程序，网页也可以拦截数据的发送以便自己使用。form通常由一到多个表单控件组成，这些表单控件是单行/多行文本框，下拉菜单，按钮，复选框，单选按钮，使用表单控件时一般要配合label标签，用于描述其目的。2.Form标签可用属性如下（1）action属性： 用于处理表单信息的应用程序的地址。（2）method属...
2021-08-20 14:42:14
1103
原创 html介绍（一）
1.html全程：（1）是一种超文本标记语言（超文本是非文字元素），全称为Hyper Text Markup Language；它是前端三要素之一。（2）作用：用来搭建页面的骨架（3） html文件的后缀名：.html 或者 .htm2.html的文档结构（1）用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如unix， windows等)。将需要表达的信息在编辑器上按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别...
2021-08-17 15:38:50
414
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人