|
1.v-show 如果为false 只是添加了一个display=true的描述，没有被真正的删除。
2.v-if 如果为false 是真正的在dom节点下删除这个节点
3. 数组更新检测
push() pop() split(),sort,reverse(),unshilf(),shilf()都可以影响原数组
filter(),concat(),slice(),map()新数组替换旧的数组，原数组不会改变，视图不会刷新
通过索引值来修改原数组的方式 原数组收到影响，但视图不会刷新
可以使用 datalist.splice(0,1,"chenchen")就可以了 ?删除从第0个开始的第一个
或者使用Vue.set(vm.datalist,0,"chenchen")
4.解决冒泡问题
孩子节点触发一个事件，父节点的事件也被触发了 ?冒泡问题
在调用孩子节点方法的时候，其父亲节点的方法也被触发了
原生的解决方法是调用$event.stopPropagation方法阻止，而在vue中，直接在 @click.stop
或者可以在父节点上使用@click.self来确保只有自己被点击了才触发方法
5.阻止默认行为
?例如a标签的跳转 <a href="www.baidu.com" @click.prevent="handleChangePage()"> 百度一下 </a>
?原生 $event.preventDefault()阻止默认行为
?vue使用@click.prevent
6.过滤应用
?? ?当还没有学习计算属性的时候，可以采用复制data的方式来过滤应用，复制一份相同的列表，在方法中过滤后再进行赋值
?? ? ?var newList = this.list.filter(item=>item.indexOf(this.mytext)>-1)
? ? ? this.dataList = newList
7.axios示例
?? ? ?new Vue({
? ? ? ? ? ? el:"#box",
? ? ? ? ? ? data:{
? ? ? ? ? ? ? ? datalist:''
? ? ? ? ? ? },
? ? ? ? ? ? methods:{
? ? ? ? ? ? ? ? handleClick(){
? ? ? ? ? ? ? ? ? ? axios.get("./js/test.json").then(res=>{
? ? ? ? ? ? ? ? ? ? ? ? console.log(res.data.data.films)
? ? ? ? ? ? ? ? ? ? ? ? this.datalist=res.data.data.films?
? ? ? ? ? ? ? ? ? ? }).catch(err=>{
? ? ? ? ? ? ? ? ? ? ? ? console.log(err);
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
8.fetch示例
?? ? new Vue({
? ? ? ? ? ? el: "#box",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? dataList: []
? ? ? ? ? ? },
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? handleClick() {
? ? ? ? ? ? ? ? ? ? fetch("js/test.json").then(res => res.json()).then(res => {
? ? ? ? ? ? ? ? ? ? ? ? console.log(res.data.films)
? ? ? ? ? ? ? ? ? ? ? ? this.dataList = res.data.films
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
9.计算属性
计算属性要比方法性能更高，在多个地方使用得话，计算属性只需要计算一次，而方法要调用多次，计算属性会缓存依赖的状态改变了，计算属性会重新计算一遍
10.利用计算属性解决知识点6
computed: {
? ? ? ? ? ? ? ? getMyDataList(){
? ? ? ? ? ? ? ? ? ? return this.list.filter(item=>item.indexOf(this.mytext)>-1)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
11.vue更新原理
?<!--更新原理就是被Setter方法拦截， 渲染函数，其实就是新的dom节点和老的dom节点进行对比.
? ? ? ? 然后调用diff算法以补丁的形式打到真实的dom上。
? ? ? ??
? ? ? ? diff怎么对比的？
? ? ? ? ? ? 1.dom节点同层级对比。
? ? ? ? ? ? 2.按照同key值对比
? ? ? ? ? ? 3.同组件对比
? ? ? ? ? ? 两个标签一样，还会进行对比
? ? -->
12.组件
?? ? ?//扩展html元素，封装可重用代码
? ? ? ? // Vue.component
? ? ? ? //组件编写与Vue实例的区别
? ? ? ? //自定义组件需要有一个root element
? ? ? ? //父子组件的data是无法共享的
? ? ? ? //组件可以有data,method,computed 但是 data必须是一个函数
? ? ? Vue.component("navbar",{
? ? ? ? ? ? template:`<div style="background:yellow">
? ? ? ? ? ? ? ? <button @click="handleClick()">返回</button>
? ? ? ? ? ? ? ? {{navbarname}}
? ? ? ? ? ? ? ? <button>首页</button>
? ? ? ? ? ? ? ? <child></child>
? ? ? ? ? ? ? ? <navbarchild></navbarchild>
? ? ? ? ? ? ? ? </div>`,
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? handleClick(){
? ? ? ? ? ? ? ? ? ? alert("返回")
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? data(){
? ? ? ? ? ? ? ? return {
? ? ? ? ? ? ? ? ? ? navbarname:"navbarname"
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? //局部定义组件
? ? ? ? ? ? components:{
? ? ? ? ? ? ? ? navbarchild:{
? ? ? ? ? ? ? ? ? ? template:`<div>navbarchild----只能在navbar中使用</div>`
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
13.父组件传子组件（使用动态绑定）
?? ?-如果想传递一个对象的话使用动态绑定
?? ? //属性验证 ?校验一下父组件传过来的值是否符合属性 null为不限制类型?
? ? ? ? ? ? props:{
? ? ? ? ? ? ? ? myname:String,
? ? ? ? ? ? ? ? myshow:Boolean
? ? ? ? ? ? }?
14.子组件传递父组件
?? ?子传父用的是事件向上传，
? ? 在子组件中调用 this.$emit("父组件中的方法")
? ? <body>
? ? <div id="box">
? ? ? ? 父组件
? ? ? ? <child @myevent="handleEvent($event)"></child>
? ? </div>
</body>
<script>
? ? Vue.component('child', {
? ? ? ? template: `<div>
? ? ? ? ? ? ? ? ? ? ? ? child子组件
? ? ? ? ? ? ? ? ? ? ? ? <button @click="paymoney()">click</button>
? ? ? ? ? ? ? ? ? ? ? ? </div>`,
? ? ? ? data() {
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? chilrdName: "子组件得状态"
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? methods:{
? ? ? ? ? ? paymoney(){
? ? ? ? ? ? ? ? this.$emit("myevent",this.chilrdName) //分发事件
? ? ? ? ? ? }
? ? ? ? ? ?
? ? ? ? }
? ? })
? ? new Vue({
? ? ? ? el: '#box',
? ? ? ? methods: {
? ? ? ? ? ? handleEvent(ev) {
? ? ? ? ? ? ? ? console.log("父组件收到钱了"+ev)
? ? ? ? ? ? }
? ? ? ? }
? ? })
</script>
15.ref通信
ref 放在标签上 是一个原生节点
ref 放在组件上， 是一个组件对象
点击完会获取组件的对象。通过this.$refs.组件名.组件中的方法可以调用组件中的方法。
16.非父子组件的通信
?? ?（1）.//中央事件总线
? ? ?var bus = new Vue();//一个空的Vue实例就i是中央事件总线
? ? （2）. //推送一个消息
? ? ? ? ? ?bus.$emit("weixinmessage",this.$refs.mytext.value);
? ? （3）在一个合适的地方进行监听
? ? ??? ?//这是一个生命周期函数
? ? ? ? ? ? mounted() {
? ? ? ? ? ? ? ? //用总线进行监听
? ? ? ? ? ? ? ? bus.$on("weixinmessage",(data)=>{
? ? ? ? ? ? ? ? ? ? console.log("收到推送"+data)
? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? console.log("生命周期函数，当前组件dom创建完成 就会调用")
? ? ? ? ? ? }
<!--监听的用$on ?被监听的用$emit-->
17.动态组件 使用:is
? ? ?<!--动态组件可以帮助我们更加方便管理多个组件
? ? ? ? <component>元素动态绑定多个组件到他的is属性上 ?这样会删除组件
? ? ? ? <keep-alive>保留状态，防止重新渲染
? ? -->
18.solt 插槽
? <!--前景，想在组件中添加一个div,但是会被template完全覆盖，这时候，
? ? ? ? 在孩子组件中添加一个<slot>标签，插槽就是预留的位置，
? ? ? ? slot 内容分发 ?把父组件的内容分发到孩子组件中
? ? ? ?1. 目的：就是把父组件的内容与子组件的内容进行混合
? ? ? ? 为什么要这么写？写死不行么?
? ? ? ? 在其他页面也需要的时候，写死就不行了,组件使用别人的，数据使用自己的 ，就是不知道以后要写什么，预留出来的
? ? ? 2.改造子传父
? ? -->
? ? ?<!-- ?父组件的内容在父组件作用域内编译，子组件的内容在子组件作用域编译-->
? ? ? ?3.在child里想把111放在child上面，把222放在child下面
? ? ? ? 使用具名插槽 ?具有名字的插槽
? ? ? ? <child>
? ? ? ? ? ? <div slot="a">1111</div>
? ? ? ? ? ? <div slot="b">222</div>
? ? ? ? </child>
|