Vue: 常用指令
创建vue实例
第一个vue实例
<div id="app">{{huanying}}</div>
<script>
//创建vue实例
new Vue({
el: "#app",
data: {
huanying: 'Hello Vue!'
}
})
</script>
数据模板引擎
v-开头的指令是帮助我们渲染数据用的
v -text 标签内添加文字
<div id="app" v-text="huanying"></div>
<script>
//v-text 标签内添加文字
new Vue({
el: "#app",
data: {
huanying: 'Hello Vue!'
}
})
</script>
v -html 标签内添加 <标签>文字</标签>
<div id="app" v-html="huanying"></div>
<script>
//v-html 可以加<标签>文字</标签>
new Vue({
el: "#app",
data: {
huanying: '<h1>Hello Vue!</h1>'
}
})
</script>
v -for 循环
<div id="app">
<ul>
<li v-for="hobby in hobbys">{{hobby}}</li>
</ul>
<ul>
<li v-for="s in students">{{s.name}}</li>
</ul>
</div>
<script>
new Vue({
el: "#app",
data: {
hobbys: ['eat', 'drink', 'sleep', 'shit'],
students: [
{
name: "an",
age: 11,
hobby: "sleep"
},
{
name: "ben",
age: 12,
hobby: "sleep"
},
{
name: "carl",
age: 13,
hobby: "sleep"
},
],
}
})
</script>
v -if 判断, v-if v-else-if v-else
<div id="app">
<div v-if='name1=="ann"'>
<h1>如果name=ann显示这一条</h1>
</div>
<div v-else-if='name2=="ben"'>
<h1>如果name=ben显示这一条</h1>
</div>
<div v-else>
<h1>如果是别的,显示这一条</h1>
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
name1: "ann",
name2: "ben",
}
})
</script>
v -show 根据data中 的布尔值 操作
<div id="app" v-show="showdata">能显示出来嘛?</div>
<script>
new Vue({
el:"#app",
data:{
// showdata:false,
showdata:true,
}
})
</script>
v -bind: 绑定属性
注意冒号后面跟标签的属性，属性后面的等号指向数据，它可以简写为 :class, :href
<!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="vue.min.js"></script>
<style>
.active{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<a v-bind:href="link">click_here</a>
<div v-bind:class="[isActive]"></div>
</div>
<script>
new Vue({
el:"#app",
data:{
link:"https://baidu.com",
isActive:"active",
}
})
</script>
</body>
</html>
v -on: 在标签上面绑定事件
<!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="vue.min.js"></script>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<div id="app">
<h2 :class="{ active:isActive }">点点点</h2>
<button v-on:click="changeColor">点击变色</button>
</div>
<script>
new Vue({
el: "#app",
data: {
isActive: false
},
methods: {
changeColor: function () {
this.isActive = !this.isActive;
},
}
})
</script>
</body>
</html>
v -on: 在标签上面绑定事件
用户修改渲染的原始数据后，打印修改后的数据,
我们需要vue实例可以帮我们渲染数据并响应式的监听数据修改，同时我们还需要监听用户行为，如果用户在标签上面修改了数据（之前的修改，指的是通过vue实例app01进行的数据修改），我们需要获取到数据，针对这个需求，我们可以使用v-mode指令。
<div id="app">
<input type="text" v-model="name">
<input type="checkbox" value="男" v-model="genders">
<input type="checkbox" value="女" v-model="genders">
<select name="" id="" v-model="girlfriends">
<option>ann</option>
<option>ben</option>
<option>cat</option>
</select>
<hr>
{{name}}
{{genders}}
{{girlfriends}}
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
name: 'ann',
genders: [],
girlfriends: [],
}
})
</script>
</body>
</html>
计算属性: computed
<div id="app">
<table border="1">
<thead>
<tr>
<th>选项</th>
<th>填写</th>
</tr>
</thead>
<tbody>
<tr>
<td>人物</td>
<td><input type="text" v-model="who"></td>
</tr>
<tr>
<td>地点</td>
<td><input type="text" v-model="where"></td>
</tr>
<tr>
<td>干什么</td>
<td><input type="text" v-model="what"></td>
</tr>
<tr>
<td>组成的话</td>
<td>{{score}}</td>
</tr>
</tbody>
</table>
<hr>
{{who}}
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
who: "",
where: "",
what: "",
},
//computed 计算/合并
computed: {
score: function () {
return this.who + this.where + this.what
}
},
})
侦听属性/侦听器: watch
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
<div id="app">
<table border="1">
<thead>
<tr>
<th>科目</th>
<th>的分</th>
</tr>
</thead>
<tbody>
<tr>
<td>语文</td>
<td><input type="text" v-model="yuwen"></td>
</tr>
<tr>
<td>数学</td>
<td><input type="text" v-model="shuxue"></td>
</tr>
<tr>
<td>英语</td>
<td><input type="text" v-model="yingyu"></td>
</tr>
<tr>
<td>的分</td>
<td>{{score}}</td>
</tr>
</tbody>
</table>
<hr>
{{yuwen}}
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
yuwen: "",
shuxue: "",
yingyu: "",
},
//computed 计算/合并
computed: {
score: function () {
return this.who + this.where + this.what
}
},
// 侦听属性
watch:{
yuwen:function () {
alert('语文成绩变了啊!')
}
}
})
</script>
获取DOM元素: methods
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script src="./vue.min.js"></script>
<style>
.active {
color: green;
}
</style>
</head>
<body>
<div id="app">
<div ref="myRef">点点点</div>
<button v-on:click="changeColor">点击变色</button>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
isActive: 'active',
},
methods: {
changeColor: function () {
this.$refs.myRef.className = this.isActive;
}
},
})
</script>
</body>
</html>
自定义指令:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script src="./vue.min.js"></script>
<style>
.box {
width: 100px;
height: 100px;
background-color: #5bc0de;
}
</style>
</head>
<body>
/* 页面展示的时候 方框移动到右下角 */
<div id="app">
<div v-bind:class="{ box: isShow}" v-pos.right.bottom="leftBottom">Hello Vue!</div>
</div>
<script>
Vue.directive("pos", function (el, bindding) {
if (bindding.value) {
el.style['position'] = 'fixed';
for (let key in bindding.modifiers) {
el.style[key] = 0;
}
}
});
let vm = new Vue({
el: "#app",
data: {
leftBottom: true,
isShow: true,
},
})
</script>
</body>
</html>
