vuejs基础学习总结

2020-09-29  本文已影响0人  DragonRat

准备开始

vue基础

(1).历史介绍

(2).前端框架与库的区别?

(3).vue起步

vue的文件介绍

(4).插值表达式

(5).什么是指令

(6).vue中常用的v-指令演示

 v-text 只能用在双标签中
 v-text 其实就是给元素的innerText赋值
 v-html 其实就是给元素的innerHTML赋值
 v-if 如果值为false,会留下一个<!---->作为标记，万一未来v-if的值是true了，就在这里插入元素
 如果有if和else就不需要单独留坑了
 如果全用上  v-if 相邻v-else-if 相邻 v-else 否则 v-else-if可以不用
 v-if和v-else-if都有等于对应的值，而v-else直接写
 v-if家族都是对元素进行插入和移除的操作
 v-show是显示与否的问题
 注意: 指令其实就是利用属性作为标识符,简化DOM操作,
  看：v-model="xxx"
  v-model 代表要做什么  xxx代表针对的js内存对象
  写在那个元素上，就对哪个元素操作

(7).v-if和v-show的区别 (官网解释)

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

(8).v-bind使用

(9).v-on的使用

1-9知识点阶段总结

(10).v-model

(11).v-bind 和 v-model 的区别?

(12).v-for的使用

漂亮的列表

关于对象内的this

(13).局部组件的使用

​ 渲染组件-父使用子组件

（14）组件深入

父子组件传值(父传子)

总结父传子

父子组件传值(子传父)

子组件自定义方法


<template>
    <div class="app">
       <input @click="sendMsg" type="button" value="给父组件传递值">
    </div>
</template>
<script>
export default {
 
    data () {
        return {
            //将msg传递给父组件
            msg: "我是子组件的msg",
        }
    },
     methods:{
         sendMsg(){
             //func: 是父组件指定的传数据绑定的函数，this.msg:子组件给父组件传递的数据
             this.$emit('func',this.msg)
         }
     }
}
</script>

子组件通过this.$emit()的方式将值传递给父组件

注意：这里的func是父组件中绑定的函数名

父组件：

<template>
    <div class="app">
        <child @func="getMsgFormSon"></child>
    </div>
</template>
<script>
import child from './child.vue'
export default {
    data () {
        return {
            msgFormSon: "this is msg"
        }
    },
    components:{
        child,
    },
    methods:{
            getMsgFormSon(data){
                this.msgFormSon = data
                console.log(this.msgFormSon)
            }
    }
}
</script

注册全局组件

附加功能:过滤器&监视改动

模块化

ES6模块

箭头函数和function

ES6函数简写

fn3() { //干掉了:function,用在对象的属性中
                console.log(this);
},

key

<son v-for="(item,index) in persons" :key="index" ></son>

slot

组件生命周期

    activated(){  //激活的 keep-alive v-if="true"
        console.log('activated')
    },
    deactivated(){  //停用的 keep-alive v-if="false"
        console.log('deactivated')
    },
    beforeDestroy(){ //销毁前 v-if="false"
        console.log('beforeDestroy')
    },
    destroyed(){//销毁后 v-if="false"
        console.log('destroyed')
    },

获取DOM元素

上一篇下一篇

猜你喜欢

热点阅读