vue
目录
引入：
<script src="node_modules/vue/dist/vue.min.js"></script>
1.单向绑定
使用Vue构造函数创建Vue对象
<script>
var app = new Vue({//我们使用Vue构造函数,来创建按一个Vue对象
el:"#app",//每一个Vue对象,要通过el来绑定id为app的dom元秦,此为单向绑定.
data: {
msg:"飞雪连天射白鹿",
msg2:"笑书神侠倚碧鸳",
}
});
</script>
在页面上通过插值表达式语法：{{msg}}获取vue对象的属性msg
<div id="app">
{{msg}}
{{msg2}}
</div>
2.v-cloak解决闪烁问题
某些项目开发时要求script标签引入必须在末尾，因此会引起闪烁问题
需要给产生闪烁问题的标签加上v-cloak属性，并且通过属性选择器将它的display属性设置为none
<style>
[v-cloak] {
display: none;
}
</style>
<script>
window.onload = function(){
var app = new Vue({
el:"#app",
data: {
msg: "<marquee>好好学习，天天向上！</marquee>"
}
});
}
</script>
<!-- 故意引起闪烁问题 -->
<script src="node_modules/vue/dist/vue.min.js"></script>
<div id="app" v-cloak>
{{msg}}
<p>+++{{msg}}---</p>
<!-- v-text会使用指定的vue对的属性把标记内容覆盖为文本 -->
<p v-text="msg">+++ ---</p>
<!-- v-html会使用指定的vue对的属性把标记内容覆盖，同时会解析标签产生效果-->
<p v-html="msg">+++ ---</p>
</div>
显示效果如下：
3.v-bind 在html标签属性中使用vue对象的属性
在html标记中使用vue的属性，可以将vue的属性显示出来
<div id="app">
<div title="你瞅啥">呵呵 {{msg}}</div>
<div v-bind:title="msg">呵呵 {{msg}}</div>
<div :title="msg">哈哈哈 {{msg}}</div>
</div>
注意：
1.必须在html属性前加上v-bind
2.在html属性中不能加{{}}，应该直接写vue属性对应的名字
3.v-bind:可以以简写为“:“
显示效果如下：
4.v-on点击事件
<div id="app">
<button type="button" v-on:click="f1">点一下</button>
<button type="button" @click="f2">点一下</button>
<!-- 点击事件v-on:click可以简写为@click -->
</div>
<script>
var app = new Vue({
el:"#app",
data: {
msg: "要什么女朋友！"
},
methods:{
f1: function(){
console.log("f111111111111111111111111");
},
f2: function(){
console.log("f22222222222222222222222");
}
}
});
</script>
5.使用vue实现简单的跑马灯效果
使用定时器setinterval
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<button @click="lang()">浪起来</button>
<button @click="stop()">别浪</button>
</div>
<script>
var vm = new Vue({
el:"#app",
data: {
msg:'好好学习，天天向上，别浪~',
intervalId:null
},
methods: {
lang() {
if(this.intervalId != null) return;
this.intervalId = setInterval(() => {
this.msg = this.msg.substring(1) + this.msg.substring(0,1);
},100);
},
stop() {
clearInterval(this.intervalId);
this.intervalId = null;
}
}
});
</script>
</body>
</html>
6.vue的5种事件修饰符
事件冒泡原理图
vue事件中的5种 事件修饰符：
1.stop：阻值事件冒泡!
2.prevent：阻值事件的默认行为。
3.once：添加一次性事件
4.self：只有事件发生在自己身上，才有效果，冒泡的不算！
5.capture：在事件从外向内传递时，就直接触发。此时，从内而外冒泡时，就不再触发了!
<style>
#d1,#d2 {
width: 300px;
height: 300px;
border: #000 solid 1px;
}
</style>
<div id="app">
<div id="d1" @click="f1">
<button type="button" @click="f2">冒泡吧，事件！</button> <br>
<button type="button" @click.stop="f2">不冒泡，事件！</button> <br>
<a href="http://www.baidu.com" @click.prevent.stop>百度一下，你就知道</a> <br>
<button type="button" @click.once="f3">一次性，事件！</button>
</div>
<div id="d2" @click.capture="f1">
<button type="button" @click="f2">呵呵</button>
</div>
</div>
注意：当一个json对象的属性值是函数：f1 function () {}时可以简写为：f1 ()
不传递参数时f1 () 可以不写括号
7.v_model双向绑定
<div id="d1">
<p>{{msg}}</p>
<input type="text" v-model="msg" />
</div>
<script>
var vm = new Vue({
el:"#d1",
data:{
msg:"好好学习，天天向上，别浪~"
}
});
</script>
注意：
双向绑定，只能用于表单元素，因为只有表单元素，才能接受用户输入！！
08.vue双向绑定实现简单计算器功能
09.vue绑定class样式
使用vue管理class的好处是，可以在:class中写出表达式
我们知道，标记自带的class属性，属性值都是字符串类型，可以直接写出样式的名字
一旦有某个Vue对象，绑定了class属性，就像这样： ":class" 或者 "v-bind:class"
被绑定的class属性，直接写出的内容，就会被当做是vue对象的属性名
被绑定的class属性，如果想表示某一个字符串本身，切记加上引号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="node_modules/vue/dist/vue.min.js"></script>
<style>
div {width: 300px; height: 200px;}
.aa {border: #000 solid 5px;}
.bb {background-color: lightblue}
.cc {color: #8ab42e;}
</style>
</head>
<body>
<div id="app">
<button type="button" @click="flag=false">点点</button>
<div class="aa bb cc">
任贤齐
</div>
<!--
我们知道，标记自带的class属性，属性值都是字符串类型，可以直接写出样式的名字
一旦有某个Vue对象，绑定了class属性，就像这样： ":class" 或者 "v-bind:class"
被绑定的class属性，直接写出的内容，就会被当做是vue对象的属性名
被绑定的class属性，如果想表示某一个字符串本身，切记加上引号
-->
<div :class="[flag ? 'aa' : 'bb']">
周华健
</div>
<div :class="[{'aa':flag}, {'bb':flag}, {'cc':flag}]">
蔡旭坤娘娘
</div>
<!-- 可以看出，使用vue管理class的好处是，可以在:class中写出表达式 -->
</div>
<script>
var app = new Vue({
el:"#app",
data: {
flag:true
}
});
</script>
</body>
</html>
10.vue绑定style样式
11.v-for循环
12.v-for循环中的坑
13.v-if和v-show的区别
1.底层原理
v-if控制整个元素是否被加入dom中。 如果v-if后面的值为false，则v-if控制的元素根本不会被加入到dom中！
v-show，控制的元素总是在dom结构中， 如果v-show后面的值为false，则v-show控制的元素的display取值为none!
2.性能
问题是，到底用谁？？
v-if，使用起来代价比v-show更大，毕竟是对dom元素进行添加或删除,v-show仅仅只是修改元素的样式而已。
但是v-show的初始渲染代价较高！！
当一个元素很少切换时，可以考虑使用v-if， 当元素经常切换时，可以考虑使用v-show.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="bundle.js"></script>
<script src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<button type="button" @click="toggle">toggle</button>
<div v-if="flag">哈哈哈</div>
<div v-show="flag">呵呵呵</div>
</div>
<script>
var app = new Vue({
el:"#app",
data: {
flag:true
},
methods: {
toggle() {
this.flag = !this.flag;
}
}
});
</script>
</body>
</html>
14.全局过滤器
过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。
使用方法
1.在插值表达式中使用管道符(pipeline) | 隔开，
2.v-bind 表达式(v2.1.0以上支持)
15.局部过滤器
16.键盘事件
在键盘事件之后，可以写出按键对应的数字，此时表示，只有按下了指定的按键才触发事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="bundle.js"></script>
<script src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- 在键盘事件之后，可以写出按键对应的数字，此时表示，只有按下了指定的按键才触发事件 -->
<input type="text" @keyup.13="f1"><br>
<!-- 又因为，每一个按键都对应一个数字，让程序猿去记住这个对应关系，比较不人性化，所以
作者提前封装了一些常用的数字，映射到了单词:
.enter .tab .delete .esc .space .up .down .left .right
-->
<input type="text" @keyup.left="f2">
<!-- 以下，想制作的效果是，只有按下f2按键时才触发事件 -->
<input type="text" @keyup.abcdd="f3">
</div>
<script>
Vue.config.keyCodes.abcdd=113;
var app = new Vue({
el:"#app",
methods: {
f1() {
console.log("vue 我来啦！！" + Date.now());
},
f2() {
console.log("vue 我不怕你！" + Date.now());
},
f3() {
console.log("vue 不过如此！" + Date.now());
}
}
});
</script>
</body>
</html>
17.全局指令和局部指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="bundle.js"></script>
<script src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
{{msg}}
<!-- 使用vue指令时，必须在指令名前面加上"v-" -->
<input type="text" v-model="msg" />
<input type="text" v-model="msg" />
<input type="text" v-foo v-model="msg" />
</div>
<script>
var app = new Vue({
el:"#app",
data: {
msg:"令狐冲"
},
// 局部指令
directives: {
"foo": {
// 以下的3个参数,都可以有一个参数,该参数就是指令所绑定的DOM元素
// 而且该参数还是一个原生DOM对象
bind(el) {
// foo指令一旦绑定到元素上,就执行bind函数, 元素还没有被vue加入dom中. 样式操作一般写在这样
el.style.backgroundColor ="lightblue";
console.log('bind');
},
inserted(el) {
// foo指令绑定的元素,一旦被vue添加到dom中以后,就执行inserted函数, js操作一般写在这里
el.focus();
console.log('inserted');
},
update(el) {
// foo指令绑定的元素,所对应的vue实例的属性一旦变化,就会执行update函数
console.log('update');
}
}
}
});
</script>
</body>
</html>
全局指令：
<script>
// 定义全局指令,
Vue.directive("foo", {
// 以下的3个参数,都可以有一个参数,该参数就是指令所绑定的DOM元素
// 而且该参数还是一个原生DOM对象
bind(el) {
// foo指令一旦绑定到元素上,就执行bind函数, 元素还没有被vue加入dom中. 样式操作一般写在这样
el.style.backgroundColor ="lightblue";
console.log('bind');
},
inserted(el) {
// foo指令绑定的元素,一旦被vue添加到dom中以后,就执行inserted函数, js操作一般卸载这里
el.focus();
console.log('inserted');
},
update(el) {
// foo指令绑定的元素,所对应的vue实例的属性一旦变化,就会执行update函数
console.log('update');
}
});
</script>
18.vue生命周期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="bundle.js"></script>
<script src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<button @click="f1">go</button>
<button @click="f2">destory</button>
{{msg}}
</div>
<script>
var app = new Vue({
el:"#app",
data: {
msg:"令狐冲"
},
// Vue实例生命周期的8个方法,必须写在与methods, data属性平级的位置,不要写在methods厘米
beforeCreate() {
// beforeCreate执行的时候,Vue实例的方法,属性还没有准备好, 所以该方法我们一般不使用!
console.log("beforeCreate 访问属性:" + this.msg);
console.log("beforeCreate 访问方法：" + this.show());
},
created() {
// created执行的时候,Vue实例的方法,属性已经挂载到Vue实例身上了,
console.log("created 访问属性:" + this.msg);
console.log("created 访问方法：" + this.show());
},
beforeMount() {
// beforeMount执行的时候, 内存中的虚拟DOM并没有把页面上的真实DOM替换
var app = document.getElementById("app");
console.log("beforeMount:" + app.innerHTML);
},
mounted() {
// mounted执行的时候, 内存中的虚拟DOM已经把页面上的真实DOM替换掉了
var app = document.getElementById("app");
console.log("mounted:" + app.innerHTML);
},
beforeUpdate() {
// beforeUpdate执行的时候, vue实例的属性已经变了, 但是虚拟DOM还没有替换真实DOM
console.log("beforeUpdate Vue实例的msg:" + this.msg);
var app = document.getElementById("app");
console.log("beforeUpdate:" + app.innerHTML);
},
updated() {
// updated执行的时候, vue实例的属性已经变了, 虚拟DOM也替换真实DOM!
console.log("updated Vue实例的msg:" + this.msg);
var app = document.getElementById("app");
console.log("updated:" + app.innerHTML);
},
beforeDestroy() { // 了解即可
console.log("beforeDestroy: " + this.msg + " " + this.show());
},
destroyed() { // 了解即可
console.log("destroyed: " + this.msg + " " + this.show());
},
methods: {
show() {
return "show....";
},
f1() {
this.msg = Date.now();
},
f2() {
// 每一个Vue实例,除了在methods中添加的方法以外，还都有自带的方法
// Vue实例自带的方法前面总是有一个$开头,
// $destroy()一旦执行,Vue实例就会销毁
// 销毁以后,vue实例的事件,以及其他全部失效!!
// 此时的vue实例就没有作用了!
this.$destroy();
}
}
});
</script>
</body>
</html>
19.ajax
浙公网安备 33010602011771号