Vue.js-指令系统
Vue.js 指令系统
模板语法
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。
最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
<span>Message: {{ msg }}</span>
在双大括号内可以写一些简单的逻辑处理，但一般不写。
常用指令
指令以v-开头，用来操作标签的文本值，操作标签的属性，绑定事件
操作标签的文本值
- v-text: 渲染文本值
- v-html: 渲染原始标签
- v-for: ，注意 v-bind:key=数据唯一值 、优先级高
- v-if, v-else-if, v-else: 判断标签是否显示
- 只渲染出需要显示的页面，用appendChild, appendChild, 实现
- v-show：判断标签是否显示
- 渲染出所有页面，用display实现
- v-show与v-if
- 渲染的开销,v-if低，v-show高
- 切换的开销，v-if高，v-show低
操作标签的属性（class，href，src）
- v-bind:href=""
- v-bind:class=""
简写 :
将标签的某个属性与Vue实例里的数据属性绑定
绑定事件 methods
- v-on:click="myClick"
- 绑定事件，必须要有一定的触发条件才能执行，如点击事件
- 只要发生重新渲染，method 调用总会执行该函数
注意：属性通过vue绑定的时候，必须加上冒号
简写 @
计算属性 computed
- 可以监听多个值（只要数据修改，就触发重新计算）
- HTML DOM加载后马上执行的，如赋值；
- computed计算属性是基于它们的依赖进行缓存的，computed只有在它的相关依赖发生改变时才会重新求值
侦听属性 watch
它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。
methods与computed区别
方法，每次都执行
计算属性，计算属性的数据没变就直接使用之前的结果
computed与watch区别
侦听器适用于那些
当某个值发生变化之后，我就要做什么事情 这种场景！
其他的场景都用计算属性就可以了
双向数据绑定
v-model，双向数据绑定 获取用户输入的标签 <==> Vue实例里的数据属性
指令修饰符
- v-model.number 输入格式化为数字
- v-model.lazy 延迟加载
- v-model.number.lazy 输入格式化为数字且延迟加载
自定义指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./static/vue.js"></script>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<div class="box" v-pos="flag"></div>
</div>
<script>
// directive就是vue实现指令系统的后台的功能函数
Vue.directive("pos", function (el, binddings) {
if (binddings.value === true) {
el.style.position = 'fixed';
el.style.bottom = '0';
el.style.left = '0';
}
});
new Vue({
el: '#app',
data: {
flag: true,
},
});
</script>
</body>
</html>
获取DOM源
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./static/vue.js"></script>
</head>
<body>
<div id="app">
<div ref="myRef"><h2>hahha</h2></div>
<button @click="changeColor">变绿</button>
</div>
<script>
new Vue({
el: "#app",
methods: {
changeColor: function () {
this.$refs.myRef.style.color = 'green';
}
}
});
</script>
</body>
</html>
轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./static/vue.js"></script>
</head>
<body>
<div id="app">
<img :src="imgAry[cur]" alt="" style="height: 150px;">
<br>
<button v-on:click="pre">上一张</button>
<button v-on:click="next">下一张</button>
</div>
<script>
new Vue({
el: "#app",
data: {
imgAry: ['./images/timg.jpg', './images/timg2.jpg', './images/timg3.jpg'],
cur: 0,
},
methods: {
pre: function () {
if (this.cur === 0) {
this.cur = this.imgAry.length - 1;
} else {
this.cur--;
}
},
next: function () {
if (this.cur === this.imgAry.length - 1) {
this.cur = 0;
} else {
this.cur++;
}
},
}
})
</script>
</body>
</html>
小清单 todolist
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>小清单</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<script src="./static/vue.js"></script>
<style>
.doneColor {
color: green;
}
.doneLine {
text-decoration: line-through;
}
</style>
</head>
<body>
<div id="todoList" class="container">
<div class="row " style="margin-top: 50px">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">小清单</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<div class="input-group">
<input type="text" class="form-control" placeholder="请输入待办事项..." v-model="todo.title">
<span class="input-group-btn">
<button class="btn btn-success" type="button" v-on:click="add"><span
class="glyphicon glyphicon-plus"></span></button>
</span>
</div>
</div>
</div>
<hr>
<ul class="list-group">
<li class="list-group-item" v-for="(val,index) in todoList" :key="index">
<span class="glyphicon glyphicon-ok-sign"
v-bind:class="{doneColor : val.status }" v-on:click="complete(index)"></span>
<span v-bind:class="{doneLine:val.status }">{{ val['title'] }}</span>
<span class="glyphicon glyphicon-remove-sign pull-right" v-on:click="del(index)"></span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script>
let app = new Vue({
el: '#todoList',
data: {
todo: {'title': '', 'status': false},
todoList: [
{'title': '吃饭', 'status': true},
{'title': '睡觉', 'status': false},
{'title': '洗澡', 'status': false},
]
},
methods: {
add() {
if (this.todo.title.trim() === '') {
return
}
this.todoList.push(this.todo);
this.todo = {'title': '', 'status': false};
},
complete(index){
this.todoList[index].status=true;
},
del(index){
this.todoList.splice(index,1);
}
}
})
</script>
</body>
</html>
