vue学习记录第三天
悄咪咪的说讲课的老师说话声音好难听啊
复习
- v-model(单选时只有一个数，多选的时候是数组，提供一个value)
- 修饰符 .number .lazy
- 按键修饰符 .enter .ctrl .keyCode
- v-cloak
- axios
- create(){}钩子函数，在数据初始化后调用
- axios.get().then
- promise
- filter()过滤器
- computed:{}计算属性，不是方法，方法没有缓存，computed会根据依赖的属性进行缓存，必须是响应式变化，像get中return date.now()并不是响应式变化
- get()，引入时调用，返回什么值，赋予什么属性值
- set()，赋值时调用
- 事件
- stopPropgation 阻止冒泡，冒泡事件的意思就是一个按钮绑定一个click事件，click事件会依次在父级元素中触发，stopProgation()组织目标元素的事件冒泡到父级元素。
- cancelBabble=true和stopProgation效果相同
- preventDefault，returnValue=false，阻止元素的默认行为
- xxx.addEventListener('click',fn)
- jQuery once flag&&a()
- e.srcElement&&e.target 判断事件源绑定事件,捕获当前事件作用的对象
-v-if以及v-show
- v-else必须和v-if连用，中间不能有其他标签
事件修饰符
阻止事件传播
冒泡和捕获都会被阻止
@click.stop=""
事件捕获
事件捕获是从上到下，指不太具体的节点，比如window先接收到事件，最具体的节点最后接收到事件，在JS中将addEventListener的第二个参数改为true就会由捕获的方式获得最终的节点
vue中实现在父级加一个
@click.capture=""
<body>
<div id="app">
<div @click.capture="parent">parent
<div @click="child">child
<div @click="grandson">grandson
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm=new Vue({
el:"#app",
methods:{
parent(){
alert("parent")
},
child(){
alert("child")
},
grandson(){
alert("grandson")
}
},
data:{
}
})
</script>
</body>
对于这段程序的执行结果应该是
alert(parent)
alert(grandson)
alert(child)
这是因为，点击grandson，parent开始捕获，但是child没有捕获，所以直接获得grandson，然后开始冒泡
阻止默认行为
@click.pervent=""
事件只绑定一次
@click.once=""
判断事件源绑定
@click.self=""
Vue构造函数
希望所有的实例都能使用过滤器，使用全局过滤器
要放在页面的顶部，不可以new完后再定义
Vue.filter('my',(data)=>{return data+'111'}
watch
computed不支持异步
好的是时候重温异步了
每次异步一定要拿出来说的东西就是setTimeout(),看以下的程序
for(var i=0; i<3; i++){
setTimeout(function(){
i+=i;
console.log(i);
},1000)
}
var i = 1;
console.log(i);
输出的结果是 1 2 4 8
原因是整个程序的运行顺序是，for先执行，setTimeout也进入队列三次，i到达3，然后执行var i=1,i被赋予值1，console.log(1)，然后时间到了，三次setTimeout被执行
watch,computed以及methods的区别
- computed VS methods 计算属性是基于依赖进行缓存，依赖发生变化，才会重新计算，但是调用方法是在每次触发渲染时都会再次执行
- computed VS watch
当有一些数据需要随着其他数据的变动而变动，使用computed
当需要异步或者开销较大的操作的时候使用watch
watch可以监控值的变化，在data中定义属性进行监控，watch中的属性名要和监控的属性名相同
watch:{
a(newVal,oldVal):{}
}
只有值变化才会变化，假如两次输入的值相同，并不会触发
watch另一种调用方法
vm.$watch('a',function(){})
动态绑定样式
v-bind
动态绑定“属性”
动态绑定class和style
第一种方法 对象
首先动态绑定的方式是:class, :class和class绑定的属性不冲突
绑定：{className:isActive}
多个类用逗号隔开
<body>
<div id="app">
<!--{className:isActive}-->
<div id="a" class="x" :class="{z:flag,y:!flag}">大白熊
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm=new Vue({
el:"#app",
data:{
flag:true
}
})
</script>
</body>
第二种数组
在data定义需要用的类，:class后用数组绑定
:class="[class1,class2,'z']"
或者:class="[class1,class2,{z:flag]"
<body>
<div id="app">
<!--{className:isActive}-->
<div id="a" :class="[class1,class2,'z']">大白熊
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm=new Vue({
el:"#app",
data:{
class1:"x",
class2:"y",
flag:true
}
})
</script>
</body>
template
template标签，是vue提供的没有任何实际意义的标签，可以用来包裹元素，并且使用v-if，v-show并不支持
<template v-if="false">
<div>企鹅</div>
<div>企鹅</div>
<div>企鹅</div>
<div>企鹅</div>
</template>
<div v-else>大白熊
</div>
利用这个简单弄了一个注册登录界面切换
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
.ui{
width:500px;
height:20px;
list-style: none;
margin:0;
padding:0;
}
.ui li{
width:70px;
height:20px;
margin-left:10px;
float:left;
text-align:center;
background-color:lightblue;
border:1px solid black;
border-radius:5px 5px 0 0;
}
.ui li:hover
{
cursor:pointer
}
.content
{
width:500px;
height:300px;
margin-top:0;
border:1px solid black;
}
</style>
</head>
<body>
<div id="app">
<ul class="ui">
<li @click="flag=true">注册</li>
<li @click="flag=false">登录</li>
</ul>
<div class="content">
<template v-if="flag">
<br>
<label>用户名:</label>
<input type="text" key="1">
<br>
<label>密码:</label>
<input type="text" key="2">
<br>
<label>确认密码:</label>
<input type="text">
</template>
<template v-else>
<br>
<label>用户名:</label>
<input type="text" key="3">
<br>
<label>密码:</label>
<input type="text" key="4">
</template>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue(
{
el:"#app",
data:{
flag:true
}
}
)
</script>
</body>
</html>
相同结构复用
默认情况下切换dom时相同的结构会被复用，如果不需要复用，加上key属性
