vue基础

vue

分层

mvc:什么是,什么时候用
    1.特点:
        1.在什么地方些什么东西,规定,易于管理,最早出现在web项目中,不适合小型项目使用,解决代码复杂性的问题
        解决了代码的耦合度
        2.将数据访问层,业务层,视图层解耦
        3.更容易开发,维护开发效率更高
    2.优点:
        1.耦合性低
        2.重用性高
        3.生命周期成本低
        4.开发和成本较低,简单
        5.可维护性高
    3.缺点:
        1.不适合小项目
    2.view:视图,数据展示
    3.controller:接受视图的结果,要求model 层改变状态
    4.model:数据

学习方式

第一天做笔记,但三天重新打一遍理解

知识点

指令:

1.v-html,可以data,ha:"<a href='#'>这是一个标签</a>"
使用:v-html="ha".
2.生命周期钩子:
实例生命周期的不同阶段被调用
created:在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
mounted:el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
beforeDestroy:实例销毁之前调用。在这一步，实例仍然完全可用
3.插值表达式里面可以写语句,通常是一句表达式
4.v-on:click 可以省略写成@click,标识单击事件,后边可以给对象中的一个属性进行操作,但是无法对数组中的一个元素进行操作
v-bind,可以省略成 :属性  绑定属性的用,给属性赋值
例如: 
<div :style="myStyle">这是行内样式</div>
	data:{
            myStyle:{
                color:'red',
                fontSize:22+'px',
            }
        },
v-model,同样也是绑定属性用,但是这个是双向绑定
5.指令赋值全是等号后跟""
6.key通常跟input连用,区分两个标签
7.template,标签不会渲染到html 中,我们可以在模板用这个标签作为根节点
8.$emit(),事件的名称,传递的参数,发号施令的函数
9.如果要使用data中的值,要使用this进行标注
修饰符
	1..lazy
	2..number
	3..trim 
过滤器:
	你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind

函数/事件:

1.生命周期钩子:
实例生命周期的不同阶段被调用
created:在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
mounted:el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
beforeDestroy:实例销毁之前调用。在这一步，实例仍然完全可用
2.计算属性:
computed,对原数据进行加工处理,在computed计算这个属性中.这个属性写的方法,是一个get,set的封装,那就是说,方法就是取值或者赋值
3.setInterVal()第一个参数是函数,第二个参数是时间,每隔多少时间,执行一次函数
使用:setInterval(()=>_this.date=new Date(),1000)
每隔一秒钟,执行这个赋值函数
4.

语句

1.循环语句:
v-for="(shop,index) in oldData
如果,oldData,是一个对象,那么,shop就是value值,index就是key
如果olddata,是一个数组,那么,shop,就是数组中一个对象,shop打点就可以调出来属性,放在插值表达式中,,index,就是数组中的下标
2.分支
v-if,v-else-if,v-else,不满足条件,标签不存在
使用:
 	<h1 v-if="status===1">第一个</h1>
    <h1 v-else-if="status===2">第二个</h1>
    <h1 v-else="status===3">第三个</h1>
    <h1 v-else="status===4">第四个</h1>
v-show,v-else,不满足条件,标签隐藏,(为标签添加display:none)
3.模板(全局模板)
 Vue.component("myCom", {
		定义外边所传递的变量
        props: ["childCount"],
		模板
        template: `
        <div>
                <button @click="add" >+1</button>
                 <button @click="del">-1</button>
        </div>
    `,
		内部数据:
        data() {
            return {
                count: this.childCount
            }
        },
		内部的方法:
		methods: {
            add: function () {
                console.info(this.count)
                this.count = this.count + 1
                this.$emit("update",this.count)
                console.info("*-*-*-*" + this.count)
            },
            del: function () {
                this.count = this.count - 1
                this.$emit("update",this.count)
            }

        },
    })