Vue高级语法

基础-系统指令-v-bind基本用法

• 作用: 绑定标签上的任何属性
• 场景: 当标签上的属性是变量/动态/需要改变的
• 用法:

// ID为数据对象中的变量值 
<p v-bind:id="ID"></p>   
// 简写
<p :id="ID"></p>  

基础-系统指令-v-bind绑定class(对象)

用法: 绑定class对象语法 :class="{ class名称: 布尔值}"

<p class="obox" :class="{obox:isBn}">内容</p>  // isBn为 data选项中的属性

注意: 绑定class和原生class会进行合并(但是不会合并重复的)

基础-系统指令-v-bind-绑定class(数组)

• 绑定class数组语法 :class="[a,b]"
• a、b为data属性的key
• data中key对应的value 为class名字

<p :class="[a,b]">内容</p>

data:{
	a:'obox'，
	b:'left'
}

基础-系统指令-v-bind-绑定style（对象）

语法:style="{css属性名:属性值}"

<p :style="{color:a,fontSize:b}"></p> 

//a、b为data属性的key
data: {
  a: 'red',
  b: '30px'
},

注意 css属性名 例如 font-size要写成 fontSize 以此类推 原有的style会覆盖

基础-系统指令-v-bind-绑定style（数组）

// 语法: 
<div :style="[a,b]"></div>   
// a,b 为data的属性
data: { 
  a: { color: "red" },
  b: { fontSize: "30px" } 
}

注意 对象可以是多个属性的 集合 同样里面的css属性需要遵从小驼峰命名的规则

基础-系统指令-v-model-基础用法

作用: 表单元素的绑定

特点: 双向数据绑定

• 数据发生变化可以更新到界面
• 通过界面可以更改数据
• v-model 绑定表单元素，会忽略所有表单元素的 value、checked、selected 特性的初始值
• 表单元素会将 Vue 实例的data中的数据作为数据来源，所以应该在 data选项中声明初始值。

// 表单中设置value值没用 v-model会忽略
<input type="text" v-model="msg"  value="zhang">
<p>{{msg}}</p>
// 在data中设置msg
data: {
	msg: 'zhangsan'
}

基础-系统指令-v-model-原理及实现

分析

• 表单元素绑定的数据改变 => data数据发生改变=> 页面数据变化

<p>{{msg}}</p>
<input type="text" :value="msg" @input="fn($event)">

data: {
     msg: 'abc'
},
methods: {
    fn(e) {
    	//msg=最新的value
    	this.msg = e.target.value
    }
}

基础-系统指令-v-model-绑定其他表单元素

表单元素: input textarea checkbox radio select

注意 checkbox在input标签中需要给定value值

任务:

1. 实例化一个Vue实例
2. input 绑定 属性 nameInput,实现input同步
3. textarea 绑定 属性 nameTextArea 实现textarea同步
4. checkbox 绑定一个属性 nameCheckbox 实现 checkbox同步
5. 多个 checkbox绑定同一个属性 nameCheckboxs 实现 checkbox同步 北京 上海 天津
6. radio 绑定属性 nameRadio 实现同步 男 女
7. select 绑定属性 nameSelect 实现同步 北京 上海 天津

路径:https://cn.vuejs.org/v2/guide/forms.html

基础-系统指令-v-cloak

场景: 解决页面初次渲染时 页面模板闪屏现象

​ 1. 写入v-cloak指令

​ 2. 在style里面加给v-cloak加上display: none;

注意: 避免多次写入标签 可以一次性 将v-cloak引用在实例视图上

<style>
[v-cloak] {
  display: none;
}
</style>
<div id="app" v-cloak>
{{msg}}
</div>

基础-系统指令-v-once

作用: 指令所在元素只渲染一次

<p v-once>{{msg}}</p>
<input type="text" v-model="msg">

基础-过滤器-过滤器的分析

• 场景: 格式化data数据(日期格式/货币格式/大小写等)

• 分类: 本地(局部)和全局 全局是所有实例均可使用

• 本地:

// 组件的选项中定义本地的过滤器
filters: {
 过滤器名字:function (value) {
     return ....
 }
}

• 全局

// 如何注册一个全局过滤器
Vue.filter("过滤器名字", function(value) {
	return ......
});

使用:

// 过滤器应该被添加在尾部 每个过滤器用管道符分隔
// 第一种用法在双花括号中
{{  数据 | 过滤器名字 }}

// 第二种用法在 v-bind 中
<div v-bind:id="数据 |过滤器名字 "></div>

任务:

1. 看过滤器API的用法https://cn.vuejs.org/v2/guide/filters.html>

基础-过滤器-过滤器的基本用法

1. 在创建 Vue 实例**之前**定义全局过滤器Vue.filter()
2. 在实例的filter选项中定义局部过滤器
3. 在视图中通过{{数据 | 过滤器名字}}或者v-bind使用过滤器

// 如何注册一个全局过滤器
Vue.filter("过滤器名字", function(value) {
	return value.charAt(0).toUpperCase() + value.substr(1);
});
// 如果注册一个局部过滤器
filters: {
 过滤器名字:function (value) {
     return value.charAt(0).toUpperCase() + value.substr(1);
 }
}

任务: 注册一个全局或者局部过滤器,实现 abc 转成 Abc的功能

基础-过滤器-传参数和串联使用

• 过滤器可以传递参数,接收的第一个参数永远是前面传递过来的过滤值
• 过滤器也可以多个串行起来并排使用,

// 多个过滤器用 | 分割
<p>{{count|a('元')|b}}</p> 
// 定义过滤器
filters：{
   //  第一个参数永远是前面传递过来的过滤值
    a:function(val,y){
        // val 是count值
        // y 是‘元’
    }
}

任务:实现一个过滤器,假如是数字100过滤完出来是100元人民币

基础-表格案例-使用过滤器完成日期格式处理

路径: 格式化需要借助第三方插件

​ 1 . 引入第三方格式化日期插件 moment.js

​ 2 . 定义格式化日期过滤器

​ 3. 实现其格式化功能

​ 4 . 使用过滤器

// 全局过滤器代码
Vue.filter("fmtDate", function (v) {
	return moment(v).format('YYYY-MM-DD h:mm:ss a')
})

基础-ref属性-获取DOM

使用: 给元素定义ref属性, 然后通过$refs.名称 来获取dom对象

<input type="text" ref="txt">// 定义ref

// 获取DOM的value值
methods: {
 getVal() {
    	//获取dom
     console.log(this.$refs.txt)
 }
}

任务 通过ref功能,点击按钮时获取input的value值

基础-自定义指令-全局自定义指令

• 使用场景:需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令
• 分类:全局和局部
• 全局自定义指令:

1. 在创建 Vue 实例之前定义全局自定义指令Vue.directive(参数1，参数2)

   • 第一参数是指令名称

• 第二参数是一个对象
  • 对象中要实现inserted方法
  • inserted方法中的参数为当前指令 所在元素的DOM对象

// 1.注册一个自定义指令
Vue.directive( '指令名称' , { 
     inserted(参数){  //参数为使用指令的DOM
        //操作
     }
})
// 2.使用自定义指令
<input type="text" v-指令名称>

// 示例(全局自动聚焦的自定义指令)
Vue.directive("focus", {
    inserted(dom) {
        dom.focus();
    }
});
// 使用自定义指令
<input type="text" v-focus>

任务 实现一个可以自动聚焦input的自定义指令v-focus

基础-自定义指令-局部自定义指令

//局部指令在vue实例内部定义
directives: {
 "focus": {
       inserted(dom) {
             dom.focus();
          }
    }
   }
   // 调用
<input type="text" v-focus>

任务 实现一个可以自动聚焦input的局部自定义指令v-focus

基础-表格案例-使用自定义指令完成自动获取焦点功能

**目标:**根据所学自定义指定 实现表格案例 自动获取焦点功能

基础-实例选项-计算属性-文档分析

• 场景:当表达式过于复杂的情况下 可以采用计算属性 对于任何复杂逻辑都可以采用计算属性

参考:https://cn.vuejs.org/v2/guide/computed.html#基础例子

基础-实例选项-计算属性-基本使用

使用: 在Vue实例选项中 定义 computed:{ 计算属性名: **带返回值**的函数 }

示例: 通过计算属性实现字符串的翻转

1. 定义数据对象

2. 实现计算属性方法

3. 使用计算属性

data: {
 	message: 'hello'
},
computed: {
    reverseMessage: function () {
        // this指向 vm 实例
        return this.message.split('').reverse().join('')
    }
}
// computed里的函数直接用 不加() 但是必须得return
<p>{{ message }}</p>
<p>{{ reversedMessage }}</p>

计算属性 和 methods方法的区别:

1. 计算属性不需要调用形式的写法 而methods方法必须采用 方法() 调用的形式
2. 计算属性依赖data中的数据变化,如果data并没有发生变化,则计算属性则会取缓存的结果,
3. methods不论data变化与否 只要调用 都会重新计算

**注意:**当数据对象中 message发生变化时 计算属性也会重新计算计算=> 改变页面视图

表格案例-用计算属性实现商品搜索

**效果**搜索框内容变化=> 列表内容变化

使用计算属性实现品牌搜索

​ 1.定义品牌搜索的内容

​ 2.定义计算属性

​ 3.实现计算属性的筛选功能（筛选列表）

​ 4.计算属性替换原有的列表数据

computed: {
// 实现计算属性
// 用到了 数组的filter筛选功能  和 字符串的 startsWith 校验功能
newList() {
return this.list.filter(item => {
  return item.name.startsWith(this.searchValue);
 });
 }
}