共计 4955 个字符，预计需要花费 13 分钟才能阅读完成。
前言：很久之前学过 vue，如今开始复习，主要用于自己查看。
1.v-cloak,v-text,v-html,v-on,v-bind
<!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>
<script src="./lib/vue-2.4.0.js"></script>
<style>
[v-cloak] {display: none;}
</style>
</head>
<body>
<!-- 表示 vue 控制 id 为 app 的部分 -->
<div id="app">
<!-- 使用 v -cloak 解决插值表达式闪烁问题 -->
<!-- 插值表达式是一个占位符，不会替换整个元素的内容 -->
<p v-cloak>{{msg}}</p>
<!-- v-text 覆盖元素中原本的内容，没有闪烁问题 -->
<h4 v-text="msg">000</h4>
<!-- 渲染带有 html 内容，覆盖所有内容 -->
<div v-html="msg2">00</div>
<!-- 属性绑定指令 v -bind，引号里面解析为 js 代码表达式, 简写 v -bind: 为冒号：-->
<input type="button" value="按钮 v -bind" v-bind:title="mytitle+msg">
<!-- 事件绑定 v -on -->
<!-- 错误，alert 是原生方法，没有在 vue 中定义 -->
<!-- <input type="button" value="按钮 v -on" v-on:click="alert('hello')"> -->
<!-- 事件绑定指令 v -on, 简写 v -on: 为冒号 @-->
<input type="button" value="按钮 v -on" @click="alert">
</div>
<script>
var vm = new Vue({
el: '#app',// 表示 new 出来的 vue 实例，控制页面中的 id 名为 app 的 html 部分
data: { //data 属性中，存放的是 el 属性用到的数据
msg: 'hello world!',
msg2: '<h1> 带标签的 msg</h1>',
mytitle: 'hello mytitle'
},
methods: {alert: () => {alert('hello!')
}
},
})
</script>
</body>
</html>2. 事件修饰符，stop,prevent,capture,self,once
<!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>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<!-- 表示 vue 控制 id 为 app 的部分 -->
<div id="app">
<!-- <div class="inner" @click="divclick"> -->
<!-- 阻止冒泡 -->
<!-- <input type="button" @click.stop="inputclick" value="input 按钮"> -->
<!-- </div> -->
<!-- 阻止默认行为，不能跳转 -->
<a href="http://www.baidu.com" @click.prevent="preventdefalut"> 去百度 </a>
<!-- 捕获触发事件，冒泡事件反过来 -->
<!-- <div class="inner" @click.capture="divclick">
<input type="button" @click.stop="inputclick" value="input 按钮">
</div> -->
<!-- 实现点击当前元素才能触发，.self 只会阻止自己身上的冒泡 -->
<!-- <div class="inner" @click.self="divclick" style="width:150px;height:150px;background:pink">
<input type="button" @click="inputclick" value="input 按钮">
</div> -->
<!-- 只触发一次事件处理函数, 意思说下面例子只能阻止默认行为一次，下次就会自动跳转 -->
<a href="http://www.baidu.com" @click.prevent.once="preventdefalut"> 去百度 </a>
</div>
<script>
var vm = new Vue({
el: '#app',// 表示 new 出来的 vue 实例，控制页面中的 id 名为 app 的 html 部分
data: {//data 属性中，存放的是 el 属性用到的数据},
methods: {divclick() {console.log('点击了 div')
},
inputclick() {console.log('点击了 input')
},
preventdefalut() {console.log('阻止默认行为')
}
},
})
</script>
</body>
</html>3.v-model 数据双向绑定
<div id="app">
<!-- 只能应用于表单元素，实现表单中的元素和 Model 中的数据的双向绑定 -->
<input type="text" style="width:100%" v-model="msg">
</div>
<script>
var vm = new Vue({
el: '#app',// 表示 new 出来的 vue 实例，控制页面中的 id 名为 app 的 html 部分
data: { //data 属性中，存放的是 el 属性用到的数据
msg: "这是 v -model 例子"
},
methods: {}})
</script>4.v-on 的属性绑定的使用 – 设置样式外联和内联
4.1 绑定 class 属性
<!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>
<script src="./lib/vue-2.4.0.js"></script>
<style>
.red {background-color: red;}
.font-weight {font-weight: bold;}
.active {font-size: 30px;}
</style>
</head>
<body>
<div id="app">
<!-- 1. 使用数组，使用 v -bind 绑定，注意数组里面加上引号 -->
<p :class="['red','font-weight']"> 这是 class</p>
<!-- 2. 三元表达式，flag 在 data 里面，不用加上引号 -->
<p :class="['red','font-weight',flag?'active':'']"> 这是 class</p>
<!-- 3. 使用对象来处理三元表达式的冗杂问题 -->
<p :class="['red','font-weight',{'active':flag}]"> 这是我 class</p>
<!-- 4. 直接使用对象来处理 -->
<p :class="{red:flag,'font-weight':flag,active:flag}"> 这是对象的 class</p>
</div>
<script>
var vm = new Vue({
el: '#app',// 表示 new 出来的 vue 实例，控制页面中的 id 名为 app 的 html 部分
data: { //data 属性中，存放的是 el 属性用到的数据
flag: true,
},
methods: {}})
</script>
</body>
</html>4.2 绑定 style 属性
<!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>
<script src="./lib/vue-2.4.0.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<!-- 1. 直接采用数组的形式 -->
<p :style="msg1"> 这是绑定的 style 属性 </p>
<!--2. 多个数组的形式 -->
<p :style="[msg1,msg2]"> 这是绑定的 style 属性 </p>
</div>
<script>
var vm = new Vue({
el: '#app',// 表示 new 出来的 vue 实例，控制页面中的 id 名为 app 的 html 部分
data: { //data 属性中，存放的是 el 属性用到的数据
msg1: {color: 'red', 'font-weight': 800},
msg2: {background: 'blue'}
},
methods: {}})
</script>
</body>
</html>5.v-for
<body>
<div id="app">
<!-- v-for 普通数组 -->
<!-- <p v-for="item in list">{{item}}</p> -->
<!-- v-for 对象数组 -->
<p v-for="(item,i) in obj" :key="item.id">id 是 {{item.id}}---name 是 {{item.name}}-- 索引是 {{i}}</p>
<!-- v-for 循环对象 -->
<!-- <p v-for="(value,key,index) in user">value 值 {{value}}---key 是 {{key}}-- 索引 {{index}}</p> -->
</div>
<script>
var vm = new Vue({
el: '#app',
data: {list: [0, 1, 2, 3, 4],
obj: [{ id: 0, name: 'zs0'},
{id: 1, name: 'zs1'},
{id: 2, name: 'zs2'},
{id: 3, name: 'zs3'}
],
user: {
name: 'lisi',
age: 23,
gender: '男'
}
},
methods: {}})
</script>
</body>6.v-if 和 v -show
<body>
<div id="app">
<input type="button" value="v-if 和 v -show" @click="toggle">
<!-- v-if 每次都会重新删除和创建元素, 较高的切换性能 -->
<p v-if="flag">v-if 控制元素 </p>
<!-- v-show 不会重复进行 dom 操作，只会切换元素的 display：none，较高的初始渲染性能 -->
<p v-show="flag">v-show 控制元素 </p>
<!-- 如果涉及到频繁的切换，不要使用 v -if -->
</div>
<script>
var vm = new Vue({
el: '#app',
data: {flag: false},
methods: {toggle() {this.flag = !this.flag}
}
})
</script>
</body>正文完