vue学习的第二天（v指令-3、、自定义命令、过滤器filter）

v-bind

修改行内属性  缩写 :

1.不是双向绑定  只是修改属性值

2.尽量不要和v-model一起使用

3.声明v-bind之后  除数字特殊字符外  只能通过data数据获取内容

4.style属性 v-bind  可以以对象的形式填写   也可以单独填写属性

5.class属性

<button @click="change">修改type</button>
<input :type="tip">
<button @click="change2">修改src</button>
<img :src="imgSrc" alt="">
<input type="text" :value="23">

style修改

合并一起

1. 合并在一起写：将样式以对象的形式存在data中，style中直接调用
2. 拆分每个变量，在style中以对象的形式分别进行设置

<!-- 写单个变量名 -->
<div :style="divStyle">这是写的变量名</div>
<div :style="{width:'200px',height:'150px',background:'#f00'}">这是单独写的</div>
<div  :style="{width:ww,height:hh,background:cc}"></div>

class操作类名

单独写一个变量名
:class="变量名"只写一个的话，要写变量名
写数组
1. ：class=['class名1','class名2'] 数组里的数据加引号的话，就填入class名
2. ：class=[变量名1,变量名2] 数组里面的数据不加引号，就填入变量名
对象形式，判断：后面是否为true ，如果是true就调用这个类名的设置的样式
：class="{class名:true/false,class名2:true/false}"
：class="[{class名:true/false},变量名]

        <!-- class后面写对象格式  {class名：布尔值} -->
        <div :class="{change1:true}">
            这是class后面写对象格式,为 true
        </div>
        <div :class="{change1:false}">
            这是class后面写对象格式,为 false
        </div>
        <div :class="[tip1,{change2:4>3}]">
            这是class后面写对象格式，里面写了多个
        </div>

v-for 补充 :key

v-for中的key是用于确定当前循环的唯一性，尽量不适用index，一般有id就绑id

        <ul>
            <li v-for="(r,i) in arr" :key="r.id">
                {{r.name}}--{{r.id}}
            </li>
        </ul> 

自定义指令

• 全局自定义命令
  格式：
  Vue.directive("指令名",{bind(e){},inserted(e){}})
• 局部自定义命令
  格式：(在new Vue中写)
  directives:{指令名:{bind(e){},inserted(e){}}}

bind和inserted都是钩子函数

bind(e){
	指令第一次被绑定时触发
	e是挂载到的元素，e就相当于我们的DOM元素
},
inserted(e){
	操作元素时触发
	e是挂载到的元素，e就相当于我们的DOM元素
}

• 如何使用自定义命令
  <div v-指令名></div>
  当指令名为驼峰式时，aB===>v-a-b

    <div id="app">
        <div v-click-change>点击一下吧</div>
        <div v-change2>再点击一下吧</div>
    </div>
    <script>
        var flag = 1;
        // 全局自定义指令
        Vue.directive("clickChange", {
            bind(e) {
                console.log(e);
                e.innerText = "人约黄昏后";
            },
            inserted(e) {
                e.onclick = () => {
                    console.log(e);
                    if (flag) {
                        e.innerText = "月上柳梢头"
                        flag = 0
                    } else {
                        e.innerText = "人约黄昏后";
                        flag = 1
                    }
                }
            }
        })
        new Vue({
            el: '#app',
            data() {
                return {

                }
            },
            methods: {

            },
            // 局部自定义指令
            directives: {
                change2: {
                    bind(e) {
                        console.log(e);
                        e.innerText = "南风知我意"
                    },
                    inserted(e) {
                        e.onclick = () => {
                            console.log(e);
                            e.innerText = "吹梦到西洲"
                        }
                    }
                }
            }
        });
    </script>

过滤器

• 全局过滤器
  Vue.filter("过滤器名称",function(e){})
• 私有过滤器（在new Vue中）

filters{
	过滤器名称(e){
 
	}
}

使用过滤器
{{变量 | 过滤器}}

这里的过滤器与数组迭代方法中的过滤是不同的，这里的过滤器是将传入的数据进行一系列的操作，再返回出来，更类似于数组迭代方法中的map方法。

    <div id="app">
        {{text | fmtText("这是","一首诗")}}
    </div>
    <script>
        Vue.filter('fmtText', function(e,f,g){
            return e+f+g
                })
        new Vue({
            el: '#app',
            data() {
                return {
                    text:"满城尽带黄金甲"
                }
            },
            methods: {

            }
        });
    </script>

我们在进行调用的时候，过滤器名后面可以不加参数，它就是指向我们前面的变量，但是如果有多个参数，可以从案例中看到，第一个参数e我并没有写出来，它自己直接识别为前面的变量，后面的“这是”“一首诗”分别对应了f和g

过滤器中的函数可以放多个参数，但我们一般只放一个参数，用于指向我们的变量。

过滤器的功能目前来看是十分强大的，从后面我放的案例中也可以看出来，在处理数据格式上还是十分方便的

总结

今日所学大概分为三大点：v-bind修改样式属性、自定义命令以及过滤器，v-bind中的内容还是很多的，但是常用的也就是那几个，比如给标签修改属性（：src=“imgSrc”）、给元素添加样式（：style=“变量名”）、修改元素的类名（：class=“变量名”、：class=“[变量名1，变量名2]”）。自定义命令使用比较少，过滤器的强大之处要在实践中才能看出来

案例

功能：按要求输入品牌名称和评价以后，点击添加，会在表格下新增内容，在搜索框输入内容以后，搜索的内容会被渲染出来

html和js代码

<div id="app">
        <span class="menu">名称</span>
        <input type="text" v-model="phoneName">
        <span class="menu">评价</span>
        <select v-model="comment">
            <option value="4">很好</option>
            <option value="3">一般</option>
            <option value="2">较差</option>
            <option value="1">极差</option>
        </select>
        <button @click="add">添加</button>
        <!-- 搜索框 -->
        <span class="menu">搜索</span>
        <input type="text" v-model="searchText">
        <br>
        <table>
            <th>名称</th>
            <th>评价</th>
            <th>时间</th>
            <th>操作</th>
            <tbody>
                <!-- tbody不是单纯地获取数据库arr里的内容，我们通过给搜索框进行数据双向绑定，能够实现搜索内容的实时传输，下面的循环就能够实时获取到，需要渲染出来的内容 -->
                <tr v-for="(r,i) in search(searchText)">
                    <td>{{r.name}}</td>
                    <td>{{r.pj | fmtComment}}</td>
                    <td>{{r.ctime | fmtTime}}</td>
                    <td><button @click="del(i)">删除</button></td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        // 过滤器，将评价里的数字转换为文字
        Vue.filter("fmtComment", function (e) {
            if (e == 1) return "极差"
            if (e == 2) return "较差"
            if (e == 3) return "一般"
            if (e == 4) return "很好"
        });
        // 过滤器，将时间格式进行调整
        Vue.filter("fmtTime", function (e) {
            let oMonth = (e.getMonth() + 1) < 10 ? "0" + (e.getMonth() + 1) : (e.getMonth() + 1);
            return e.getFullYear() + "年" + oMonth + "月" + e.getDate() + "日" + e.getHours() + ":" + e.getMinutes() + ":" + e.getSeconds()
        })
        // 创建实例
        new Vue({
            el: '#app',
            data() {
                return {
                    // 品牌名
                    phoneName: "",
                    // 评价
                    comment: "",
                    // 搜索框文字
                    searchText: "",
                    arr: [
                        {
                            id: 1,
                            name: "华为",
                            ctime: new Date(),
                            pj: "1",

                        }, {
                            id: 2,
                            name: "小米",
                            ctime: new Date(),
                            pj: "3"
                        }
                    ],

                }
            },
            methods: {
                // 点击添加的函数
                add() {
                    if (this.comment && this.phoneName) {
                        this.arr.push({
                            name: this.phoneName,
                            ctime: new Date(),
                            pj: this.comment
                        })
                    }
                },
                // 点击删除的函数
                del(i) {
                    this.arr.splice(i, 1)
                },
                // 实时返回符合条件的内容
                search(i) {
                    return this.arr.filter(r => {
                        return r.name.includes(i)
                    })
                }
            }
        });
    </script>

css

        #app {
            width: 600px;
            margin: 100px auto;
        }

        table {
            width: 100%;
            text-align: center;
            border: 1px solid;
            border-collapse: collapse;
            margin: 20px 0;
        }

        th,
        td {
            height: 40px;
            line-height: 40px;
            border: 1px solid;
        }