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>
标签：el,Vue,app,笔记,msg,new,data 来源： https://www.cnblogs.com/tiancx/p/15966822.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。