语法
文本：
{{msg}}
<body>
<div id="app">
{{ msg }}
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app', // document.querySelector('#app),表示这个节点的内部使用vue的语法
data: { // 初始化的数据
msg: '<mark>hello vue</mark>'
}
})
</script>
HTML：
、v-html vue提供的一个指令，相当于原生js中的innerHTML功能，相当于jq中的（）.html（）
、v-text vue提供的一个指令，相当于原生js中的 innerText 的功能,相当于 jQuery 中的().text() ,一般会用 文本 形式代替 {{ msg }},
<div v-html="msg"></div>
data: {
msg: '<h1>hello vue</h1>'
}
表达式：
三元运算符
{{ sex == 0 ? '女' : '男' }}
{{ msg.split('').reverse().join('*') }}
data: {
sex: 0,
msg: 'hello vue'
}
<body>
<div id="app">
{{ msg }}--- {{ msg + '!!!'}} --- {{ msg.split('').reverse() }} --
{{ msg.split('').reverse().join('') }}
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: 'hello vue'
}
})
</script>
语法缩写
* 事件简写形式 v-on:click =》 @click
click ---- 原生js
click — vue
<button @click=“fn()”>click — vue简写
* 属性的简写形式 v-bind:class =》 :class
指令
vue中含有v-前缀的特殊属性 ---- 指令
input中使用v-model ，就会把它的值当做是输入框的value值
标签上v-html，就会把它的值插入到该标签内部 v-text
v-if 条件判断 v-else-if v-else
v-show 条件判断
v-for 遍历循环使用
v-on 绑定事件
v-bind 绑定属性
不常用的
v-slot
v-pre
v-cloak
v-once
事件绑定
<body>
<div id="app">
<button v-on:click="showMsg">vue的简单事件</button>
<button v-on:click="showMsg()">vue的简单事件</button>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: 'hello vue'
},
methods: {// vue中所有自定义的 函数 必须放在此选项内部
showMsg () { // 如果此函数需要参数，则在绑定时添加（）
alert(this.msg)
}
}
})
// 'hello vue'
</script>
<body>
<div id="app">
<button v-on:click="showMsg">vue的简单事件</button>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: 'hello vue'
},
methods: {
showMsg (event) { // 如果不加括号，默认参数为事件对象
console.log(event)
}
}
})
</script>
<body>
<div id="app">
<button v-on:click="showMsg($event)">vue的简单事件</button>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: 'hello vue'
},
methods: {
showMsg (event) { // 如果加括号，没有默认参数。如果要使用事件对象，传参为 $event
console.log(event)
}
}
})
</script>
冒泡
这里是引用
<!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>模板语法-文本</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f66;
}
</style>
</head>
<body>
<div id="app">
<div class="box" v-on:click="showBox">
<button class="btn" v-on:click="showBtn">点击</button>
</div>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: 'hello vue'
},
methods: {
showBox (event) {
event.preventDefault(); // 阻止默认事件
console.log('box')
},
showBtn (event) {
event.stopPropagation(); // 阻止冒泡
console.log('btn')
}
}
})
</script>
</html>
事件修饰符
<!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>模板语法-文本</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f66;
}
</style>
</head>
<body>
<div id="app">
<div class="box" v-on:click.prevent="showBox">
<button class="btn" v-on:click.stop="showBtn">点击</button>
</div>
</div>
</body>
<script src="vue.js"></script>
<script>
/**
* 事件修饰符 .stop .prevent
* 按键修饰符
* 系统修饰键
* */
new Vue({
el: '#app',
data: {
msg: 'hello vue'
},
methods: {
showBox () {
console.log('box')
},
showBtn () {
console.log('btn')
}
}
})
</script>
</html>
按键修饰符
<!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>模板语法-文本</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f66;
}
</style>
</head>
<body>
<div id="app">
<input type="text" v-on:keyup="showUserName" v-model="username">
<input type="text" v-on:keyup.enter="showUserName" v-model="username">
<input type="text" @keyup.13="showUserName" v-model="username">
</div>
</body>
<script src="vue.js"></script>
<script>
/**
* 事件修饰符 .stop .prevent
* 按键修饰符 .enter
* 系统修饰键
* */
new Vue({
el: '#app',
data: {
username: 'wudaxun'
},
methods: {
showUserName (event) {
// if (event.keyCode === 13) {
console.log(this.username)
// }
}
}
})
</script>
</html>
绑定属性
<!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>模板语法-文本</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f66;
}
.active {
color: #f66;
}
</style>
</head>
<body>
<div id="app">
<div class="box"></div>
<div test="aaa"></div>
<div text = "username"></div>
<div v-bind:text = "username"></div>
<button @click="aindex=0">000</button>
<button @click="aindex=1">111</button>
<button @click="aindex=2">222</button>
<ul>
<li v-bind:class="aindex === 0 ? 'active' : ''">0000</li>
<li v-bind:class="aindex === 1 ? 'active' : ''">1111</li>
<!-- <li v-bind:class="aindex === 2 ? 'active' : ''">2222</li> -->
<li :class="aindex === 2 ? 'active' : ''">2222</li>
</ul>
</div>
</body>
<script src="vue.js"></script>
<script>
/**
*
* */
new Vue({
el: '#app',
data: {
username: 'wudaxun',
aindex: 0
}
})
</script>
</html>
