Vue笔记
2022/3/5 6:17:30
本文主要是介绍Vue笔记，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
Vue
目录- Vue
- 1、Vue快速起步
- 2、v-bind的使用
- 3、v-on的使用
- 4、走马灯例子体会Vue的单向绑定
- 5、Vue中的5个事件修饰符
- 5.1 事件委托
- 6、Vue双向绑定
- 6.1 双向绑定例子
- 7、Vue绑定元素的class属性
- 8、v-for的使用
- 8.1 v-for的例子
- 9、v-if与v-show的区别
- 10、Vue的过滤器
- 10.1 vue的全局过滤器
- 10.2 vue的私有过滤器
- 11、 按键修饰符
- 12、Vue自定义指令
1、Vue快速起步
<!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">
<title>Document</title>
<!-- 引入Vue的js库 -->
<!-- 一旦引入Vue的js库，在浏览器内存中，多了一个构造器：Vue。 -->
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script>
let vue = new Vue({
el: "#app",
data: {
msg:"啦啦啦啦"
}
});
</script>
</body>
</html>
2、v-bind的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="app">
<a v-bind:title="msg">床前明月光</a>
<a :title="msg2">凄凄惨惨戚戚</a>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
msg: "李白",
msg2: "李清照"
}
});
</script>
</body>
</html>
3、v-on的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="f1">点点</button>
<button @click="f2">点点2</button>
</div>
<script>
var app = new Vue({
el: "#app",
data:{
},
methods: {
f1: function() {
console.log("f1......");
},
f2: function() {
console.log("f2......");
}
}
});
</script>
</body>
</html>
4、走马灯例子体会Vue的单向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<!-- 走马灯例子，体会Vue的强大之处 -->
<div id="app">
<button @click="lang">浪起来</button>
<button v-on:click="stop">不要浪了</button>
{{msg}}
</div>
<script>
let time;
let vue = new Vue({
el: "#app",
data: {
msg: "大家好呀，欢迎来到..."
},
methods: {
lang(){
this.msg=this.msg.substring(1)+this.msg.substring(0,1);
clearTimeout(time);
time = setTimeout(this.lang,1000);
},
stop(){
clearTimeout(time);
}
}
})
</script>
</body>
</html>
5、Vue中的5个事件修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
<style>
#d1 {
width: 300px; height: 300px; background-color: #00b9f1;
}
#d2 {
width: 200px; height: 200px; background-color: #8ab42e;
}
#d3 {
width: 100px; height: 100px; background-color: #ff6600;
}
</style>
</head>
<body>
<div id="app">
<button @click.once="f1">一次性事件</button>
<br />
<a href="http://www.baidu.com" @click.prevent="f2">阻止默认事件的发生</a>
<br />
<div id="d1" @click="d1">
<div id="d2" @click="d2">
<div id="d3" @click="d3">
<!--stop事件修饰符，就是用来阻止事件冒泡的-->
<!--capture事件修饰符，就是将事件处理函数的执行时机，提前到了事件捕获阶段-->
<!--self事件修饰符，就是规定只有事件发生在自己身上的时候，才触发，冒泡上来的事件不算。-->
</div>
</div>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
msg: "Hello!!"
},
methods: {
f1() {
console.log("f1: " + new Date().getTime());
},
f2() {
alert("f2....");
},
d1() {
console.log("d1");
},
d2() {
console.log("d2");
},
d3() {
console.log("d3");
}
}
});
</script>
</body>
</html>
5.1 事件委托
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
<style>
#d1 {
width: 300px; height: 300px; background-color: #00b9f1;
}
#d2 {
width: 200px; height: 200px; background-color: #8ab42e;
}
#d3 {
width: 60px; height: 60px; background-color: #ff6600;
}
#d4 {
width: 60px; height: 60px; background-color: #ff00f2;
}
</style>
</head>
<body>
<div id="app">
<button @click.once="f1">一次性事件</button>
<br />
<a href="http://www.baidu.com" @click.prevent="f2">阻止默认事件的发生</a>
<br />
<div id="d1" @click="d1">
<div id="d2" >
<div id="d3">
</div>
<div id="d4">
</div>
</div>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
msg: "Hello!!"
},
methods: {
f1() {
console.log("f1: " + new Date().getTime());
},
f2() {
alert("f2....");
},
d1(e) {//从事件中获取事件源，事件源就是动作的承受者
let t=e.target;
// console.log(t.id);
if(t.id=="d3"){
console.log("33333"); return ;
}
if(t.id=="d4"){
console.log("4444"); return ;
}
}
}
});
</script>
</body>
</html>
6、Vue双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="app">
<button @click="f1">点我试试</button>
{{msg}} <br>
<input v-model:value="msg">
</div>
<script>
let vue = new Vue({
el: "#app",
data: {
msg:"哈哈哈"
},
methods: {
f1(){
this.msg="点就点"
}
}
})
</script>
</body>
</html>
6.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">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="app">
<input id="i1" v-model:value="num1"> + <input id="i2" v-model:value="num2"> <button @click="calc"> = </button>
<input :value="ans">
</div>
<script>
let vue = new Vue({
el: "#app",
data: {
num1:null,
num2:null,
ans:null
},
methods: {
calc(){
this.ans=Number(this.num1)+Number(this.num2);
}
}
})
</script>
</body>
</html>
7、Vue绑定元素的class属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
<style>
.aa {
border: #000000 solid 1px;
}
.bb {
background-color: aquamarine;
}
.cc {
font-size: 30px;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="['aa','bb','cc']">
Vue
</div>
<div v-bind:class="[p, p2, p3]">
Vue2
</div>
<div v-bind:class="[ {'aa':flag},{'bb':flag2},{'cc':flag3} ]">
Vue3
</div>
<div v-bind:class="[ flag4 ? 'aa' : 'bb' ]">
Vue4
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
p: "aa",
p2: "bb",
p3: "cc",
flag: true,
flag2: true,
flag3: true,
flag4: true
}
});
</script>
</body>
</html>
8、v-for的使用
<!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">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- 遍历Json对象数组 -->
<div v-for="item in list">
{{item}}<br>
</div>
<!-- 遍历普通数组 -->
<div v-for="(item,idx) in arr">
{{idx}}---{{item}}<br>
</div>
<!-- 遍历对象属性 -->
<div v-for="(v,k) in user">
{{k}}---{{v}}
</div>
<!-- 循环数字 -->
<div v-for="item in 10">
{{item}}
</div>
</div>
<script>
let vue = new Vue({
el: "#app",
data: {
list: [
{id: 1, name: '关羽'},
{id: 2, name: '张飞'},
{id: 3, name: '赵云'},
{id: 4, name: '马超'},
{id: 5, name: '黄忠'},
],
arr: [11,22,33,44,55],
user: {
uid: 1001,
name: "岳不群",
age: 24,
address: "华山派"
}
}
});
</script>
</body>
</html>
8.1 v-for的例子
<!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">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
<button @click="add">增加</button>
<!--
每次 list 属性发生变化的时候， 都会引起这个v-for循环重新执行一遍
我的问题是，当我修改id属性的时候，v-for循环会不会重新执行一遍， 会！！
-->
<div v-for="item in getList()" :key="item.id">
<input type="checkbox"> {{item.id}}--{{item.name}}
</div>
</div>
<script>
let vue = new Vue({
el: "#app",
data: {
list: [
{id: 1, name: '关羽'},
{id: 2, name: '张飞'},
{id: 3, name: '赵云'},
{id: 4, name: '马超'},
{id: 5, name: '黄忠'},
],
msg:"",
cnt:"",
},
methods: {
add(){
cnt=this.list.length;
this.list.unshift({id:++cnt,name:this.msg})
},
getList(){
console.log("调用了额");
return this.list;
}
}
});
</script>
</body>
</html>
9、v-if与v-show的区别
<!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">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--
v-if和v-show的区别？
1. v-if是控制整个dom元素是否存在的。
2. v-show是控制dom元素的display属性的取值。
如果一个元素经常切换，推荐使用v-show，毕竟v-show的dom操作少。
-->
<div v-if="flag">
你看的见我吗
</div>
<div v-show="flag">
你真的看得见我吗
</div>
<button @click="toggle">我点</button>
</div>
<script>
let vue =new Vue({
el: "#app",
data: {
flag:true
},
methods: {
toggle(){
this.flag=!this.flag;
}
}
});
</script>
</body>
</html>
10、Vue的过滤器
10.1 vue的全局过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- msg|foo 可以;理解为传值给foo ,下面第24行的代码就是返回给foo -->
{{msg|foo}} <br>
<!-- 这个3是传给29行的那个 n -->
{{msg|bar(3)}} <br>
</div>
<div id="app2">
{{msg|foo|bar(10)}}
</div>
<script>
// 定义Vue的全局过滤器，过滤器的名字叫做foo
Vue.filter("foo", function(data) {
var n = parseInt(Math.random() * 100 + 1);
return data + " " + n;
});
Vue.filter("bar", function(data, n) {
var str = "";
for(var i = 1; i <= n; i++) {
str += " " + data + " ";
}
return str;
})
// 第一个Vue实例
var app = new Vue({
el: "#app",
data: {
msg:"无崖子"
}
});
// 第二个Vue实例
var app2 = new Vue({
el: "#app2",
data: {
msg: "丁春秋"
}
});
</script>
</body>
</html>
10.2 vue的私有过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="app" >
{{msg|foo|bar('orange')}}
</div>
<div id="app2">
<!-- foo是第一个Vue实例的私有过滤器，第二个Vue实例是无法使用的 -->
{{msg|foo}}
</div>
<script>
// 第一个Vue实例
var app = new Vue({
el: "#app",
data: {
msg:"无崖子"
},
filters: {
"foo": function(data) {
return data + " " +new Date().getTime();
},
"bar": function(data, color) {
return "<font color='"+color+"'>" + data + "</font>";
}
}
});
// 第二个Vue实例
var app2 = new Vue({
el: "#app2",
data: {
msg: "丁春秋"
}
});
</script>
</body>
</html>
11、 按键修饰符
<!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">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- <input type="text" @keyup="f1"> -->
<!-- 只有按下a或A的时候有效 -->
<input type="text" @keyup.a="f1">
</div>
<script>
let vue = new Vue({
el:"#app",
data: {
},
methods: {
f1(e){
console.log(e.keyCode);
}
}
});
</script>
</body>
</html>
12、Vue自定义指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<!-- Vue全局指令 -->
<!-- 需求： 要求一进入，就让以下的输入框，立刻获取到焦点 -->
<div id="app">
<input type="text" >
<input type="text" >
<input type="text" v-focus v-mycolor="'blue'" >
</div>
<script>
// 定义一个Vue全局指令, 以下的focus(不一定非要是focus，可以是其他的，比如foo 、abc 等)就是本次定义的全局指令的名字
// 在使用使用指令的时候，必须在指令前加上“v-”
Vue.directive("focus", {
// bind函数的执行时机，是元素被绑定上指令之时，就执行。
// 此时元素并没有加入DOM中。参数el就是使用当前指令的元素，且el代表的元素还是一个原生的DOM对象
//bind后面的函数一般用于添加样式
bind: function(el) {
el.style.backgroundColor = "lightblue";
console.log("bind...");
},
// inserted函数的执行时机，是元素已经被加入到DOM以后，才执行,
// 比如寻找父类节点，获取焦点，获取兄弟节点。 inserted后面的函数一般用于做一些js的操作
inserted: function(el) {
el.focus();
console.log("inserted");
}
});
// 总之，bind合适操作元素的样式， inserted函数更适合使用js操作DOM元素
var app = new Vue({
el: "#app",
data: {
msg: "aaaa"
},
// 私有指令
directives: {
"mycolor": {
bind(el,binding) {
el.style.color = binding.value;
}
}
}
});
</script>
</body>
</html>
这篇关于Vue笔记的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-16Vue3资料：新手入门必读教程
- 2024-11-16Vue3资料：新手入门全面指南
- 2024-11-16Vue资料：新手入门完全指南
- 2024-11-16Vue项目实战：新手入门指南
- 2024-11-16React Hooks之useEffect案例详解
- 2024-11-16useRef案例详解：React中的useRef使用教程
- 2024-11-16React Hooks之useState案例详解
- 2024-11-16Vue入门指南：从零开始搭建第一个Vue项目
- 2024-11-16Vue3学习：新手入门教程与实践指南
- 2024-11-16Vue3学习：从入门到初级实战教程
