移动应用开发复习重点
-
Vue 执行顺序是
- 进入页面默认会自动执行beforeCreate -> created -> beforeMount -> mounted
- 当数据发生改变的前一刻会自动执行beforeUpdate
- 当数据改变完成会自动执行updated
- 当页面准备销毁的前一刻会自动执行beforeDestroy
- 当页面准备销毁完成会自动执行destroyed
-
let
- let 声明的变量的作用域是块级的；
- let 不能重复声明已存在的变量；
- let 有暂时死区，不会被提升。
-
Const
- 块作用域
- 在声明时赋值
- 赋值后不能改变
- 不会被提升
-
解构： es6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值。
-
https://www.runoob.com/w3cnote/deconstruction-assignment.html
-
Symbol
-
ES6 引入了一种新的原始数据类型 Symbol
let sy = Symbol("KK"); console.log(sy); // Symbol(KK) typeof(sy); // "symbol" // 相同参数 Symbol() 返回的值不相等 let sy1 = Symbol("kk"); sy === sy1; // false
-
-
${ }中的表达式可以是函数和变量的调用
- 函数
function name(){ return 'songcubi'; } let str=`I love ${name()}, because he is handsome.`; //I love songcubi, because he is handsome.- 变量
let a='Karry Wang'; let str2=`I love ${a}, because he is handsome.`; //I love Karry Wang, because he is handsome. //注意：这行代码是用返单号引起来的 -
CSS3 border-radius 属性
-
四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
-
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
-
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
-
一个值： 四个圆角值相同
border-radius: 15px 50px 30px 5px; border-radius: 15px 50px 30px; border-radius: 15px 50px;
-
-
CSS3 @keyframes 动画规则
<style> div { width:100px; height:100px; background:red; animation:myfirst 5s; } @keyframes myfirst { 0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;} } </style> -
浏览器中保存临时数据使用sessionStorage
localStorage.setItem('username', 'Ken'); var username = localStorage.getItem('username'); localStorage.removeItem('username'); localStorage.clear(); -
浏览器中长期保存数据使用localStorage
- 能够保存10MB的数据
-
v-bind 只能实现数据的单向绑定，从 M 绑定到 V ，无法实现数据的双向绑定。
-
v-model 指令可以实现表单元素和 Model 中的数据的双向数据绑定。
-
v-model 指令只能运用在表单元素
-
在默认情况下，
v-model在input事件中同步输入框的值与数据，但你可以添加一个修饰符lazy，从而转变为在change事件中同步。- 加上.lazy后相当于 双向数据绑定不起作用了
-
数组遍历
entries() 遍历键值对。
for(let [key, value] of ['a', 'b'].entries()){ console.log(key, value); } // 0 "a" // 1 "b" // 不使用 for... of 循环 let entries = ['a', 'b'].entries(); console.log(entries.next().value); // [0, "a"] console.log(entries.next().value); // [1, "b"] // 数组含空位 console.log([...[,'a'].entries()]); // [[0, undefined], [1, "a"]]keys()遍历键名。
for(let key of ['a', 'b'].keys()){ console.log(key); } // 0 // 1 // 数组含空位 console.log([...[,'a'].keys()]); // [0, 1]values()遍历键值。
for(let value of ['a', 'b'].values()){ console.log(value); } // "a" // "b" // 数组含空位 console.log([...[,'a'].values()]); // [undefined, "a"] -
Vue.js的v-bind和v-on指令都提供了语法糖，也可以说是缩写。
- v-bind可以省略，直接写一个冒号“:”
<a v-bind:href="url">链接</a> <img v-bind:src="imgUrl"> <!--缩写为：--> <a :href="url">链接</a> <img :src="imgUrl" />- v-on：缩写为“@”
<button v-on:click="handleClose">点击隐藏</button> <!--缩写为：--> <button @click="handleClose">点击隐藏</button> -
Vue.js 样式绑定
-
class 属性绑定
<div class="static" v-bind:class="{ 'active' : isActive, 'text-danger' : hasError }"> </div> -
style(内联样式)
<div id="app"> <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div> </div>
-
-
CSS3 渐变
- 线性渐变- 从上到下（默认情况下）linear-gradient()
- 径向渐变- 颜色节点均匀分布（默认情况下）radial-gradient()
-
pattern 属性描述了一个正则表达式用于验证
<input>元素的值。<input type="number" pattern="\d"> -
box-sizing属性设置什么？
-
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
-
box-sizing: content-box|border-box|inherit;值 描述 content-box 这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。 border-box 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 inherit 规定应从父元素继承 box-sizing 属性的值。
-
-
Vue是MVVM框架
-
v-if和v-show区别
v-if的原理是根据判断条件来动态的进行增删DOM元素，条件切换时进行创建和销毁，频繁的进行DOM操作会影响页面加载速度和性能。
v-show是根据判断条件来动态的进行显示和隐藏元素，在初始化时加载一次。css属性为display : none。
-
Vue与Vue-Router引入先后顺序
- 在 Vue 后面加载Vue-Router，会自动安装
-
Axios与原生Ajax区别
-
Ajax：
Ajax是对原生XHR的封装，为了达到我们跨越的目的，增添了对JSONP的支持。
异步的javascript和xml，ajax不是一门新技术，而是多种技术的组合，用于快速的创建动态页面，能够实现无刷新更新数据从而提高用户体验。
核心对象:XMLHttpReques
-
Axios:
Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。
-
区别：
axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。
简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。
axios是ajax ，ajax不止axios。
-
-
v-for
<div id="app"> <ul> <li v-for="(value, key, index) in object"> {{ index }}. {{ key }} : {{ value }} </li> </ul> </div><div id="app"> <ul> <li v-for="n in 10"> {{ n }} </li> </ul> </div> -
v-for 可以用来迭代对象或整数；
-
ES6 数据类型除了 Number 、 String 、 Boolean 、 Object、 null 和 undefined ，还新增了 Symbol
undefined（未定义）：表示变量未初始化，属性不存在，函数没有返回值 null（空值）：表示变量为空值 Boolean（布尔值）：主要用途是用于判断 String（字符串）：用于表示文本的字符序列 Number（数值）：Number是双精度 64 位浮点格式中的数字数据类型 Object（对象）：表示属性的集合，其中每个属性由“名/值对”构成 Symbol（符号）：表示独一无二的值，最大的用法是用来定义对象的唯一属性名 -
Vue中父子组件的传值方式以及怎么传值
-
props组件：
子组件通过props来获取父组件的数据，且数据只能由父组件传递到子组件
-
$emit组件：
子组件通过$emit向父组件触发事件
-
-
Ref：
ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例 -
this.$parent 可以直接访问该组件的父实例或组件；
-
父组件也可以通过this.$children 访问它所有的子组件； 需要注意 $children 并不保证顺序，也不是响应式的。
-
vue 全局事件(eventBus)
-
省市级联实现（重要）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市级联</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>
省市级联:
<select v-model="pro" @change="f1()">
<option v-for="p in pros" :value="p[0]">{{p[1]}}</option>
</select>
<select>
<option v-for="c in city" :value="c[0]">{{c[1]}}</option>
</select>
</h1>
</div>
<script>
let pros = [
['00', '请选择省份'],
['10', '四川省'],
['11', '湖北省'],
['12', '云南省']
]
let citys = [
['0000', '请选择城市'],
['1001', '成都市'],
['1002', '南充市'],
['1003', '达州市'],
['1101', '武汉市'],
['1102', '黄石市'],
['1103', '黄冈市'],
['1201', '昆明市'],
['1202', '保山市'],
['1203', '丽江市']
]
let vue = new Vue({
el: '#app',
data: {
pros,
citys,
pro: '00', // 表示当前选中的省份
city: [
['0000', '请选择城市']
] // 遍历出显示的城市的数组
},
methods: {
},
computed: {
f1() {
this.city = []; // 清空目前的城市
for (let i = 0; i < citys.length; i++) {
let tmp = citys[i];
if (tmp[0].startsWith(this.pro)) {
this.city.push(tmp)
}
}
}
}
})
</script>
</body>
</html>
浙公网安备 33010602011771号