开始使用Vue
步骤：
1.导入Vue的包
2.创建一个Vue的实例。当我们导入包之后，在浏览器的内存中，就多了一个Vue构造函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cysky</title>
<script src="lib/vue-2.4.0.js"></script> //导包
</head>
<body>
<div id="app">
<p>{{ msg }}</p>
</div>//将来 new 的 Vue实例，会控制这个元素中的所有内容
<script>
var vm = new Vue({
el: "#app",//el:表示当我们new的这个Vue实例，要控制页面的哪一个区域
data: {
msg: '欢迎学习Vue'
}//data 属性中，存放的是 el 中要用到的数据
})//创建实例
</script>
</body>
</html>
通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了
v-cloak的学习
功能：使用 v-cloak 能够解决插值表达式闪烁的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cysky</title>
<script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<p v-cloak>+++{{ msg }}+++</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'v-cloak的使用'
}
})
</script>
</body>
</html>
v-text & v-html 学习
v-text 和 插值表达式的区别：
- v-text 默认没有闪烁的问题
- v-text 会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素内容清空
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cysky</title>
<script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<p v-text="msg">我是一个p元素</p> //会覆盖p元素原本的内容
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'v-text的使用'
}
})
</script>
</body>
</html>
v-text & v-html 的区别：
- v-text 和 v-html 都会覆盖掉元素内已有的内容
- v-text 不能识别标签
- v-html可以识别标签元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cysky</title>
<script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<p v-text="msg2">我是一个p元素</p>
<!--v-text的结果：<h4>我是一个H4标签</h4>-->
<p v-html="msg2">我是一个p元素</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg2: '<h4>我是一个H4标签</h4>'
}
})
</script>
</body>
</html>
v-bind & v-on 的学习
v-bind 是Vue中，提供的用于绑定属性的指令
v-bind 可以缩写为:要绑定的属性
v-bind 中，可以写合法的JS表达式
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>cysky</title>
<script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="click" :title="mytitle + '123'" @mouseover = 'show'>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
mytitle: '转到百度网'
},
methods: {
show: function(){
alert("事件绑定的使用")
}//这个 methods 属性中定义了当前Vue实例中所有可用的方法
}
})
</script>
</body>
</html>
v-on 是Vue中，提供的用于事件绑定的指令
v-on 可以缩写为:要绑定的方法
案例：跑马灯效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cysky</title>
<script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="运行" @click='start'>
<input type="button" value="结束" @click='stop'>
<p>{{ msg }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '猥琐发育，别浪~ ~稳住，我们能赢！！',
intervalId: null
},
methods: {
start() {
if (this.intervalId != null) return;
this.intervalId = setInterval(() => {
var start = this.msg.substring(0, 1);
var end = this.msg.substring(1);
this.msg = end + start
}, 400)
},
stop() {
clearInterval(this.intervalId);
this.intervalId = null
}
}
})
</script>
</body>
</html>
注意：
- vm实例中（ var vm = new Vue），如果想要获取 data 上的数据，或者 想要调用 methods 中的方法， 必须通过
this.数据属性名或this.方法名来访问，这里的this 就表示我们 new 出来的 VM 实例对象 - VM实例，会监听自己身上data 中所有数据的改变，只要数据一发生改变，就会自动把最新的数据，从 data 上同步到页面中去
事件修饰符
- .stop
- 阻止冒泡
- .prevent
- 阻止默认行为
- .capture
- 实现捕获触发事件机制
- .self
- 实现只有点击当前元素，才会触发事件处理函数
- 只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡行为
- .once 实现只触发一次事件处理函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cysky</title>
<style>
.inner {
height: 50px;
background-color: darkblue;
}
.outer {
padding: 40px;
background-color: red;
}
</style>
<script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<!--.stop 阻止冒泡-->
<!--<div class="inner" id="app" @click='div1Handler'>-->
<!--<input type="button" value="click" @click.stop='btnHandler'>-->
<!--</div>-->
<!--.prevent 阻止默认行为-->
<!--<div id="app">-->
<!--<a href="http://www.baidu.com" @click.prevent="linkClick">有问题，问百度</a>-->
<!--</div>-->
<!--.capture 实现捕获触发事件机制-->
<!--<div class="inner" id="app" @click.capture='div1Handler'>-->
<!--<input type="button" value="click" @click='btnHandler'>-->
<!--</div>-->
<!--self 只有点击当前元素才会触发事件处理函数-->
<!--<div id="app" class="outer" @click="div2Handler">-->
<!--<div class="inner" @click.self='div1Handler'>-->
<!--<input type="button" value="click" @click='btnHandler'>-->
<!--</div>-->
<!--</div>-->
<!--once 只触发一次事件处理函数-->
<!--<div id="app">-->
<!--<a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，问百度</a>-->
<!--</div>-->
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
div1Handler() {
console.log('这是触发了inner div 的点击事件')
},
btnHandler() {
console.log('这是触发了btn按钮的点击事件')
},
linkClick() {
console.log('这是触发了连接的点击事件')
},
div2Handler(){
console.log('这是触发了outer div 的点击事件')
}
}
})
</script>
</body>
</html>
v-model 的学习
v-bind 只能实现数据的单向绑定，无法实现数据的双向绑定
使用 v-model 指令，可以实现表单元素和Model 中数据的双向数据绑定
注意：v-model 只能用在表单元素中（input(radio,text,address,url...),select,textarea,checkbox....）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cysky</title>
<script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<h4>{{ msg }}</h4>
<input type="text" style='width: 100%' v-model="msg">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'v-model 能够实现数据的双向绑定'
}
})
</script>
</body>
</html>
案例：简易计算器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cysky</title>
<script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="n1">
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="n2">
<input type="button" value="=" @click="clac">
<input type="text" v-model="result">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
n1: 0,
n2: 0,
result: 0,
opt: '+'
},
methods: {
clac(){
switch (this.opt) {
case '+' :
this.result = parseInt(this.n1) + parseInt(this.n2);
break;
case '-' :
this.result = parseInt(this.n1) - parseInt(this.n2);
break;
case '*' :
this.result = parseInt(this.n1) * parseInt(this.n2);
break;
case '/' :
this.result = parseInt(this.n1) / parseInt(this.n2);
break;
}
}
}
})
</script>
</body>
</html>
vue中样式操作——class
- 直接传递一个数组，这里的 class 需要使用 v-bind 做数据绑定
- 在数组中使用三元表达式
- 在数组中使用对象来代替三元表达式，提高代码的可读性
- 在为class 使用 v-bind 绑定对象的时候，对象的属性使类名，对象的属性可带引号，也可不带引号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cysky</title>
<style>
.red {
color: red;
}
.thin {
font-weight: 200;
}
.italic {
font-style: italic;
}
.active {
letter-spacing: 0.5em;
}
</style>
<script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<!--原始操作方式：-->
<!--<h1 class="red thin">这是一个h1大标题</h1>-->
<!--第一种方式：直接传递一个数组-->
<!--<h1 :class="['thin','italic']">这是一个h1大标题</h1>-->
<!--第二种方式：在数组中使用三元表达式-->
<!--<h1 :class="['thin','italic',flag?'red':'']">这是一个h1大标题</h1>-->
<!--第三种方式：在数组中使用 对象来代替三元表达式，提高代码的可读性-->
<!--<h1 :class="['thin','italic',{'red':flag}]">这是一个h1大标题</h1>-->
<!--第四种方式：为 class 使用 v-bind 绑定对象-->
<h1 :class="classObj">这是一个h1大标题</h1>
<script>
var vm = new Vue({
el: '#app',
data: {
flag: true,
classObj: {'red': true, 'thin': false, 'italic': true, 'active': true}
}
})
</script>
</body>
</html>
vue中样式操作——style
注意：使用 v-bind 绑定对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cysky</title>
<script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<h1 :style="[styleObj1,styleObj2]">我是H1大标题</h1>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
styleObj1: {'color': 'red', 'font-weight': 200},
styleObj2: {'font-style': 'italic'}
}
})
</script>
</body>
</html>
v-for循环
-
普通数组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>cysky</title> <script src="lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <p v-for="(item,i) in list"> 索引值：{{ i }}-----每一项：{{ item }} </p> </div> </body> <script> var vm = new Vue({ el: '#app', data: { list: [1, 2, 3, 4, 5, 6] } }) </script> </html>
-
对象数组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>cysky</title> <script src="lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <p v-for="(user,i) in list"> ID:{{ user.id }} ---- 名字：{{ user.name }} ---- 索引：{{ i }} </p> </div> <script> var vm = new Vue({ el: '#app', data: { list: [ {id: 1, name: '张三'}, {id: 2, name: '李四'}, {id: 3, name: '王麻子'}, {id: 4, name: '三楞子'}, {id: 5, name: '四傻子'}, ] } }) </script> </body> </html> -
对象
- 注意：在遍历对象身上的键值对的时候， 除了 有 val key ,在第三个位置还有 一个 索引
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>cysky</title> <script src="lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <p v-for="(val,key,i) in user"> 键是：{{ key }} --- 值是：{{ val }} --- 索引：{{ i }} </p> </div> <script> var vm = new Vue({ el: '#app', data: { user: { id: 1, name: '托尼·屎大颗', gender: 'male' } } }) </script> </body> </html>
-
迭代数字
- 注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>cysky</title> <script src="lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <p v-for="count in 10"> 这是第{{ count }}次循环 </p> </div> <script> var vm = new Vue({ el: '#app', data: {}, }) </script> </body> </html>
v-if & v-show 的使用
共同点：都可以动态控制dom元素显示/隐藏
两者的区别：
- v-if
- 显示/隐藏是将dom元素整个添加或删除
- 有较高的切换性能消耗
- 如果元素可能永远不会被显示出来，推荐使用v-if
- v-show
- 隐藏则是为该元素添加display:none dom元素还存在
- 有价高的初始渲染消耗
- 如果元素涉及到频繁的切换，推荐使用v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cysky</title>
<script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<h3 v-if="flag">这是用v-if控制的元素</h3>
<h3 v-show="flag">这是用v-show控制的元素</h3>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
flag: false
}
})
</script>
</body>
</html>
