前言：很久之前学过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>
发表回复