舒小喵的blog

never say never


  • 首页

  • 分类

  • 标签

  • 归档

  • 关于

vue2-01

发表于 2019-12-08 | 分类于 Web 前端 , 前端进阶 , 前端框架 , Vue , Vue2
字数统计: 1.5k | 阅读时长 ≈ 5

说明

这一部分是针对于vue1进行的一些补充。这是看了视频VUE全家桶做的一些补充。

  • 声明式编程:
    • 模板的结构和最终显示的效果基本一致

模板语法

指令

  • v-cloak背后的原理:先通过样式隐藏内容,然后再内存中进行值的替换,替换好以后再显示最终的结果
  • v-text 相比较v-cloak更加简洁
  • v-html 不安全,本站内部数据可以使用,来自第三方数据不可使用
  • v-pre 显示原始信息,跳过编译过程
    阅读全文 »

ECMAScript6--变量的解构赋值

发表于 2019-11-25 | 分类于 Web 前端 , 前端基础 , ECMAScript6
字数统计: 2k | 阅读时长 ≈ 8

变量的解构赋值

数组的解构赋值

基本用法

ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这称为解构。
以前为变量赋值只能直接指定值:

1
2
3
var a = 1;
var b = 2;
var c = 3;

ES6允许写成这样:

1
var [a,b,c] = [1,2,3];

可以表示,可以从数组中提取值,按照对应位置,对变量赋值。
本质上,这种写法属于“模式匹配”,只要等号两边的模式相同左边的变量就会被赋予对应的值。

阅读全文 »

ECMAScript6--01

发表于 2019-11-18 | 分类于 Web 前端 , 前端基础 , ECMAScript6
字数统计: 2.1k | 阅读时长 ≈ 8

Babel转码器

Babel是一个广泛使用的ES6转码器,可以将ES6代码转换为ES5代码,从而在浏览器或其他环境中执行。

1
2
3
4
5
6
7
//转码前
input.map(item => item+1);

//转码后
input.map(function(item){
return item+1;
});

上面的原始代码使用了箭头函数,这个特性还没有得到广泛支持,Babel将其转换为普通函数,就能在现有的js环境执行里面。
Babel自带一个babel-node命令。提供支持ES6的REPL环境。它支持node的PERL环境的所有功能,而且可以直接运行ES6代码。

阅读全文 »

vue1--零散笔记

发表于 2019-11-16 | 分类于 Web 前端 , 前端进阶 , 前端框架 , Vue , Vue1
字数统计: 2.2k | 阅读时长 ≈ 7

computed VS method

computed:

1
2
3
4
5
6
7
{{ reverseMsg }}

computed:{
reverseMsg: function({
//
})
}

method:

阅读全文 »

vue1-day9

发表于 2019-11-15 | 分类于 Web 前端 , 前端进阶 , 前端框架 , Vue , Vue1
字数统计: 1k | 阅读时长 ≈ 3

vuex

概念:
vuex是Vue配套的公共数据管理工具,它可以把一些共享的数据,保存到vuex中,方便整个程序中的任何组件直接获取或者修改我们的公共数据。

vuex是为了保存组件之间共享数据而诞生的,如果组件之间有要共享的数据,可以直接挂载到vuex中,而不必通过父子组件之间传值了,如果组件的数据不需要共享,此时这些不需要共享的私有数据,没有必要传到vuex;
只有共享的数据,才有权力放到vuex中去,组件内部私有的数据,只要放到组件的data中即可

阅读全文 »

vue1-day8

发表于 2019-11-11 | 分类于 Web 前端 , 前端进阶 , 前端框架 , Vue , Vue1
字数统计: 1.8k | 阅读时长 ≈ 7

Promise

关于promise解决回调地狱问题的说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//需求:你要封装一个方法,我给你一个要读取文件的路径,你这个方法能帮我读取文件,并把内容返回给我

const fs = require('fs')
const path = require('path')

//这是普通读取文件的方式
<!-- fs.readFile(path.join(__dirname,'./files/1.txt'),'utf-8',(err,data) => {
if(err) throw err
console.log(data)
}) -->

//封装方法的初衷:给定文件路径,返回读取到的文件内容
//我们可以规定以下,callback中有两个参数,第一个参数就是失败的结果,第二个参数就是成功的结果;同时我们规定了,如果成功后,返回的结果应该房屋callback参数的第二个位置,此时第一个位置由于没有出错所以放一个努力了;如果失败了第一个位置参数防止erro对象,第二个位置放一个undefined
function getFilePath(fpath,callback){
//该文件读取方法是一个异步方法,主程序不会去管他,而会直接跳过,所以无法获得读取文件的return值
fs.readFile(path.join(fpath,'utf-8',(err,data) => {
//错误发生后,就立即进入if分支,if后面的额代码就不会执行,解决办法就是在throw err前面加一个return
if(err) return callback(err)
<!-- console.log(data) -->
callback(null,data)//使用回调来获取读取文件的值
})
}

//调用
getFilePath(path.join(__dirname,'./files/1.txt'),(data) => {
console.log(data)
if(err) return console.log(err.message)
console.log(data)
})
阅读全文 »

vue1-day7

发表于 2019-11-08 | 分类于 Web 前端 , 前端进阶 , 前端框架 , Vue , Vue1
字数统计: 403 | 阅读时长 ≈ 1

Mint-UI

是基于vue.js的移动端组件库
该Mint-UI个bootstrap不一样

1
2
3
4
5
// 安装
# Vue 1.x
npm install mint-ui@1 -S
# Vue 2.0
npm install mint-ui -S
阅读全文 »

vue1-day6

发表于 2019-11-04 | 分类于 Web 前端 , 前端进阶 , 前端框架 , Vue , Vue1
字数统计: 1.8k | 阅读时长 ≈ 6

url-loader

url-loader的使用

注意:npm有两种安装方式,本地安装和全局安装,如果是本地安装,则可以通过require来引入包,如果是全局安装是提供给命令行用的,即全局安装的方式在代码中不用require方式引用。

默认情况下,webpack无法处理css文件中的url地址,不管是图片还是字体库,只要是url地址都处理不了

这是在webpack.config.js文件中新增的处理url的erl-loader文件

阅读全文 »

vue1-day5

发表于 2019-10-28 | 分类于 Web 前端 , 前端进阶 , 前端框架 , Vue , Vue1
字数统计: 3.4k | 阅读时长 ≈ 12

watch

使用这个属性,可以监视data中指定数据的变化,然后触发这个watch中对应的function处理函数。即这个属性是用来监听data中数据改变从而进行相关操作的属性。

computed

在computed中,可以定义一些属性,这些属性叫做【计算属性】,计算属性的本质就是一个方法,只不过,我们在使用这些计算属性的时候,是把他们的名称,直接当作属性来使用的,并不会把计算属性,当作方法去调用

阅读全文 »

vue1-day4

发表于 2019-10-27 | 分类于 Web 前端 , 前端进阶 , 前端框架 , Vue , Vue1
字数统计: 2.4k | 阅读时长 ≈ 9

小球动画flag标识符的作用分析

在半场小球动画案例中,的afterEnter钩子函数里面原先写的是this.flag=!this.flag,如果改成el.style.opacity=0.5,则会没有动画效果。
Vue把一个完整的动画,使用钩子函数,拆分为了两部分:我们使用flag标识符,来表示动画的切换;刚一开始,flag=false,然后变成true,然后便变成false。

阅读全文 »
1…345…11
Teresa

Teresa

学习前端路上的技术、笔记分享和记录

103 日志
30 分类
59 标签
GitHub E-Mail Gitee
0%
© 2019 — 2020 Teresa | Site words total count: 226.6k
你是第 位访客 本站总访问量 次