Vue基础教程--基本指令（一）
1 Vue的基本代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 1. 导入Vue的包 -->
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 -->
<!-- Vue 实例所控制的这个元素区域，就是我们的 V -->
<div id="app">
<p>{
{ msg }}</p>
</div>
<script>
// 2. 创建一个Vue的实例
// 当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数
// 注意：我们 new 出来的这个 vm 对象，就是我们 MVVM中的 VM调度者
var vm = new Vue({
el: '#app', // 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域
// 这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的
data: {
// data 属性中，存放的是 el 中要用到的数据
msg: '欢迎学习来到晶之佳缘博客' // 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】
}
})
</script>
</body>
</html>
效果展示
2 Vue指令学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
后续代码添加位置
</div>
<script src="./lib/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'v-cloak指令',
msgtext: 'v-text指令',
msghtml: '<h1>v-html指令</h1>',
mytitle: 'v-bind指令'
},
methods: {
// 这个 methods属性中定义了当前Vue实例所有可用的方法
show: function () {
alert('v-on指令')
}
}
})
</script>
</body>
</html>
2.1 v-cloak指令
v-cloak指令：当数据未解析完成时会渲染什么样式,和 css 规则如[v-cloak] { display: none }一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
效果展示
从效果展示可以看出没有加v-cloak指令的会存在闪烁效果从{
{ msg }}变成v-cloak指令，加上之后会显示css的display: none相关，等vue成功加载出来正确显示v-cloak指令。
2.2 v-text指令
v-text指令：以纯文本方式显示数据；
- v-text 是没有闪烁问题的
- v-text会覆盖元素中原本的内容，但是 插值表达式 只会替换自己的这个占位符，不会把 整个元素的内容清空
<p>原本 {
{ msgtext }} 内容</p>
<p v-text="msgtext">原本内容</p>
效果展示
从效果展示可以看出v-text指令与{
{}}插值表达式的区别：
- 没有闪烁问题（没有动态效果可以自行去演示）
- 会覆盖元素中原本的内容
2.3 v-html指令
v-html指令：可以识别HTML标签；
<div>{
{msghtml}}</div>
<div v-text="msghtml"></div>
<div v-html="msghtml">原本内容</div>
从效果展示可以看出v-html与v-text唯一的特点就是可以正确识别html的标签。
2.4 v-bind指令
v-bind指令：是 Vue中，提供的用于绑定属性的指令
- v-bind: 指令可以被简写为 :要绑定的属性
- v-bind 中可以写合法的JS表达式
- v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V， 无法实现数据的双向绑定（v-model双向绑定）
<input type="button" value="按钮" v-bind:title="mytitle + 'vue学习'">
<input type="button" value="按钮" :title="mytitle + 'vue学习'">
效果展示
从效果展示可以看出v-bind可以绑定相关属性，同时v-bind:title可以缩写成:title，v-bind 中也可以写合法的JS表达式。
2.5 v-on指令
v-on指令: 事件绑定机制
- v-bind: 指令可以被简写为 @要绑定的事件
<input type="button" value="按钮" v-on:click="show">
<input type="button" value="按钮" @click="show">
效果展示
从效果展示可以看出v-on可以绑定相关事件，同时v-on:click可以缩写成:@click。
2.5.1 事件修饰符
<style>
.inner {
height: 98px;
width: 160px;
padding: 40px;
background-color: antiquewhite;
}
.outer {
padding: 40px;
background-color: pink;
}
</style>
<script>
var vm = new Vue({
el: '#app',
data: {
},
methods: {
buttonShow() {
alert('按钮点击事件')
},
innerDivShow() {
alert('inner div 点击事件')
},
outDivShow() {
alert('触发了连接的点击事件')
},
linkClick(){
alert('百度')
}
}
});
</script>
2.5.1.1 .stop阻止冒泡
<!-- 使用 .stop 阻止冒泡 -->
<div class="inner" @click="innerDivShow">
<input type="button" value="按钮" @click="buttonShow">
</div>
<hr/>
<div class="inner" @click="innerDivShow">
<input type="button" value="按钮" @click.stop="buttonShow">
</div>
效果展示
从效果展示可以看出加上.stop的按钮只触发了按钮，没有触发div的点击事件，成功阻止了冒泡
2.5.1.2 .prevent阻止默认事件
效果展示
<!-- 使用 .prevent 阻止默认行为 -->
<a href="http://www.baidu.com" @click.prevent="linkClick">百度搜索</a>
<a href="http://www.baidu.com" @click="linkClick">百度搜索</a>
从效果展示可以看出加上.prevent的超链接没有完成< a >的默认事件跳到百度页面，只是弹出了提示框。
2.5.1.3 .capture添加事件侦听器时使用事件捕获模式
<!-- 使用 .capture 实现捕获触发事件的机制 -->
<div class="inner" @click="innerDivShow">
<input type="button" value="按钮" @click="buttonShow">
</div>
<hr/>
<div class="inner" @click.capture="innerDivShow">
<input type="button" value="按钮" @click="buttonShow">
</div>
效果展示
从效果展示可以看出加上.capture后先触发的是innerDivShow事件，然后在触发buttonShow，与默认的冒泡处理顺序相反。
2.5.1.4 .self只当事件在该元素本身（比如不是子元素）触发时触发回调
<!-- 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 -->
<div class="inner" @click="innerDivShow">
<input type="button" value="按钮" @click="buttonShow">
</div>
<hr/>
<div class="inner" @click.self="innerDivShow">
<input type="button" value="按钮" @click="buttonShow">
</div>
效果展示
从效果展示可以看出加上.self点击内部的按钮不会触发本身的事件，只有点击自身才会弹出信息。
2.5.1.5 .once事件只触发一次
<!-- 使用 .once 只触发一次事件处理函数 -->
<a href="http://www.baidu.com" @click.prevent.once="linkClick">百度搜索</a>
效果展示
从效果展示可以看出加上.once 点击了两次百度搜索linkClick只触发一次，第二次成功跳转到百度首页。
2.5.1.6 .self和.stop区别
<!-- 演示： .stop 和 .self 的区别 -->
<div class="outer" @click="outDivShow">
<div class="inner" @click="innerDivShow">
<input type="button" value="按钮" @click.stop="buttonShow">
</div>
</div>
<hr/>
<!-- .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为 -->
<div class="outer" @click="outDivShow">
<div class="inner" @click.self="innerDivShow">
<input type="button" value="按钮" @click="buttonShow">
</div>
</div>
效果展示
从效果展示可以看出.stop可以成功阻止冒泡事件，.self只能让自身不受影响。
2.6 v-model指令
<div id="app">
<h4>{
{ msg }}</h4>
<!-- 使用 v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定 -->
<!-- 注意： v-model 只能运用在 表单元素中 -->
<!-- input(radio, text, address, email....) select checkbox textarea -->
<input type="text" v-model="msg">
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: 'CSDN棒棒！'
},
methods: {
}
});
</script>
效果展示
从效果展示可以看出v-model进行了双向绑定，
3 vue中样式
3.1 vue中样式-class
<style>
.red {
color: red;
}
.thin {
font-weight: 200;
}
.italic {
font-style: italic;
}
.active {
letter-spacing: 0.5em;
}
</style>
<div id="app">
<h1 class="red thin">vue样式学习</h1>
<!-- 第一种使用方式，直接传递一个数组，注意： 这里的 class 需要使用 v-bind 做数据绑定 -->
<h1 :class="['thin', 'italic']">vue样式学习</h1>
<!-- 在数组中使用三元表达式 -->
<h1 :class="['thin', 'italic', flag?'active':'']">vue样式学习</h1>
<!-- 在数组中使用 对象来代替三元表达式，提高代码的可读性 -->
<h1 :class="['thin', 'italic', {
'active':flag} ]">vue样式学习</h1>
<!-- 在为 class 使用 v-bind 绑定 对象的时候，对象的属性是类名，由于 对象的属性可带引号，也可不带引号，所以 这里我没写引号； 属性的值 是一个标识符 -->
<h1 :class="classObj">vue样式学习</h1>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: true,
classObj: {
red: true, thin: true, italic: false, active: false }
},
methods: {
}
});
</script>
效果展示
3.2 vue中样式-style
<div id="app">
<!--默认方式-->
<h2 :style="{
color: 'red', 'font-weight': 200}">vue中样式-style</h2>
<!--vue单个绑定-->
<h2 :style="styleObj1">vue中样式-style</h2>
<!--vue绑定数组-->
<h2 :style="[ styleObj1, styleObj2 ]">vue中样式-style</h2>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
styleObj1: {
color: 'red', 'font-weight': 200},
styleObj2: {
'font-style': 'italic'}
},
methods: {
}
});
</script>
