双向数据绑定的原理：
1.vue中双向数据绑定适应于表单元素指令：v-model
2.首先明白mvvm的原理，VM也就是ViewModel负责连接 View（界面） 和 Model（数据）
3.‘监听器’（观察者模式和数据劫持）和‘解析器’
vue父组件向子组件传值（属性绑定）：
传递数据（props）：
1.父组件上面定义的数据：
data:{
msg:'父组件content'
},
2.子组件调用：
<my-com1 :pmsg="msg"></my-com1> //组件容器
Vue.component('my-com1',{
template:`<div class="my-box">{{pmsg}}</div>`,
data(){return{ } },
props:['pmsg']
})
传递方法（this.$emit('pinfo')）：
//info是父组件的方法：
<my-com1 @pinfo="info"></my-com1>
//子组件定义的方法中的方法接收：
methods:{
myinfo(){ console.log('这是子组件自己的方法') this.$emit('pinfo') }
}
vue子组件向父组件传值（事件绑定$emit）：
//子组件方法：
info(){ this.$emit('padd',this.item) }
//子组件容器元素：
<my-com @padd="add"></my-com>
// 父组件内部：
add(arg){ console.log(this.flag + arg) this.str = arg }
兄弟组件之间的传值：
//发送数据：
add(){
bus.$emit('add',this.msg)
console.log(this.msg)
}
//接收数据：
created(){
bus.$on('add',(msg) =>{
console.log(msg)
})
如何获取dom元素：
ref="domName" 用法：this.$refs.domName
computed和watch的使用场景
//计算属性把两个字符串拼接返回
computed:{
root:function(){
const r = this.name + this.age
return r
}
}
//监测字符长度的变化把他强制转化为一个6位数
watch:{
user_name(newVal,oldVal){
// 当前的长度超过指定长度，强制转化为原有长度
if(newVal.length > 6) this.user_name = oldVal
}
}
v-on可以绑定多个方法
<p @click="one(),two()">点击</p>
Vue.nectTick() $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调
changeStr(){
this.str = "欢迎关注公众号 张培跃，收看更多精彩内容！";
this.$nextTick(()=>{
// "李慷"
console.log(this.$refs.myP.innerText);
});
this.str = "李慷"
}
vue的两个核心点
数据驱动：ViewModel，保证数据和视图的一致性。
组件系统：应用类UI可以看作全部是由组件树构成的。
vue常见的修饰符（.stop .prevent）：
//.stop阻止事件冒泡
<div class="middle" @click.stop="middle">
<button @click.stop="inner">点击我(^_^)</button>
</div>
// prevent 阻止默认事件
<a href="https://www.baidu.com/" @click.prevent="getinfo">阻止默认事件</a>
.capture：与事件冒泡的方向相反，事件捕获由外到内；
.self：只会触发自己范围内的事件，不包含子元素；
.once：只会触发一次。
vue组件引入
1.在template中引入组件
2.在script的第一行用import引入路径
3.用component中写上组件名称
delete和vue.delete区别（改变键值和不改变键值）
var a=[1,2,3,4]
var b=[1,2,3,4]
delete a[1]
console.log(a)
this.$delete(b,1)
console.log(b)
Vue-router跳转和location.href有什么区别：
location.href='/url'来跳转，简单方便，但是刷新了页面；
router.push() 减少Dom消耗 尤其是在history模式下
//路由的写法
routes:[
{path:'/',redirect:'/home'},
{path:'/home',component:home,children:[
{path:'/home',redirect:'/home/tab1'},
{path:'/home/tab1',component:tab1},
{path:'/home/tab2',component:tab2},
]},
{path:'/move',component:move}
],
linkActiveClass:'active'
vue 插槽slot(比较经典的用法)
image.png
这块在app中不是每个切换都要写一个样式的，而是一个公共的组件通过slot传参
//封装一个公共的组件headerTop.vue
<template>
<div class="heder-top">
<slot name="left"></slot>
<span class="header-title">{{title}}</span>
<slot name="right"></slot>
</div>
</template>
<script>
export default {
props: { title: String },
data() {return {} },
methods: {} };
</script>
//页面需要调用的时候：
<script>
//抽离头部引入
import HeaderTop from "../../HeaderTop/HeaderTop";
export default {
//映射组件
components: {
HeaderTop,
},
</script>
<template>
<HeaderTop title="陕西省西安市首座...">
<!-- 作用域插槽传参 left-->
<span class="header-search" slot="left">
<i class="iconfont icon-sousuo1" ></i>
</span>
<span class="header-search" slot="right" @click="colseuser">
<span><i class="van-icon van-icon-contact" ></i></span>
</span>
</HeaderTop>
</template>
常见的在vue的elementUi组件中表格循环需要自定义元素的：
<el-table-column
prop="address"
label="状态">
<template slot-scope="scope">
<el-tag style="background:#67C23A;color: rgb(255, 255, 255);">已发布</el-tag>
</template>
</el-table-column>
filter过滤
var arr = [1,2,3,4,5,6,7,8,9,10]
const arrNew = arr.filter(item =>{
return item % 2 == 0
})
console.log(arrNew)
vue-loader是什么？使用它的用途有哪些？
解析和转换 .vue 文件，提取出其中的逻辑代码 script、
样式代码 style、以及 HTML 模版 template，再分别把它们交给对应的 Loader 去处理。
vue的params
params一旦设置在路由，params就是路由的一部分，
如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。
<router-link :to="{ name:'router1',params: { id: status}}" >跳转</router-link>
网友评论