指令
指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式(v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。参考文档
v-html/v-text
- v-text
- v-text和差值表达式的区别
- v-text 标签的指令更新整个标签中的内容
- 差值表达式，可以更新标签中局部的内容
- v-text和差值表达式的区别
- v-html
- 可以渲染内容中的HTML标签
- 尽量避免使用，否则会带来危险(XSS攻击 跨站脚本攻击)
v-bind
可以绑定标签上的任何属性。
-
动态绑定图片的路径
<img v-bind:src="src" /> <script> var vm = new Vue({ el: '#app', data: { src: '1.jpg' } }); </script>
-
绑定a标签上的id
<a v-bind:href="'del.php?id=' + id">删除</a> <script> var vm = new Vue({ el: '#app', data: { id: 11 } }); </script> -
绑定class
对象语法和数组语法
-
对象语法
如果isActive为true，则返回的结果为
<div class="active"></div><div v-bind:class="{active: isActive}"> hei </div> <script> var vm = new Vue({ el: '#app', data: { isActive: true } }); </script> -
数组语法
渲染的结果
<div class="active text-danger"></div><div v-bind:class="[activeClass, dangerClass]"> hei </div> <script> var vm = new Vue({ el: '#app', data: { activeClass: 'active', dangerClass: 'text-danger' } }); </script>
-
-
绑定style
对象语法和数组语法
-
对象语法
渲染的结果<div style="color: red; font-size: 18px;"></div>
<div v-bind:style="{color: redColor, fontSize: font18 + 'px'}"> hei </div> <script> var vm = new Vue({ el: '#app', data: { redColor: 'red', font18: 18 } }); </script> -
数组语法
<div v-bind:style="[color, fontSize]">abc</div> <script> var vm = new Vue({ el: '#app', data: { color: { color: 'red' }, fontSize: { 'font-size': '18px' } } }); </script>
-
-
简化语法
<div v-bind:class="{active: isActive}"> </div> <!-- 可以简化为，简化语法更常用 --> <div :class="{active: isActive}"> </div>
v-model
表单元素的绑定
-
双向数据绑定
- 数据发生变化可以更新到界面
- 通过界面可以更改数据
-
绑定文本框
当文本框的值发生边框后，div中的内容也会发生变化
<input type="text" v-model="name"> <div>{{ name }}</div> <script> var vm = new Vue({ el: '#app', data: { name: '' } }); </script> -
绑定多行文本框
<textarea v-model="name"></textarea> <div>{{ name }}</div>注意：多行文本框中不能使用
{{ name }}的方式绑定 -
绑定复选框
- 绑定一个复选框
<input type="checkbox" v-model="checked"> <div>{{ checked }}</div>-
绑定多个复选框
此种方式需要input标签提供value属性
吃饭：<input type="checkbox" value="eat" v-model="checklist"><br> 睡觉：<input type="checkbox" value="sleep" v-model="checklist"><br> 打豆豆：<input type="checkbox" value="ddd" v-model="checklist"><br> {{ checklist }} <script> var vm = new Vue({ el: '#app', data: { checklist: [] } }); </script> -
绑定单选框
男<input type="radio" name="sex" value="男" v-model="sex"> 女<input type="radio" name="sex" value="女" v-model="sex"> {{sex}} <script> var vm = new Vue({ el: '#app', data: { sex: '' } }); </script> -
绑定下拉框
<div id="example-5"> <select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </div>
v-on
绑定事件
-
事件修饰符：
.prevent.once
-
简化语法
<a href="#" @click.prevent="handleDelete">删除<a>
v-show
v-if
v-for
v-cloak
v-once
- 一次性绑定
Vue的选项对象
当创建一个 Vue 实例时，你可以传入一个选项对象。你可以在 API 文档 中浏览完整的选项列表。
-
el选项提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标?？梢允?CSS 选择器，也可以是一个 HTMLElement 实例。
注意：
- 不能作用到
<html>或者<body>上 - 也可以通过
实例.$mount()手动挂载
- 不能作用到
-
data选项- Vue 实例的数据对象，能够响应式数据变化(双向绑定)
- 可以通过
vm.$data访问原始数据对象 - Vue 实例也代理了 data 对象上所有的属性，因此访问
vm.a等价于访问vm.$data.a - 视图中绑定的数据必须显式的初始化到 data 中
-
methods选项methods 将被混入到 Vue 实例中。可以直接通过
vm实例访问这些方法，或者在指令表达式中使用。方法中的this自动绑定为 Vue 实例。注意： 不应该使用箭头函数来定义 method 函数 (例如
plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以this将不会按照期望指向 Vue 实例，this.a将是 undefined。var vm = new Vue({ data: { a: 1 }, methods: { plus: function () { this.a++ } } }) vm.plus() vm.a // 2
案例：表格操作
- 展示列表数据
- 删除数据
- 添加数据
总结：
- Vue 最大程度上减少了页面上的 DOM 操作
- 让开发人员更专注于业务操作
- 通过简洁的指令结合页面结构与逻辑数据
- 代码结构更合理
- 维护成本更低
- 数据驱动
- VueJS 解放了传统 JavaScript 中频繁的 DOM 操作
DevTools
https://github.com/vuejs/vue-devtools
其它知识点
过滤器
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。
需求：对表格案例中的日期进行格式化。
<td>{{ item.date | fmrTime('YYYY-MM-DD HH:mm:ss') }}</td>
<script>
Vue.filter('fmrTime', function (time, formatStr) {
// 使用moment.js对日期进行格式化
return moment(time).format(formatStr);
});
</script>
计算属性
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。
计算属性当依赖的data中的数据发生变化的时候执行
-
计算属性是基于它们的依赖进行缓存的，计算属性只有在它的相关依赖发生改变时才会重新求值。
通过获取时间，演示计算属性和methods中方法的区别(缓存数据的差异)。
计算属性和方法的区别
- 方法每次调用都会执行
- 计算属性只有当依赖的数据方法变化才会执行
需求：表格案例中实现搜索功能
<tr v-for="(item, index) in newList" :key="index">
....
<tr v-if="newList.length === 0">
<script>
var vm = new Vue({
el: ....
computed: {
newList() {
return this.list.filter((item) => {
return item.name.startsWith(this.searchKey);
});
}
}
})
</script>
ref
在Vue.js中操作DOM。
需求：表格案例中让文本框默认获得焦。
- 给要获取焦点的元素增加ref属性
- 在mounted中通过$refs获取DOM元素
<input type="text" ref="username" v-model="name">
<script>
var vm = new Vue({
el: '#app',
// mounted当页面加载完毕执行
mounted: function () {
this.$refs.username.focus();
},
data.....,
});
</script>
注意：Vue.js中不推荐直接操作DOM，除非必须否则不建议这么使用。
自定义指令
除了核心功能默认的指令，例如：v-model 和 v-show，Vue 也允许注册自定义指令。
需求：表格案例中让文本框默认获得焦。 给文本框增加自定义指令 v-focus
<input type="text" v-focus v-model="name">
<script>
// 全局自定义指令
Vue.directive('focus', {
inserted: function (el) {
el.focus();
}
});
</script>
