Vue——数据更新、表单、过滤器、自定义指令相关笔记

文章目录

• 前言
• 一、数据更新
  • 1.对象添加属性
  • 2. 数组追加属性
• 二、Vue表单
  • 1. v-model 收集
  • 2. v-model 修饰符
  • 3. 相关案例
• 三、过滤器
  • 1. 局部使用过滤器
  • 2. 全局使用过滤器
• 四、自定义指令
  • 1. 自定义局部指令
  • 2. 自定义全局指令
• 总结

---

一、数据更新

案例1   ——  实现当点击按钮时给 persons 该对象添加一个属性 sex 属性值为男。

 <div id="root">
        <p>姓名:{{persons.name}}</p>
        <p>年龄:{{persons.age}}</p>
        <p>性别：{{persons.sex}}</p>
        <button @click="addSex">增加性别属性</button>
      
        <br>
        <br>

    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                persons: {
                    name: 'Jack',
                    age: 24
                }
            },
            methods: {
                addSex() {
                   this.persons.sex = '男';
                   console.log(this.persons);
                }
            }

        })
    </script>

运行结果：

通过以上案例我们可以看出通过以往追加属性的方式在vue中并不奏效，那么如果要追加属性时应该采用哪种方式呢？下面就通过对象和数组两种数据格式分别讲解：

1.对象添加属性2. 数组追加属性

概念：new vue的时，vue通过setter监控数据，直接给对象添加属性，vue不做响应式处理，如果要给添加的属性增加响应式处理，

例如要增添一个sex属性，直接this.persons.sex=’男’这个增加的属性是不做相应式处理的，需要按照以下方法：

1.1 追加属性:

Vue.set(target，propertyName/index，value)                    

vm.$set(target，propertyName/index，value)

参数一： 将要追加属性的对象名 /  数组名

参数二： 将要追加的属性名  /  索引值

参数三： 将要追加的属性值

1.2 删除属性：

Vue.delete(target，propertyName/index，value)

参数一： 将要删除属性的对象名  

参数二： 将要删除的属性名

1.3 或者采取重新赋值的方式：

Reflect.deleteProperty(target, propertyName);   ——// 删除对象中的一个属性

参数一： 将要删除属性的对象名  

参数二： 将要删除的属性名

this.person = { … this.person}  —— 结构赋值

实现案例1相关代码

 <div id="root">
        <p>姓名:{{persons.name}}</p>
        <p>年龄:{{persons.age}}</p>
        <p>性别：{{persons.sex}}</p>
        <button @click="addSex">增加性别属性</button>
        <button @click="delAge">删除年龄属性</button>
        <br>
        <br>
        <button @click="addSex1">增加性别属性方法一</button>
        <button @click="delAge1">删除年龄属性方法二</button>
        <br>
        <br>

    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                persons: {
                    name: 'Jack',
                    age: 24
                }
            },
            methods: {
                addSex() {
                    // Vue.set(this.persons, 'sex', '男');
                    // console.log(123);
                },
                delAge() {
                    Vue.delete(this.persons, 'sex')
                },
                addSex1() {
                    this.persons.sex ='男';
                    this.persons = {...this.persons}
                },
                delAge1() {
                    Reflect.deleteProperty(this.persons, 'sex');
                    this.persons = {... this.persons};
                }
            }

        })
    </script>

2. 数组追加属性

通过数组，  调用原生对应的方法（对原数组有改变的相关api）对数组进行更新  ，从而进行页面的更新。

原生的方法1：API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()

数组也可以使用对象检测的方法,也可以采用重新赋值的方式

若需要使用filter方法（因为filter 方法会返回一个新的数组）此时可通过使用返回的新数组替换原本数组的方法

实现案例1相关代码（数据以数组形式存储）

   <div id="root">
        <p>姓名:{{persons[0]}}</p>
        <p>年龄:{{persons[1]}}</p>
        <p>性别:{{persons[2]}}</p>
        <button @click="addSex">增加性别属性</button>
        <button @click="delAge">删除年龄属性</button>
        <br>
        <br>
        <button @click="addSex1">增加性别属性方法一</button>
        <button @click="delAge1">删除年龄属性方法二</button>
        <br>
        <br>

    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                persons: ['name:jack','age: 24'],
            },
            methods: {
                addSex( ) {
                    Vue.set(this.persons, 2, 'sex:男');
                    console.log(123);
                },
                delAge( ) {
                    Vue.delete(this.persons, 2)
                },
                addSex1( ) {
                    this.persons[2] = '男';
                    this.persons = [ ...this.persons ]
                },
                delAge1( ) {
                   this.persons.pop( );
                }
            }
        })
    </script>

二、Vue表单

1. v-model 收集

可以用 v-model 指令在表单控件元素上创建双向数据绑定。v-model 会根据控件类型自动选取正确的方法来更新元素。下图就说明了v-model 进行数据绑定的一个图示，

1：type="text"      v-model收集的值就是，input框的值；

2：type="radio"     v-model收集的值，就是各标签的value值；

3：type="checkbox"  ——所以若要获取复选框的值，最好是采用数组的方式承接结果

· 没有设置value值时，v-model收集的就是checked的属性。

· 配置v-model值是数组，那么收集的就是value构成的数组。

· 配置v-model值是字符串，那么收集的是checked值（布尔值）

2. v-model 修饰符

• lazy：失去焦点再收集数据
• number：输入字符串转为有效的数字
• trim：输入首尾空格过滤

3. 相关案例

如图是一个表单，要求当点击‘提交数据按钮’时，将表单中的各输入框中的值收集。

像这样的案例在许多的页面中都有应用，那么在vue框架中如何是实现呢？

    <div id="root">
        <form @submit.prevent="save">
            姓名：<input type="text" value="" v-model="userinfo.realname" /><br /><br />
            年龄：<input type="number" value="" v-model.number="userinfo.age" /><br /><br />

            <!-- 使用name属性标识以下input框属于同一组数据 -->
            性别：<input type="radio" name="sex" value="1" v-model="userinfo.sex" /> 男 
            <input name="sex" type="radio" value="2" v-model="userinfo.sex" /> 女<br /><br />
            爱好：<input type="checkbox" name="hobby" value="1" v-model="userinfo.hobby" /> 玩游戏
            <input type="checkbox" name="hobby" value="2" v-model="userinfo.hobby" /> 跳舞
            <input type="checkbox" name="hobby" value="3" v-model="userinfo.hobby" /> 跑步<br /><br />
            城市：
            <select name="city" v-model.number="userinfo.city">
                <option value="0">请选择数据</option>
                <option value="1">合肥</option>
                <option value="2">芜湖</option>
                <option value="3">六安</option>
            </select><br /><br />
            介绍：<textarea v-model.lazy="userinfo.desc"></textarea>
            <br>
            <br>
            <input type="submit" value="提交数据"/>
        </form>
    </div>

    <!-- 收获表单数据vue部分 -->
    <script>
        Vue.config.productionTip = false;
        new Vue({
				el:"#root",
				data:{
					userinfo:{
						realname:'',
						age:'',
						sex:1,
						hobby:[],
						city:0,
						desc:''
					}
					
				},
				methods: {
					save() {
					   console.log(JSON.stringify(this.userinfo));
					}
				}
        })
    </script>

三、 过滤器

对要显示的数据进行特定格式化后再显示。

1. 局部使用过滤器2. 全局使用过滤器 

当前vm使用：

new Vue{

     filters:{     ———此处注册为局部过滤器

//相关逻辑代码

      }

}

页面使用方式：

 {{ 参数一 |  参数二)}}

参数一： 被格式化的变量

参数二： 过滤器的名字

案例  —— 将  data 中 str 的属性值进行大小写转换

   <!-- 进行大小写转化 -->
    <div id="root">
        <p>转换前的字符串: {{str}}</p>
        <p>首字母转小写: {{str | change}}</p>
        <p>转换前的字符串: {{str1}}</p>
        <p>首字母转小写: {{str1 | change(2)}}</p>
    </div> 
<script>     
   const vm = new Vue({
            el: '#root',
            data: {
                str: 'daylight',
                str1:'Daylight',
                str2:'Taylor'
            },
            // 局部过滤器
            filters: {
                // 这里的 value 就是在页面中使用的模板字符 str
                change(value, flag = 1) {
                    if (flag == 1) {
                        return value.slice(0,1).toUpperCase( )+value.slice(1);
                    } else {
                        return value.slice(0,1).toLowerCase( )+value.slice(1);
                    }
                }
            }
        })
    </script>

运行结果

2. 全局使用过滤器 

全局vm使用：

Vue.filter(name,callback)

参数一： 过滤器的名字

参数二： 回调函数

<div id="root">
        <p>首字母转小写: {{str2 | changes}}</p>
    </div>
<script>
          // 全局过滤器
          Vue.filter('changes',function(value){
           return value.slice(0,1).toLowerCase()+value.slice(1);
        })
        const vm = new Vue({
            el: '#root',
            data: {
                str: 'daylight',
                str1:'Daylight',
                str2:'Taylor'
            }
        })
    </script>

运行结果

四、自定义指令 

除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。

1. 自定义局部指令

new Vue({

 directives:{指令名:配置对象} 

或  directives{指令名:回调函数} })

}）

函数调用： 

directives:{

        //指令与元素绑定时候调用，模板解析时调用（模板更新）

        big(element,item){

            // console.log('big',this) //注意此处的this是window

            element.innerText = item.value*10;  ———使得当前元素的文本值变大十倍

        },

}

element  ——   当前绑定指令的节点html结构,例如当前为 <div></div>

value      ——   关于当前自定义指令的相关属性描述,包括指令名称，指令所包括的值

内置对象

                  bind  ——//指令与元素成功绑定时（一上来）

                    bind(element,binding){

                        element.value = binding.value

                    },

                   insert ——  //指令所在元素被插入页面时

                    inserted(element,binding){

                        element.focus()

                    },

                  update —— //指令所在的模板被重新解析时

                    update(element,binding){

                        element.value = binding.value

                    }

2. 自定义全局指令

Vue.directive('fbind',{

        //指令与元素成功绑定时（一上来）

        bind(element,binding){

                element.value = binding.value

        },

        //指令所在元素被插入页面时

        inserted(element,binding){

                element.focus()

        },

        //指令所在的模板被重新解析时

        update(element,binding){

                element.value = binding.value

        }

})

3. 相关案例

自定义一个指令，实现点击按钮时赋值文本框中的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../../vue.js"></script>
	</head>
	<body>
		<!-- 思路: 1）绑定的时候，设置一个全局变量进行接收要复制的值 -->
		<!-- 2）创建一个函数(用来监听点击事件)，创建一个空的值，然后把el.value复制给创建的空值，然后默认全选，点击copy就可以进行copy -->
		<!-- 3)指令与元素解绑的时候，去除这个监听事件 -->



		<div id="app">
			<textarea v-model="str"></textarea>
			<button v-mycopy="str">一键复制</button>
			<!-- 这个复制的只是textarea里面的内容 -->
		</div>


		<script>
			new Vue({
				el: "#app",
				data: {
					str: " ",
				},
				directives: {
					mycopy: {
						// 指令绑定时候（一上来绑定数据的时刻）
						bind(el, {value}) {
							// ele.$value = value;
						// $是在vue中所有实例中都可用的一个简单约定，这样做会避免和已被定义的数据，方法，计算属性产生冲突。
							el.price = value //设置全局要copy的值
							el.handle = () => {
								if (!el.price) {
									alert("请输入内容copy")
									return
								}
								
								// 设置一个临时文本,用来存储里面的数据
								const textarea = document.createElement("textarea");
								
								// const  textarea = document.querySelector("textarea")
								// 如果只是对原文框进行操作的话,copy完成之后,就会将这个文本框进行移除,就无法实现后续再次输入的效果
								// 所以要创建一个文本框,将要copy的值放在添加的文本框当中,对这个文本框进行操作
								
								//设置里面的属性是一个只读的属性
								textarea.readOnly = "readonly";
								textarea.value = el.price;
								textarea.style.position = "absolute";
								document.body.appendChild(textarea);


								//选中textarea 里面的值
								textarea.select(); //对里面的值进行一个全选的操作
								textarea.setSelectionRange(0, textarea.value.length)
								//移动端，对里面的内容进行一个 copy

								//设置copy
								// execCommand方法是执行一个对当前文档，当前选择或者给出范围的命令。
								const res = document.execCommand("copy");
								if (res) {
									alert("copy成功")
								}
								document.body.removeChild(textarea);
							}

							el.addEventListener("click", el.handle);

						},
						// update 里面的数据发生更新的时候进行操作
						update(el, {value}) {
							el.price = value //设置全局要copy的值
						}

					}
				}
			})
		</script>
	</body>
</html>

相关代码解释：

 element.$value = value;  -—— // 为 element增添全局属性，以便于承载后面要复制的内容，$value 并没有其他的含义，只是为了和后面的value 以示区别

textarea.readOnly = 'readOnly';  ——将文本域的值设为只读状态

 textarea.select( );          ——选中文本域中的值

 textarea.setSelectionRange(0,textarea.value.length);   ——为了兼容移动端，选中文本域中的值

   document.execCommand('copy');  ——JS中的复制功能

总结

今日分型到此结束，”纸上得来终觉浅，绝知此事要躬行。“ 掌握了理论知识的同时，也要记得多动手写一写，免得”眼睛会了手不会“ 。

好了，废话不多说，最后依旧祝福屏幕前的你健康幸福、平安喜乐！