Vue学习笔记(一)

Vue实例

Vue实例图

在这里插入图片描述

  1. 把Vue的实例命名为vm是尤雨溪的习惯,继承使用
  2. vm对象封装了对视图的所有操作,包括数据读写、事件绑定、DOM更新
  3. vm的构造函数是Vue,按照ES6的说法,vm所属的类是Vue
  4. options是new Vue的参数,选项或构造选项

options

  • 数据:data、props、propsData、computed、methods、watch
  • DOM: el、 template、render、renderError
  • 生命周期钩子:beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、activated、deactivated、beforeDestory、destoryed、errorCaptured
  • 资源: directives、filters、components
  • 组合: parent、mixins、extends、provide、inject
  • 其他:先不看

el-挂载点

el写在实例里面

new Vue({
	el:"#app"
})

$mount挂载

new Vue({
}).$mount("#app");

data-内部数据

data用对象形式体现

const Vue = window.Vue;
Vue.config.productionTip = false;
import Demo from './Demo.vue'
const vm = new Vue({
    data:{
       n:0
    },
    template:`
    <div class="red">
        {{n}}
        <button @click="add">+1</button>
    </div>
    `,
    methods:{
        add(){
            this.n += 1;
        }
    }
});
vm.$mount("#xiaobangsky");

data用函数形式体现

const Vue = window.Vue;
Vue.config.productionTip = false;
import Demo from './Demo.vue'
const vm = new Vue({
    data(){
        return {
            n:0
        }
    },
    template:`
    <div class="red">
        {{n}}
        <button @click="add">+1</button>
    </div>
    `,
    methods:{
        add(){
            this.n += 1;
        }
    }
});
vm.$mount("#xiaobangsky");
  • 优先使用函数
  • 对象形式存在bug,原因:
import Demo from './Demo.vue'
const vm = new Vue({
	//此处创建引入了两个单文件组件,也就相当于有两个data存在,但是这两个data的数据存放在同一个内存地址里面,修改了其中一个的data,另外一个data的数据也随之改变
	//如果是用函数的话,就不存在这个问题,因为每新建一个,就是一个独立的data
    render:h=>(x,[h(Demo),h(Demo)])
});

methods

事件处理函数

const Vue = window.Vue;
Vue.config.productionTip = false;
import Demo from './Demo.vue'
const vm = new Vue({
    //事件处理函数
    methods:{
        add(){
            this.n += 1;
        }
    },
});
vm.$mount("#xiaobangsky");

普通函数

const Vue = window.Vue;
Vue.config.productionTip = false;
const vm = new Vue({
    template:`
    <div class="red">
        {{n}}
        <button @click="add">+1</button>
        <hr>
        {{filter()}}
    </div>
    `,
    methods:{
        add(){
            this.n += 1;
        },
        filter(array){
        	//每次页面进来都会调用,因为在重新构建页面,有bug
            console.log("进来了filter");
            return this.array.filter(i=> i%2===0);
        }
    },
});
vm.$mount("#xiaobangsky");

components

const Vue = window.Vue;
Vue.config.productionTip = false;
import Demo from './Demo.vue'
//第二种方式
Vue.component("Demo2",{
    template:`<div>demo12221</div>`
});
const vm = new Vue({
	//第一种方式 优先使用,模块化
    // components:{
    //     xiaobang:Demo
    // },
    //第三种方式
    components:{
        demo3:{
            data(){
                return {
                    n:0
                }
            },
            template:`<div>xiaobang is n:{{n}}</div>`
        }
    },
    data(){
        return {
            n:0,
            array:[1,2,3,4,5,6,7,8]
        }
    },
    template:`
    <div class="red">
        {{n}}
        <button @click="add">+1</button>
        <hr>
         <!--<xiaobang/>-->
        <Demo2/>
        {{filter()}}
    </div>
    `,
    methods:{
        add(){
            this.n += 1;
        },
        filter(array){
            console.log("进来了filter");
            return this.array.filter(i=> i%2===0);
        }
    },
});
vm.$mount("#xiaobangsky");

生命周期钩子

//Demo.vue
<template>
    <div class="red">
        {{n}}
        <button @click="add">+1</button>
    </div>
</template>

<script>
export default {
   data(){
        return {
            n:0,
            array:[1,2,3,4,5,6,7,8]
        }
    },
    created(){
        //实例出现在内存中
        console.log("出现在内存中,没有出现在页面中");
    },
    mounted(){
        //实例出现在页面中
        console.log("出现在页面中"); 
    },
    updated(){
        //实例更新了
        console.log("更新了");
        console.log(this.n);
    },
    destroyed(){
        //实例消亡了
        console.log("已经消亡了");
    },
    methods:{
        add(){
            this.n += 1;
        }
    }
}
</script>
<style scoped>
.red{
    color: red;
}
</style>
//main.js
const Vue = window.Vue;
Vue.config.productionTip = false;
import Demo from './Demo.vue'
new Vue({
    components:{Demo},
    data(){
        return {
            visible:true
        }
    },
    template:`
    <div>
        <button @click="toggle">toggle</button>
        <Demo v-if="visible === true"/>
    </div>
    `,
    methods:{
        toggle(){
            this.visible = !this.visible
        }
    }
}).$mount("#xiaobangsky");

props-外部数据

//Demo.vue
<template>
    <div class="red">
        这里是Demo的内部{{msg}}
        <button @click="fn">call fn</button>
    </div>
</template>

<script>
export default {
    props:['msg','fn']
}
</script>

<style scoped>
.red{
    color: red;
    border: 1px solid blue;
}
</style>
//main.js
const Vue = window.Vue;
Vue.config.productionTip = false;
import Demo from './Demo.vue'
new Vue({
    components:{Demo},
    data(){
        return {
            visible:true,
            n:0
        }
    },
    template:`
    <div>
        {{n}}
        <!--<Demo msg="你好,xiaobangsky"/>-->
        <!--<Demo :msg=" n "/>-->
        <Demo :msg="n" :fn=" add "/>
    </div>
    `,
    methods:{
        add(){
            this.n += 1;
        },
        toggle(){
            this.visible = !this.visible
        }
    }
}).$mount("#xiaobangsky");
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页