学习笔记
一，vue是什么
是一套用于构建用户界面的渐进式框架，双休数据绑定的框架
二，指令
v-cloak 防止页面加载出现闪烁
v-text 数据填充到 标签中 v-text = 'msg'
v-html html元素数据 填充到 标签中 v-html = 'msg'
v-pre 标签跳过编译
v-once 执行一次性的插值 【后面改变数据，插值里面内容不会改变】
v-model 双休数据绑定 v-model='msg'
v-on 事件绑定 简写 @
<button v-on:click='handle1'>点击1</button>
<button @click='handle1'>点击1</button>
<button @keyup.enter.space='handle1'>点击1</button> 当点击enter键或者space空格键时触发 handle1函数
v-bind 属性绑定 简写:
<img v-bind:src="imageSrc">
<img :src="imageSrc" :style='sty'>
v-if 判断是否渲染
<div v-if="type === 'A'">
A
</div>
<!-- v-else-if紧跟在v-if或v-else-if之后 表示v-if条件不成立时执行-->
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<!-- v-else紧跟在v-if或v-else-if之后-->
<div v-else>
Not A/B/C
</div>
v-show 是影藏
v-for 循环
<li v-for="(item,index) in items" :key="index">
{{ item.message }}
</li>
计算属性 computed 比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化
computed: {
// reverseString 这个是我们自己定义的名字
reverseString: function(){
console.log('computed')
var total = 0;
// 当data 中的 num 的值改变的时候 reverseString 会自动发生计算
for(var i=0;i<=this.num;i++){
total += i;
}
// 这里一定要有return 否则 调用 reverseString 的 时候无法拿到结果
return total;
}
}
监听器 watch 监听对象，属性 变化触发的
watch: {
// 注意： 这里firstName 对应着data 中的 firstName
// 当 firstName 值 改变的时候 会自动触发 watch
firstName: function(val) {
this.fullName = val + ' ' + this.lastName;
},
// 注意： 这里 lastName 对应着data 中的 lastName
lastName: function(val) {
this.fullName = this.firstName + ' ' + val;
}
}
过滤器 filter 过滤器数据的
<div>{{msg | upper }}</div> msg 这个数据要让 upper 过来一遍在显示出来
filters: {
// upper 自定义的过滤器名字
// upper 被定义为接收单个参数的过滤器函数，表达式 msg 的值将作为参数传入到函数中
upper: function(val) {
// 过滤器中一定要有返回值 这样外界使用过滤器的时候才能拿到结果
return val.charAt(0).toUpperCase() + val.slice(1);
}
}
三，vue的生命周期
beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用 此时data 和 methods 以及页面的DOM结构都没有初始化 什么都做不了
created 在实例创建完成后被立即调用此时data 和 methods已经可以使用 但是页面还没有渲染出来
beforeMount 在挂载开始之前被调用 此时页面上还看不到真实数据 只是一个模板页面而已
mountedel 被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。 数据已经真实渲染到页面上 在这个钩子函数里面我们可以使用一些第三方的插件
beforeUpdate 数据更新时调用，发生在虚拟DOM打补丁之前。 页面上数据还是旧的
updated 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。 页面上数据已经替换成最新的
beforeDestroy 实例销毁之前调用
destroyed 实例销毁后调用
四.组件
1.组件注册
创建一个 .vue 后缀的文件 在需要的地方 import 引入 在 components{} 注册 一个 页面中直接使用
2.组件之间传值 vuex必须说 放到后面 单独一个章节讲
父传子
1.父组件 传值到子组件 ， 父组件要 在父组件的元素能添加 一个 自定义的属性 并且自定义属性 加上 v-bind 进行绑定
2. 子组件 接收 父组件的传值 ， 子组件 通过 props 接收 父组件的值（通过数组的方式接收）
子传父
1.子组件 ， 子组件通过点击事件 的函数为 $meit(‘父组件的函数’，‘’传入的值)
2.父组件 ， 父组件 通过 @名称（名称是子组件传过来的的函数名称） = ‘函数’ ， 通过这种方式接收值 ，
兄弟传值
1.先设置一个 中间事件 列： var bus = new Vue()；
2.传值组件，通过中间事件的 $emit() 传值
3.接值组件，通过mounted(){} 钩子函数，中间事件的 $on() 监听
五，插槽
插槽 组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力
1.匿名插槽
<alert>有bug发生</alert> // 这个是a组件里面的 子组件 alert 中间写了内容
<slot></slot> // 这是 alert组件 里面的 slot标签
2.具名插槽
<p slot='header'>标题信息</p> // a组件
<slot name='header'></slot> // b组件
六，promise
function queryData(id) {
return new Promise(function(resolve, reject){
if(id == 1){
resolve('111')
}else if(id == 2){
resolve('222')
}else{
reject('错误')
}
});
}
var p1 = queryData(1);
var p2 = queryData(2);
Promise.race([p1,p2]).then((con)=>{console.log(con)}) # 那个数据返回快 那个就返回 其他就不返回
Promise.all([p1,p2]).then((con)=>{console.log(con)}) # 返回一个数组
七，fetch Fetch API是新的ajax解决方案 Fetch会返回Promise fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象
1.fetch get请求
fetch('http://localhost:3000/books?id=123', {
# get 请求可以省略不写 默认的是GET
method: 'get'
})
.then(function(data) {
# 它返回一个Promise实例对象，用于获取后台返回的数据
return data.text();
}).then(function(data) {
# 在这个then里面我们能拿到最终的数据
console.log(data)
});
2.fetch post请求
fetch('http://localhost:3000/books', {
method: 'post',
body: JSON.stringify({
uname: '张三',
pwd: '456'
}),
headers: {
'Content-Type': 'application/json'
}
})
.then(function(data) {
return data.text();
}).then(function(data) {
console.log(data)
});
发表评论