vue-element ui 学习笔记-02

最新推荐文章于 2024-09-12 09:11:34 发布

原创

最新推荐文章于 2024-09-12 09:11:34 发布 · 369 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨Vue的组件化思想，包括Vue实例、组件的全局和本地注册、生命周期、数据传递以及vue-cli的使用。强调组件的复用性和Vue实例的动态绑定，同时讲解了在项目中集成bootstrap的方法。此外，还介绍了Vue项目的开发模式，如webpack-simple模板的体验和项目依赖的安装。

Vue进阶

一、vue实例(对象)

1.一个基本的vue的实例

<!DOCTYPE html>
<html>
<head>
    <mata charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <h1>{
  
  {title}}</h1>
        <button id="btn" @click="btnclick">show</button>
        <p v-if="showFlag">显示段落</p>
        {
  
  {lowercasetitle}}
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<script type="text/javascript">
    var v1 = new Vue({
        el:'#app',
        data:{
            title:"This is Title",
            showFlag:false
        },
        methods:{
            btnclick:function(){
                this.showFlag=true;
                this.updateTitle('this is new title');
            },
            updateTitle:function(d){
                this.title = d;
            }
        },
        computed:{
            lowercasetitle:function(){
                return this.title.toLowerCase();
            }
        },
        watch:{
            title:function(newVal,oldVal){
                console.log(newVal);
            }
        }
    });
</script>
</html>

2.新的实例

new Vue({
    el:"#app2",
})

3.一个实例改变另一个实例中的内容，通过给实例命名
在一个实例中，通过调用另一个实例的属性，来操作其属性

var v1= new Vue();
var v2 = new Vue({
    el:"#app2",
    data:{},
    methods:{
        changeTitle:function(){
            v1.title = "change title";
        }
    }
});

4.在vue外面操作vue实例--操作属性

setTimeout(function(){
    v1.title = "st title";
},2000);

5.调用vue实例中的方法--操作方法

setTimeout(function(){
    v1.btnclick();
},2000);

6.为vue实例设置属性
vue中的实例属性

v1.$data
v1.$el

设置实例属性

var data = {
    arg1:"arg1 value"
}
var v2 = new Vue({
    el:"#app2",
    data:data,
});

实例属性还能这么调用：v1.$data.title相当于v1.title
7.实例属性ref的用法：相当于是id

<div id="app">
    <button ref="mybtn1" id="btn" @click="btnclick">show</button>
    <button ref="mybtn2" id="btn" @click="btnclick">show</button>
</div>

methods:{
    btnclick:function(){
        this.$refs.mybtn1.innerText = "tttttbbbbnnnn";
    }
}

8.动态绑定vue实例到页面中
mount加载的意思

<div id="app3"></div>
<script>
    var v3 = new Vue({
        template:"<h1>hello</h1>"
    });
    v3.$mount("#app3");
</script>

PS：

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

var v1 = new Vue({
    el:"#app1",
    data:{title:'hellovue'}
});
var v2 = new Vue({
    el:"#app2",
    methods:{
        ct1:function(){
            v1.title = 'hello js';
        }
    }
});

<!DOCTYPE html>
<html>
<head>
    <mata charset="UTF-8">
    <title>title</title>
</head>
<body>
<div id="app">
    {
  
  {title}}
    <button type="button" @click="toUpCase">点我</button>
    <!-- <button type="button" @click="toLowerCase">点我</button> -->
    {
  
  {toLowerCase}}
</div>
<div id="app1">
    <button type="button" @click="changeOtherVueTitle">点我</button>
    <button type="button" @click="m1">调用v1中的方法</button>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<script type="text/javascript">
    var v2 = new Vue({
        el:"#app1",
        methods:{
            changeOtherVueTitle:function(){
                v1.title = "Hello java!"
            },
            m1:function(){
                v1.toUpCase();
            }
        }
    });

    var v1 = new Vue({
        el:'#app',
        data:{
            // title:"hello vue"
            title:"HELLO VUE"
        },
        methods:{
            toUpCase:function(){
                this.title = this.title.toUpperCase();
            }
        },
        computed:{
            toLowerCase:function(){
                // this.title = this.title.toLowerCase(); // 报错
                return this.title.toLowerCase();
            }
        },
        watch:{
            title:function(n,o){
                console.log(n+":"+o);
            }
        }
    });
</script>
</html>

2.Vue对象操作另一个vue对象的内容，维度有两个，操作属性、操作方法
这些属性，是data或computed里定义的
3.Vue的实例属性
直接通过对象.的方式的调用的属性，是来自于data或computed中的属性，但是vue对象中的el、data等等这些键也称为属性，这些属性就是vue对象的实例属性！
注意：
1)ref的使用：在vue里面，往往使用ref属性来代替id属性的使用。那么就可以快速的通过调用ref的值来获得页面中的某个元素。

<button type="button" ref="mybtn1" @click="showVueObject">点我</button>
this.$refs.mybtn1.innerHTML="hello"

<div id="app1">
    {
  
  {title}}
</div>
<div id="app2">
    {
  
  {title}}
    <button type="button" ref="mybtn1" @click="showVueObject">点我</button>
    <button type="button" ref="mybtn2" @click="showVueObject">点我</button>
</div>

var v1 = new Vue({
    el:"#app1",
    data:{
        title:"vuetitle"
    }
});

var data = {
    title:"hello java"
}
var v2 = new Vue({
    el:'#app2',
    data:data,
    methods:{
        showVueObject:function(){
            console.log(v1);
            // v1.$data = data; // 报错
            this.$refs.mybtn1.innerHTML="hello"
        }
    }
});

2)mount的使用
实现了页面的元素和vue对象的动态绑定，之前都是通过el的方式来绑定，也可以通过mount实例属性进行绑定

<div id="app">
</div>
// var v1 = new Vue({
//     el:"#app",
//     template:"<h1>hello</h1>"
// });

var v1 = new Vue({
    template:"<h1>hello</h1>"
});
v1.$mount("#app");

二、Vue组件

万事万物皆对象

万物皆组件
1.vue组件
Vue.component实现全局注册

<div id="app1">
    <hello></hello>
</div>
Vue.component("hello",{
    template:"<h1>hello</h1>"
})
new Vue({
    el:"#app1"
})

注意：div得是vue的实例，组件创建好后，只要被vue注册过的div里面，都能使用该组件

2.Vue的生命周期函数
在控制台查看各函数的调用顺序，并调用destroy，再点改变title按钮，发现改变不了，因为已被销毁

<html>
    <head>
        <mata charset="UTF-8">
        <title>生命周期</title>
    </head>
 &nb

最低0.47元/天解锁文章