码迷,mamicode.com
首页 > 其他好文 > 详细

Vue系列教程(二)之Vue进阶

时间:2020-05-09 18:41:09      阅读:52      评论:0      收藏:0      [点我收藏+]

标签:component   不同   注意事项   tin   另一个   func   阶段   change   全局   

一、Vue对象的操作

1. 可以通过一个Vue对象操作另一个Vue对象

var v1 = new Vue({
        el: "#app1",
        data: {title:”hello vuw!”}
    });
    var v2 = new Vue({
        el: "#app1",
        methods:{
            changev1title:function () {
                v1.title = "hello python!"
            },
        }
    });

2.Vue对象操作另一个Vue对象的内容,维度有两个,操作属性、操作方法

这些属性是data或computed里定义的
    var v2 = new Vue({
        el: "#app1",
        methods:{
            changev1title:function () {
                v1.title = "hello python!"
            },
            v1upper: function () {
                v1.toUpperCase()
            }
        }
    });

 3.Vue的实例属性

   直接通过对象的方式定义的属性,是来自于data或computed中的属性,但是vue对象中的el、data等等这些键也称为属性,这些属性是vue对象的实例属性!

注意:

1)ref的使用

在vue里面,往往使用ref属性来代替id属性的使用,那么就可以快速的通过的调用ref的值来获取页面中的某个元素。

<button type="button" ref="mybtn1" @click="showVueObject">点我</button>
showVueObject:function () {
   this.$refs.mybtn1.innerHTML = "hello"
}

2)mount的使用

实现了页面元素与vue对象的动态绑定,之前都是通过el的方式绑定。

<div id="app"></div>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script>
    var v1 = new Vue({
        template:"<h1>hello template</h1",
    });
    v1.$mount(‘#app‘);
</script>

二、Vue的组件

Vue的一大特性:组件化。可以将vue对象作为一个组件,被反复的使用。

注册组件的方式有两种,全局注册和局部注册。

1.注册组件(全局注册)

Vue.component(“组件名”,{vue对象})

2.使用组件

在被vue对象绑定了的html元素中才可以使用组件,如果一个div没有被vue绑定,那么这个div中不能使用之前注册的组件。

<div id="app">
    <model1></model1>
    <model1></model1>
    <model1></model1>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script>
    Vue.component("model1",{
        template:"<div>{{title}}<button type=‘button‘ @click=‘mybtn‘>点我</button> </div>",
        data:function(){
            return {
                title: "hello vue",
            }
        },
        methods: {
            mybtn: function () {
                alert(‘hello vue!!!‘);
            }
        }
    });
    new Vue({
        el: "#app",
    })

3.作为组件的vue对象的注意事项

  特点1:

Vue.component(“组件名”,{vue对象}),这个vue对象和之前的vue对象的data属性的写法是由区别的

new Vue({
        el: "#app",
        data: {
           name: “xx”,
           age: 23,
});
Vue.component("model1",{
        data: function(){
        return {
                name: “xx”,
                age: 23,
            }
        },
    });

特点2:

组建中template的值是一个字符串,其有且仅有一个根元素

错误:

        template:"<div>{{title}}</div><button type=‘button‘ @click=‘mybtn‘>点我</button>",

正确:

        template:"<div>{{title}}<button type=‘button‘ @click=‘mybtn‘>点我</button> </div>",

4.Vue组件的本地注册(局部注册)

Vue的全局注册,意味着在页面中任意一个被vue绑定的div中都以使用用全局注册的vue组件。但是,如果是对vue组件进行本地注册,那么在其他被vue绑定的div中,不能使用该组件。

<div id="app">
    <model11></model11>
</div>
<div id="app1">
    <model11></model11>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script>
    var model1 = {
        template:"<div><h1>{{title}}</h1><button type=‘button‘ @click=‘mybtn‘>点我</button></div>",
        data:function(){
            return {
                title: "hello vue",
            }
        },
        methods: {
            mybtn: function () {
                alert(‘hello vue!!!‘);
            }
        }
    };
    new Vue({
        el: "#app",  // 只有这个组件可以使用model11组件
        components:{
            "model11": model1,
        }
    });
    new Vue({
        el: "#app1",   // 这个div对象不能使用model11组件
    })
</script>  

三、Vue的生命周期

一个Vue对象会经历初始化、创建、绑定、更新、销毁等阶段,不同的阶段,都会有相应的生命周期钩子函数被调用,可以参考官方文档的生命周期示意图。

技术图片

 

 

<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            title:"this is title"
        },
        methods:{
            changeTitle:function(){
                this.title= "new title";
            },
            destroy:function(){
                this.$destroy();
            }
        },
        // ES5
        beforeCreate:function(){
            console.log("beforeCreate")
        },
        // ES6
        created(){
            console.log("created")
        },
        beforeMount(){
            console.log("beforeMount")
            // 3.一个页面中只有一个div,其他的都是vue组件
            // vue组件里的data必须使用function的形式对{}对象进行封装,防止对其他数据的修改。 注意,template里必须有
            // 一个根节点。
        },
        mounted(){
            console.log("mounted")
        },
        beforeUpdate(){
            console.log("beforeUpdate")
        },
        updated(){
            console.log("updated")
        },
        beforeDestroy(){
            console.log("beforeDestory")
        },
        destroyed(){
            console.log("destory")
        }
    })
</script>

执行顺序:

ProductInfo.vue?ca1b:17 beforeCreate

ProductInfo.vue?ca1b:21 created

ProductInfo.vue?ca1b:24 beforeMount

ProductInfo.vue?ca1b:30 mounted

ProductInfo.vue?ca1b:30 beforeUpdate

ProductInfo.vue?ca1b:30 Update

ProductInfo.vue?ca1b:39 beforeDestory

ProductInfo.vue?ca1b:42 destory

 

Vue系列教程(二)之Vue进阶

标签:component   不同   注意事项   tin   另一个   func   阶段   change   全局   

原文地址:https://www.cnblogs.com/zhangyafei/p/12859204.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!