vue.js学习笔记三
Posted -恰饭第一名-
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue.js学习笔记三相关的知识，希望对你有一定的参考价值。
一、ES6
1、块级作用域let/var
- js中使用var来声明一个变量时，变量的作用域主要是和函数的定义有关
- 针对于其他块定义来说是没有作用域的，比如if/for等，这在我们开发中往往会引起一些问题
<script>
//ES5中的var是没有块级作用域的(if/for)
//ES6中的let是有块级作用域的(if/for)
//ES5之前因为if和for都没有块级作用域的概念,所以在很多时候,我们都必须借助于function的作用域来解决应用外面变量的问题
//ES6中，加入了let，let它是有if和for的块级作用域
//1.变量作用域：变量在什么范围内是可用
{
var name = "why";
console.log(name); //why
}
console.log(name); //why
//2.没有块级作用域引起的问题：if的块级
var func;
if (true) {
var name = "why";
func = function() {
console.log(name); //why
}
func();
}
name = "kobe";
func();//kobe
console.log(name);//kobe
var name = "why";
function abc(bbb) {
console.log(bbb); //kobe
}
name = "kobe";
abc(name);
//3.没有块级作用域引起的问题：for的块级
//为什么闭包可以解决问题：函数是一个作用域
var btns = document.getElementsByTagName("button");
for (var i = 0; i < btns.length; i++) {
(function(num) {
btns[i].addEventListener("click", function() {
console.log("第" + num + "个按钮被点击");
})
})(i)
}
const btns = document.getElementsByTagName("button");
for (let i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
console.log("第" + i + "个按钮被点击");
})
}
</script>
2、const的使用
<script>
//1、注意一：一旦给const修饰的标识符被赋值之后，不能修改
// const name = "why";
// name = "abc";
//2、注意二：在使用const定义标识符，必须进行赋值
// const name;
//3、注意三：常量的含义是指向的对象不能修改，但是可以改变对象内部的属性
const obj = {
name: "why",
age: 18,
height: 1.88
}
//obj = {} //Uncaught TypeError: Assignment to constant variable.
console.log(obj); //{name: "why", age: 18, height: 1.88}
obj.name = "kobe";
obj.age = 40;
obj.height = 1.87;
console.log(obj); //{name: "kobe", age: 40, height: 1.87}
</script>
- const关键字
在很多语言中已经存在，比如C/C++中，主要的作用是将某个变量修饰为常量
在javascript中也是如此，使用const修饰的标识符为常量，不可以再次赋值 - 什么时候使用const呢？
当我们修饰的标识符不会被再次赋值时，就可以使用const来保证数据的安全性 - 建议：在ES6开发中，优先使用const，只有需要改变某一标识符的时候才使用let
- const的注意：
const注意一：
const注意二：
3、对象增强写法
<script>
// const obj = new Object()
// const obj = {
// name: "why",
// age: 18,
// run: function() {
// console.log("在奔跑");
// },
// eat: function() {
// console.log("在此东西");
// }
// }
//1、属性的增强写法
// const name = "why";
// const age = 18;
// const height = 1.88
// //ES5的写法
// const obj = {
// name: name,
// age: age,
// height: height
// }
// console.log(obj); //{name: "why", age: 18, height: 1.88}
// const obj1 = {
// name,
// age,
// height
// }
// console.log(obj1); //{name: "why", age: 18, height: 1.88}
//2、函数的增强写法
// ES5的写法
const obj = {
run: function() {
},
eat: function() {
}
}
//ES6的写法
const obj = {
run() {
},
eat() {
}
}
</script>
- ES6中，对对象字面量进行了很多增强
- 属性初始化简写和方法的简写：
二、事件监听
- 在前端开发中，我们需要经常用于交互
- 这个时候，我们就必须监听用户发生的时间，比如点击、拖拽、键盘事件等等
- 再Vue中如何监听事件呢？使用v-on指令
- v-on介绍
- 作用：绑定事件监听器
- 缩写：@
- 预期：Function | Inilne Statement | Object
- 参数：event
1、v-on基础
- 这里，我们用一个监听按钮的点击事件，来简单看看v-on的使用
- 下面的代码中，我们使用了v-on:click=“counter++”
- 另外，我们可以将事件指向一个在methods中定义的函数
- 注：v-on也有对应的语法糖：
- v-on:click可以写成@click
<div id="app">
<h2>{{counter}}</h2>
<button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
counter: 0
},
methods: {
increment() {
this.counter++
},
decrement() {
this.counter--
}
}
})
</script>
2、v-on参数
- 当通过methods中定义方法，以供@click调用时，需要注意参数问题：
- 情况一：如果该方法不需要额外参数，那么方法后的()可以不添加
- 但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去
- 情况二：如果需要同时传入某个参数，同时需要event，可以通过$event传入事件
<div id="app">
<!-- 1.事件调用的方法没有参数 -->
<button @click="btn1Click()">按钮1</button>
<button @click="btn1Click">按钮1</button>
<!-- 2.在事件定义时,写方法时省略了小括号，
但是方法本身是需要一个参数的，这个时候,
Vue会默认将浏览器事件对象作为参数传入到方法 -->
<!--<button @click="btn2Click(123)">按钮2</button>-->
<!--<button @click="btn2Click()">按钮2</button>-->
<button @click="btn2Click">按钮2</button>
<!-- 3.方法定义时，我们需要event对象，同时又需要其他参数 -->
<!-- 在调用方式，如何手动的获取到浏览器参数的event对象：$event -->
<button @click="btn3Click(abc, $event)">按钮3</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好啊",
anc: 123
},
methods: {
btn1Click() {
console.log(btn1Click);
},
btn2Click(event) {
console.log('--------', event);
},
btn3Click(abc, event) {
console.log("_________", abc, event);
}
}
})
// 如果函数需要参数,但是没有传入, 那么函数的形参为undefined
// function abc(name) {
// console.log(name);
// }
//
// abc()
</script>
3、v-on修饰符
- 在某些情况下，我们拿到event的目的可能是进行一些事件处理
- Vue提供了修饰符来帮助我们方便的处理一些事件
- .stop 调用event.stopPropagation()
- .prevent 调用event.preventDefault()
- .{keyCode | keyAlias} 只当事件是从特定键触发时才触发回调
- .native 监听组件根元素的原生条件
- .once 只触发一次回调
<div id="app">
<!-- 1. .stop修饰符的使用 -->
<div @click="divClick">
aaaaa
<button @click="btnClick">按钮</button>
</div>
<!-- 2. .prevent修饰符的使用 -->
<br>
<form action="百度" method="get">
<input type="submit" value="提交" @click.prevent="submitClick">
</form>
<!-- 3. .监听某个键盘的键帽 -->
<input type="text" @keyup.enter="keyUp">
<!-- 4. .once修饰符的使用 -->
<button @click.once="btn2Click">按钮2</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: "你好啊"
},
methods: {
btnClick() {
console.log("btnClick");
},
divClick() {
console.log("divClick");
},
submitClick() {
console.log("submitClick");
},
keyUp() {
console.log("keyUP");
},
btn2Click() {
console.log("btn2Click");
}
}
})
</script>
三、v-if、v-else-if、v-else
- 这三个指令与JavaScript的条件语句if、else、else if类似
- Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件
- 简单的案例演示
<div id="app">
<h2 v-if="isShow">
<div>abc</div>
<div>abc</div>
<div>abc</div>
<div>abc</div>
<div>abc</div>
{{message}}
</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
isShow: false
}
})
</script>
- v-if后面的条件为false时，对应的元素1以及子元素不会渲染
- 也就是根本不会有对应的标签出现在DOM中
<div id="app">
<h2 v-if="isShow">
<div>abc</div>
<div>abc</div>
<div>abc</div>
<div>abc</div>
<div>abc</div>
{{message}}
</h2>
<h1 v-else>isShow为false时, 显示我</h1>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好啊",
isShow: false
}
})
</script>
<div id="app">
<h2 v-if="score>=90">优秀</h2>
<h2 v-else-if="score>=80">良好</h2>
<h2 v-else-if="score>=60">及格</h2>
<h2 v-else>不及格</h2>
<h1>{{result}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
score: 99
},
computed: {
result() {
let showMessage = '';
if (this.score >= 90) {
showMessage = '优秀'
} else if (this.score >= 80) {
showMessage = '良好'
}
return showMessage
}
}
})
</script>
四、条件渲染案例
我们来做一个简单的小案例
- 用户再登录时，可以切换使用用户账户登录还是邮箱地址登录
- 类似如下情景
<div id="app">
<span v-if="isUser">
<label for=" username">用户账户</label>
<input type="text" name="" id="username" placeholder="用户账户">
</span>
<span v-else>
<label for="email">用户邮箱</label>
<input typeVue.js学习笔记