vue-指令
1.v-cloak
使用 v-cloak 能够解决 插值表达式闪烁的问题
<div id="app" v-cloak>
{{context}}
</div>
[v-cloak] {
display: none;
}
2.v-text
<h4 v-text="msg">==================</h4>
<!-- 默认 v-text 是没有闪烁问题的 -->
v-text会覆盖元素中原本的内容，但是 插值表达式 只会替换自己的这个占位符，不会把 整个元素的内容清空
3.v-html
会解析标签，只展示内容
<h3 v-html="msg2"></h3>
var vm = new Vue({
el: '#app',
data: {
msg: '123',
msg2: '<h1>哈哈，我是一个大大的H1， 我大，我骄傲</h1>',
mytitle: '这是一个自己定义的title'
},
methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
show: function () {
alert('Hello')
}
}
})
4. v-bind: 指令可以被简写为 :要绑定的属性
v-bind 中，可以写合法的JS表达式
<input type="button" value="按钮" v-bind:title="mytitle + '123'">
<input type="button" value="按钮" :title="mytitle + '123'">
5. v-on: 事件绑定机制的简写：@click
<input type="button" value="按钮" :title="mytitle + '123'" v-on:click="alert('hello')">
<input type="button" value="按钮" @click="show">
6.跑马灯效果
<div id="app">
<input type="button" value="浪起来" @click="lang">
<input type="button" value="低调" @click="stop">
<h4>{{ msg }}</h4>
</div>
var vm = new Vue({
el: '#app',
data: {
msg: '大咪咪别闷，了浪起来~~！',
intervalId: null // 在data上定义 定时器Id
},
methods: {
lang() {
// console.log(this.msg)
// 获取到头的第一个字符
// this
if (this.intervalId != null) return;
this.intervalId = setInterval(() => {
var start = this.msg.substring(0, 1)
// 获取到 后面的所有字符
var end = this.msg.substring(1)
// 重新拼接得到新的字符串，并赋值给 this.msg
this.msg = end + start
}, 400)
},
stop() { // 停止定时器
clearInterval(this.intervalId)
// 每当清除了定时器之后，需要重新把 intervalId 置为 null
this.intervalId = null;
}
}
})
7.事件修饰符
使用 .stop 阻止冒泡
使用 .prevent 阻止默认行为
使用 .capture 实现捕获触发事件的机制 ；从外到里
使用 .self 实现只有点击当前元素时候，才会触发事件处理函数
使用 .once 只触发一次事件处理函数
<a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a>
演示： .stop 和 .self 的区别
.self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为
8.v-model
v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V， 无法实现数据的双向绑定
使用 v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定
注意： v-model 只能运用在 表单元素中
input(radio, text, address, email....) select checkbox textarea
9.使用v-model实现计算器的案例
10.vue中样式
class类样式：
第一种使用方式，直接传递一个数组，注意： 这里的 class 需要使用 v-bind 做数据绑定
在数组中使用三元表达式
在数组中使用 对象来代替三元表达式，提高代码的可读性
在为 class 使用 v-bind 绑定 对象的时候，对象的属性是类名，由于 对象的属性可带引号，也可不带引号，所以 这里我没写引号； 属性的值 是一个标识符
内联样式：
对象就是无序键值对的集合
11.v-for循环普通数组
v-for循环中key属性的使用：
v-for 循环的时候，key 属性只能使用 number获取string
key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值
在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值
12.v-if和v-show
v-if 的特点：1.每次都会重新删除或创建元素
2.有较高的切换性能消耗
v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式
v-show 有较高的初始渲染消耗
如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show
如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if
13.过滤器：filter
<!-- 过滤器调用时候的格式 {{ name | 过滤器的名称 }} -->
全局的过滤器， 进行时间的格式化
所谓的全局过滤器，就是所有的VM实例都共享的
// 定义私有过滤器 过滤器有两个 条件 【过滤器名称 和 处理函数】
// 过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候 优先调用私有过滤器
14.字符串的padStart方法使用
15.自动获取焦点
<!-- 注意： Vue中所有的指令，在调用的时候，都以 v- 开头 -->
Vue.directive('focus', {
bind: function(el) { // 每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次
// 注意： 在每个 函数中，第一个参数，永远是 el ，表示 被绑定了指令的那个元素，这个 el 参数，是一个原生的JS对象
// 在元素 刚绑定了指令的时候，还没有 插入到 DOM中去，这时候，调用 focus 方法没有作用
// 因为，一个元素，只有插入DOM之后，才能获取焦点
// el.focus()
},
inserted: function(el) { // inserted 表示元素 插入到DOM中的时候，会执行 inserted 函数【触发1次】
el.focus()
// 和JS行为有关的操作，最好在 inserted 中去执行，放置 JS行为不生效
},
updated: function(el) { // 当VNode更新的时候，会执行 updated， 可能会触发多次
}
})
-----------------------------------------------------------------
品牌案例-完成品牌列表的添加功能
npm install jquery@2.2.3 --save-dev
npm install bootstrap@3.3.0 --save-dev
<template>
<div>
<h3>商品</h3>
<div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel-body form-inline">
<label>
Id:
<input type="text" class="form-control" v-model="id">
</label>
<label>
Name:
<input type="text" class="form-control" v-model="name">
</label>
<!-- 在Vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了 -->
<input type="button" value="添加" class="btn btn-primary" @click="add1()">
<label>
搜索名称关键字：
<input type="text" class="form-control" v-model="keywords">
</label>
</div>
</div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<!-- 之前， v-for 中的数据，都是直接从 data 上的list中直接渲染过来的 -->
<!-- 现在， 我们自定义了一个 search 方法，同时，把 所有的关键字，通过传参的形式，传递给了 search 方法 -->
<!-- 在 search 方法内部，通过 执行 for 循环， 把所有符合 搜索关键字的数据，保存到 一个新数组中，返回 -->
<tr v-for="item in list" :key="item.id">
<td>{{ item.id }}</td>
<td v-text="item.name"></td>
<td>{{ item.ctime }}</td>
<td>
<a href="" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
export default {
name: "shoplist",
data() {
return {
id: '',
name: '',
list: [
{ id: 1, name: '奔驰', ctime: new Date() },
{ id: 2, name: '宝马', ctime: new Date() }
],
keywords: '' // 搜索的关键字
}
},
methods: {
add1(){
/* // 分析：
// 1. 获取到 id 和 name ,直接从 data 上面获取
// 2. 组织出一个对象
// 3. 把这个对象，调用 数组的 相关方法，添加到 当前 data 上的 list 中
// 4. 注意：在Vue中，已经实现了数据的双向绑定，每当我们修改了 data 中的数据，Vue会默认监听到数据的改动，自动把最新的数据，应用到页面上；
*/
var car = { id: this.id, name: this.name, ctime: new Date() }
this.list.push(car)
this.id = this.name = ''
}
}
}
</script>
<style scoped>
/* //import 'bootstrap/dist/css/bootstrap.min.css' */
.text {
border: 1px solid #ccc;
width: 100px;
}
.red {
color: red;
}
.thin {
font-weight: 200;
}
.italic {
font-style: italic;
}
.active {
letter-spacing: 0.5em;
}
</style>
-----------------------------------------------
完整的实例
<template>
<div>
<h3>商品</h3>
<div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel-body form-inline">
<label>
Id:
<input type="text" class="form-control" v-model="id">
</label>
<label>
Name:
<input type="text" class="form-control" v-model="name" @keyup.f2="add1">
</label>
<!-- 在Vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了 -->
<input type="button" value="添加" class="btn btn-primary" @click="add1()" v-fontweight="900" v-fontsize="30">
<label>
搜索名称关键字：
<!-- 注意： Vue中所有的指令，在调用的时候，都以 v- 开头 -->
<input type="text" class="form-control" v-model="keywords" id="search" >
</label>
</div>
</div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<!-- 之前， v-for 中的数据，都是直接从 data 上的list中直接渲染过来的 -->
<!-- 现在， 我们自定义了一个 search 方法，同时，把 所有的关键字，通过传参的形式，传递给了 search 方法 -->
<!-- 在 search 方法内部，通过 执行 for 循环， 把所有符合 搜索关键字的数据，保存到 一个新数组中，返回 -->
<tr v-for="item in search(keywords)" :key="item.id">
<td>{{ item.id }}</td>
<td v-text="item.name"></td>
<td>{{ item.ctime|dateFormat}}</td>
<td>
<a href="" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<h3>过滤器</h3>
<div>
<p>{{ msg | msgFormat('疯狂+1', '123') | test }}</p>
</div>
</div>
</template>
<script>
export default {
name: "shoplist",
data() {
return {
id: '',
name: '',
list: [{
id: 1,
name: '奔驰',
ctime: new Date()
},
{
id: 2,
name: '宝马',
ctime: new Date()
}
],
keywords: '', // 搜索的关键字
msg: "曾经，我也是一个单纯的xx，单纯的xx，傻傻的问，xxxx"
}
},
filters: {
msgFormat: function(msg, arg, arg2) {
// 字符串的 replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
return msg.replace(/单纯/g, arg + arg2)
},
test: function(msg) {
return msg + '========'
},
dateFormat: function(dateStr, pattern = "") {
// 根据给定的时间字符串，得到特定的时间
var dt = new Date(dateStr)
// yyyy-mm-dd
var y = dt.getFullYear()
var m = (dt.getMonth() + 1).toString().padStart(2, '0')
var d = dt.getDate().toString().padStart(2, '0')
// return y + '-' + m + '-' + d
if (pattern && pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`
} else {
var hh = dt.getHours().toString().padStart(2, '0')
var mm = dt.getMinutes().toString().padStart(2, '0')
var ss = dt.getSeconds().toString().padStart(2, '0')
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
}
},
methods: {
add1() {
/* // 分析：
// 1. 获取到 id 和 name ,直接从 data 上面获取
// 2. 组织出一个对象
// 3. 把这个对象，调用 数组的 相关方法，添加到 当前 data 上的 list 中
// 4. 注意：在Vue中，已经实现了数据的双向绑定，每当我们修改了 data 中的数据，Vue会默认监听到数据的改动，自动把最新的数据，应用到页面上；
*/
var car = {
id: this.id,
name: this.name,
ctime: new Date()
}
this.list.push(car)
this.id = this.name = ''
},
del(ID) {
/* this.list.some((item, i) => {
if (item.id == ID) {
this.list.splice(i, 1)
// 在 数组的 some 方法中，如果 return true，就会立即终止这个数组的后续循环
return true;
}
}) */
var index = this.list.findIndex(item => {
if (item.id == ID) {
return true;
}
})
// console.log(index)
this.list.splice(index, 1)
},
search(keywords) {
// 根据关键字，进行数据的搜索
/* var newList = []
this.list.forEach(item => {
if (item.name.indexOf(keywords) != -1) {
newList.push(item)
}
})
return newList; */
// 注意： forEach some filter findIndex 这些都属于数组的新方法，
// 都会对数组中的每一项，进行遍历，执行相关的操作；
return this.list.filter(item => {
// if(item.name.indexOf(keywords) != -1)
// 注意 ： ES6中，为字符串提供了一个新方法，叫做 String.prototype.includes('要包含的字符串')
// 如果包含，则返回 true ，否则返回 false
// contain
if (item.name.includes(keywords)) {
return item
}
})
}
},
directives: { // 自定义私有指令
'fontweight': { // 设置字体粗细的
bind: function (el, binding) {
el.style.fontWeight = binding.value
}
},
'fontsize': function (el, binding) { // 注意：这个 function 等同于 把 代码写到了 bind 和 update 中去
el.style.fontSize = parseInt(binding.value) + 'px'
}
}
}
//document.getElementById('search').focus()
</script>
<style scoped>
/* //import 'bootstrap/dist/css/bootstrap.min.css' */
.text {
border: 1px solid #ccc;
width: 100px;
}
.red {
color: red;
}
.thin {
font-weight: 200;
}
.italic {
font-style: italic;
}
.active {
letter-spacing: 0.5em;
}
</style>
