文章目录
一、Vue简介
1.1 简介
1.2 MVVM 模式的实现者——双向数据绑定模式
1.3 其它 MVVM 实现者
1.4 为什么要使用 Vue.js
1.5 Vue.js 的两大核心要素
1.5.1 数据驱动
1.5.2 组件化
二、Vue入门
2.1 vue 初体验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
<!-- 插值表达式 -->
{{ name }}
<hr>
<!-- v-model表示双向绑定 -->
<input type="text" v-model="name">
</div>
</body>
<script>
new Vue({
el: '#app',
//组件化编程支持的data写法
data(){
return{
name: 'jack'
}
}
});
</script>
</html>
2.2 基本指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
<p v-text="name"></p>
<p v-text="htmlText"></p>
<p v-html="htmlText"></p>
<!--<a v-bind:href="url">v-bind百度</a>-->
<a :href="url">v-bind百度</a>
<p v-if="score > 90">优秀</p>
<p v-else-if="score > 60">及格</p>
<p v-else>不及格</p>
<ul>
<li v-for="user in users">
{{user.id}} -- {{user.username}}
</li>
</ul>
<hr color="red">
<!-- dom树中有该标签 -->
<div v-show="score > 100">
v-show成绩大于100
</div>
<!-- dom树中无该标签 -->
<div v-if="score > 100">
v-if成绩大于100
</div>
<button @click="show">点击</button>
</div>
</body>
<script>
new Vue({
el: '#app',
data(){
return{
name:'张三',
score:100,
htmlText:'<a href="http://www.baidu.com">百度</a>',
url:"http://www.baidu.com",
users:[
{id:1001,username:'jack'},
{id:1002,username:'tom'},
{id:1003,username:'lucy'}
]
}
},
methods:{
show(){
// 如果method中要使用 vue data中的数据,都需要带上this
alert(this.name);
}
}
})
</script>
</html>
2.3 跑马灯案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--引入官方js文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
<input type="button" value="move" @click="move">
<input type="button" value="stop" @click="stop">
<h1><font color="blue">{{ msg }}</font></h1>
</div>
</body>
<script>
//var arr = [11,22,33,44,55];
// arr.forEach(function (item) {
// if(item>20){
// alert(item+"--")
// }
// })
// arr.forEach(item => {
// if(item>20){
// alert(item+"++")
// }
// })
// var item = arr.filter(item => item>20)
// alert(item)
new Vue({
el:"#app",
data(){
return{
msg:"中国移动通信",
id:null
}
},
methods:{
move(){
if(this.id!=null){
return;
}
this.id = setInterval( () => {
var start = this.msg.substring(0,1);//中
var end = this.msg.substring(1);//国移动通信
this.msg = end + start;
},300)
},
stop(){
clearInterval(this.id);
this.id=null;
}
}
})
</script>
</html>
2.4 设置全名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--引入官方js文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
FirstName:<input type="text" v-model="firstName"><br>
LastName:<input type="text" v-model="lastName"><br>
FullName1(单向数据绑定):<input type="text" v-model="fullName1"><br>
FullName2(单向数据绑定):<input type="text" v-model="fullName2"><br>
FullName3(双向数据绑定):<input type="text" v-model="fullName3"><br>
</div>
</body>
<script>
new Vue({
el: "#app",
data() {
return {
firstName: '',
lastName: '',
fullName2: '',
}
},
//计算属性
computed: {
//定义了回调方法,没有显示调用,会触发
//1.计算属性的值,不用再data中定义,直接用
//2.计算属性对应一个回调方法
//3.触发时机:只要牵扯到属性发生变化,该方法就会触发
//4.在使用时,首先需要用到属性局部赋值
// fullName1:function () {
//
// let firstName = this.firstName;
// let lastName = this.lastName;
//
// return firstName + " " + lastName;
// },
fullName1: {
get() {
let firstName = this.firstName;
let lastName = this.lastName;
return firstName + " " + lastName;
}
},
fullName3: {
get() {
let firstName = this.firstName;
let lastName = this.lastName;
return firstName + " " + lastName;
},
set(val) {
//alert(val);//拿到fullName3的值
let arr = val.split(/\s+/);//通过空格分离
var first = arr[0];
var last = arr[1];
this.firstName = first;
this.lastName = last;
}
}
},
watch: {
firstName: function (newVal, oldVal) {
this.fullName2 = newVal + " " + this.lastName;
},
lastName: function (newVal, oldVal) {
this.fullName2 = this.firstName + " " + newVal;
}
}
})
</script>
</html>
2.5 名字过滤以及年龄排序案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
#app {
width: 400px;
margin: 100px auto 0;
}
</style>
</head>
<body>
<div id="app">
<input v-model="searchText">
<table border="1" style="text-align: center;" cellspacing="0"
cellpadding="0" width="100%">
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr v-for="user in filterUsers">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
</tr>
</table>
<button @click="orderByAge(1)">升序</button>
<button @click="orderByAge(2)">降序</button>
<button @click="orderByAge(3)">不排序</button>
</div>
</body>
<script>
new Vue({
el: '#app',
data() {
return {
users: [
{id: 1, name: 'zhangsan', age: 22},
{id: 2, name: 'lisi', age: 12},
{id: 3, name: 'wangwu', age: 42},
{id: 4, name: 'zhaoliu', age: 32},
{id: 5, name: 'tianqi', age: 28},
],
searchText: '',
order: 3
}
},
computed: {
filterUsers: function() {
let searchText = this.searchText;
let order = this.order;
// 根据名字过滤
let newUsers = this.users.filter(user => user.name.indexOf(searchText) > -1);
// 排序
if(order != 3) {
newUsers.sort((u1, u2) => {
if(order == 1) {
return u1.age - u2.age;
}else {
return u2.age - u1.age;
}
});
}
return newUsers;
// String s = "helloworld";
// s.indexOf('worlx'); // -1
}
},
methods: {
orderByAge(value) {
this.order = value;
}
}
})
</script>
</html>
2.6 事件修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.box1 {
background-color: red;
height: 200px;
width: 200px;
}
.box2 {
background-color: #e3e3e3;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div id="app">
<!--@click.prevent 阻止事件传播 -->
<a href="http://www.baidu.com" @click.prevent="show">百度</a>
<hr>
<div class="box1" @click="alertOutterBox">
<!-- click.stop阻止冒泡事件 -->
<div class="box2" @click.stop="alertInnerBox"></div>
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
methods: {
show() {
alert("show")
},
alertOutterBox(){
alert("alertOutterBox")
},
alertInnerBox(){
alert("alertInnerBox")
}
}
})
</script>
</html>
2.7 按键修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- keyup.enter 表示enter键弹起的时候,事件被触发 -->
keyup:<input type="text" v-model="name" @keyup.enter="keyupTest()">
<!-- keydown 表示按下某个键时触发 -->
keydown:<input type="text" v-model="code" @keydown="keydownTest($event)">
</div>
</body>
<script>
new Vue({
el: '#app',
data() {
return {
name: '',
code: ''
}
},
methods: {
keyupTest() {
alert(this.name)
},
keydownTest: function (event) {
var keyCode = event.keyCode;
alert(keyCode)
// if (keyCode != 49) {
// event.preventDefault();//阻止按键输入
// }
}
}
})
</script>
</html>
2.8 生命周期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
</body>
<script>
var vm= new Vue({
el: "#app",
data(){
return{
message:"hello vue"
}
},
methods:{
},
beforeCreate:function () {
console.log("beforeCreate创建vue之前:",this.message);
console.log("$el:"+this.$el);
console.log("$data:"+this.$data);
console.log("-------------")
},
created:function () {
console.log("created创建vue:",this.message);
console.log("$el:"+this.$el);
console.log("$data:"+this.$data);
console.log("-------------")
},
beforeMount:function () {
console.log("beforeMount挂载之前:",this.message);
console.log("$el:"+this.$el);
console.log("$data:"+this.$data);
console.log("-------------")
},
mounted:function () {
console.log("mounted挂载:",this.message);
console.log("$el:"+this.$el);
console.log("$data:"+this.$data);
console.log("-------------")
},
beforeUpdate:function () {
console.log("beforeUpdate修改之前:",this.message);
console.log("$el:"+this.$el);
console.log("$data:"+this.$data);
console.log("-------------")
},
updated:function () {
console.log("updated修改:",this.message);
console.log("$el:"+this.$el);
console.log("$data:"+this.$data);
console.log("-------------")
},
beforeDestroy:function () {
console.log("beforeDestroy销毁之前:",this.message);
console.log("$el:"+this.$el);
console.log("$data:"+this.$data);
console.log("-------------")
},
destroyed:function () {
console.log("destroyed销毁:",this.message);
console.log("$el:"+this.$el);
console.log("$data:"+this.$data);
console.log("-------------")
}
});
vm.message="bye vue";
vm.$destroy();
</script>
</html>