<html>
<head>
<style>
[v-cloak] {
/* display: none; */
}
</style>
</head>
<body>
<div id="app">
<!--v-cloak解决插入表达式闪烁问题，加载完成后在显示-->
<p v-cloak>+++{{msg}}</p>
<!--
v-text:
1.默认v-text无闪烁问题
2.v-text会覆盖元素中原本的内容
-->
<h4 v-text="msg">--</h4>
<!--v-html直接渲染html元素-->
<div v-html="msg2"></div>
<!--
v-bing:是vue中提供的用于绑定属性的执行,
v-bing:可以使用js表达式，
v-bing可以被简写为:
-->
<input type="button" value="button" :title="myTitle + '222'" />
<!--v-on:事件绑定机制，可以绑定页面事件，缩写@-->
<input type="button" value="button" :title="myTitle + '222'"
v-on:click="show" @mouseover="show" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: '123',
msg2: '<h1>dsadsads</h1>',
myTitle: 'title'
},
methods: {//定义所有可用的方法
show: function () {
alert('hello')
}
}
})
</script>
</body>
</html>
<!-- 使用.stop修饰符阻止事件冒泡，阻止所有事件冒泡 -->
<div class="inner" @click="divHandler">
<input type="button" value="戳他" @click.stop="btnHandler" />
</div>
<!--使用.prevent阻止默认行为-->
<a href="https://baidu.com" @click.prevent="lickClick">百度</a>
<!--使用.carpure实现捕获触发事件机制（从外向里执行）-->
<div class="inner" @click.capture="divHandler">
<input type="button" value="戳他" @click="btnHandler" />
</div>
<!--使用.self实现只有点击当前元素才会触发事件处理，
.self只会阻止自己身上事件的冒泡，不会阻止其他冒泡
-->
<div class="inner" @click.self="divHandler">
<input type="button" value="戳他" @click="btnHandler" />
</div>
<!--使用.once实现只触发一次事件-->
<a href="https://baidu.com" @click.once.prevent="lickClick">百度</a>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<h4>{{msg}}</h4>
<!--v-bing只能实现数据的单向绑定-->
<!-- <input type="text" :value="msg" /> -->
<!--使用v-model实现双向数据绑定，v-model只能运用在表单元素-->
<input type="text" v-model="msg" />
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: '大家都是好学生'
},
methods: {}
})
</script>
</body>
</html>
<!--绑定class-->
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.red{
color: red
}
.thin{
font-weight: 200;
}
.italic{
font-style:initial;
}
.active{
letter-spacing: 0.5em;
}
</style>
</head>
<body>
<div id="app">
<!--
样式绑定分为四种方式：
1.使用数组。
2.使用三元表达式。
3.使用对象。
4.直接在data中定义对象。
-->
<!--传递数组，使用v-bing绑定-->
<h1 :class="['thin','red','italic']">这是一个很大的h1</h1>
<!--使用三元表达式绑定-->
<h1 :class="['thin','red','italic',flag?'active':'']">这是一个很大的h1</h1>
<!--在数组中使用对象来代替三元表达式-->
<h1 :class="['thin','red','italic',{'active':flag}]">这是一个很大的h1</h1>
<!--在为class使用v-bing绑定对象-->
<h1 :class="classObj">这是一个很大的h1</h1>
</div>
<script>
let vm=new Vue({
el:'#app',
data:{
flag:true,
//定义样式
classObj:{red:true,thin:true}
},
methods:{}
})
</script>
</body>
</html>
<!--绑定style-->
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<!--
使用内联样式绑定三种方式：
1.直接通过v-bing设置对象。
2.直接在data中定义对象。
3.使用数组绑定对个对象。
-->
<!--直接通过v-bing设置对象-->
<h1 :style="{color:'red','font-weight':'200'}">这是一个h1</h1>
<!--直接在data中定义对象-->
<h1 :style="styleObj1">这是一个h1</h1>
<!--使用数组绑定多个对象-->
<h1 :style="[styleObj1,styleObj2]">这是一个h1</h1>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
styleObj1: { color: 'red' },
styleObj2: { 'font-weight': '200' }
},
methods: {}
})
</script>
</body>
</html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<!--v-for循环指令-->
<div id="app">
<!--v-for循环,参数为：值、索引-->
<p v-for="(item,index) in list">
id:{{item.id}}-name:{{item.name}}-index:{{index}}
</p>
<!--v-for循环遍历对象,第一个参数value，第二个参数key，第三个参数index-->
<p v-for="(value,key,index) in user">
value:{{value}}-key:{{key}}-index:{{index}}
</p>
<!--v-for迭代数字，v-for循环数字从1开始-->
<p v-for="count in 10">{{count}}</p>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
user: {
id: 1,
name: 'a',
age: 20,
gender: '男'
},
list: [
{ id: 1, name: 'a' },
{ id: 2, name: 'b' }
]
},
methods: {}
})
</script>
</body>
</html>
<!--v-for循环必须设置key-->
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<!--v-for循环必须设置key-->
<div id="app">
<div>
<label>id:
<input type="text" v-model="id" />
</label>
<label>
name:
<input type="text" v-model="name"/>
</label>
<input type="button" value="添加" @click="add" />
</div>
<!--在组件中使用v-for循环时需要指定key-->
<p v-for="item in list" :key="item.id">
<input type="checkbox" />
{{item.id}}-{{item.name}}
</p>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
list: [
{ id: 1, name: 'a' },
{ id: 2, name: 'b' },
{ id: 3, name: 'c' }
]
},
methods: {
add() {
this.list.unshift({ id: this.id, name: this.name })
}
}
})
</script>
</body>
</html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<input type="button" value="toggle" @click="flag = !flag" />
<!--v-if每次都会删除或创建元素-->
<h3 v-if="flag">v-if</h3>
<!--v-show不会进行dom的删除操作，只会切换元素的display属性-->
<h3 v-show="flag">v-show</h3>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
flag: true
},
methods: {
}
})
</script>
</body>
</html>
