Vue学习笔记2—Vue基础

最新推荐文章于 2024-07-24 10:40:52 发布

卢严砖

最新推荐文章于 2024-07-24 10:40:52 发布

阅读量143

点赞数 1

分类专栏： Vue 文章标签： Vue 前端

本文链接：https://blog.csdn.net/Hades____/article/details/90084994

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue基础

复习

options的根属性
- el : 目的地（string||DOM元素）
- template : 模板
- data : 可以直接返回一个对象，也可以是一个函数，然后return一个对象；在对象中的属性，可以直接在页面中用key使用，但是在js中要使用this.key
- components : 用来声明组件的一个对象属性，key是组件名，value是组件对象
- methods : 存放方法的对象属性，通过methodName : function() {code lines }
- props : （因为在vue中子组件接收父组件传来的值是通过属性来传值的）子组件接收参数的属性[‘属性名1’, ‘属性名2’]
指令
- v-text / v-html：text就是给元素的innerText属性赋值（v-text必须在双标签中）；html就是给元素的innerHtml属性赋值
- v-if / v-show ：if就是是否插入或者移除；show就是是否显示或者隐藏
- v-else-if / v-else：这两个只能够和v-if指令配合使用
- v-bind / v-on：bind是绑定属性用的；on就是用来绑定事件用的
  - v-bind 的简写：:属性名 = "变量||常量名"
  - v-on 的简写：@原生事件名 = "给变量进行的操作||变量名"
- v-bind / v-model：bind是单向传输数据，vue到页面；model是双向传输数据，vue到页面然后页面再到vue，v-model只能使用在具有value属性的元素

注册全局组件

应用场景：多处使用的公共性功能组件，就可以注册成全局组件，减少冗余代码
注册全局组件的API：Vue.component('组件名'，组件对象)

<div id="app"></div>
<script src="js/vue.min.js"></script>
<script>

    // 注册公共的全局组件
    Vue.component('my_button', {
        template : `
            <button style = 'background-color : red;'>这是一个公共的漂亮的按钮</button>
        `
    })

    // 创建header组件
    var myHeader = {
        template : `
            <div>
                我是header组件
                <my_button />
            </div>
        `
    }

    // 创建footer组件
    var myFooter = {
        template : `
            <div>
                我是footer组件
                <my_button />
            </div>
        `
    }

    // 创建footer组件
    var App = {
        template : `
            <div>
                <my_header />
                我是子组件<my_button />
                <my_footer />
            </div>
        `,
        components : {
            my_header : myHeader,
            my_footer : myFooter,
        }
    }
		
    new Vue({
        el : '#app',
        template : `
            <div>
                <h1>我是父组件</h1>
                <my_button />
                <hr>
                <app />
            </div>
        `,
        components : {
            app : App,
        }
    })
</script>

附加功能：过滤器

filter(全局)||filters(组件内)
- 将数据进行添油加醋的操作
- 过滤器分为两种
  1. 组件内的过滤器（组件内有效）
  2. 全局过滤器（所有组件共享）
- 先注册，后使用
- 注册
  - 组件内注册需要添加属性filters : {过滤器名 : function(){代码行；}}最终方法内通过return产出最终的数据
  - 注册全局过滤器的API：Vue.filter(过滤器名， function(){代码行；})最终也是方法内通过return产出最终的数据
- 使用方式是{{ 原有数据 | 过滤器名}}要注意下v-text中用$options.filters.过滤器名(原有数据)

<div id="app"></div>
<script src="js/vue.min.js"></script>
<script>

    Vue.filter('fil_2' , function(value) {
        return '这是用v-text插件显示的value反转后的值（全局过滤器）：' + value.split('').reverse().join(',');
    })

    new Vue({
        el : '#app',
        template : `
            <div>
                <input type = 'text' v-model = "myValue" />
                <br />
                {{myValue | fil_1('这是用差值表达式显示的value反转后的值：')}}
                <p v-text = $options.filters.fil_2(myValue)></p>
            </div>
        `,
        data() {
            return {
                myValue : '这是Value的值',
            }
        },
        filters : {
            fil_1 : function(value, str) {
                return str + value.split('').reverse().join('');
            },
        }
    })
</script>

附加功能：监视改动

watch 监视单个数据
- 因为监视的是对象的地址，所以监视分为浅度监视（数据类型不是对象和列表）和深度监视（数据类型是对象和列表）
- 浅度监视使用方法：给对象添加watch的属性，属性的值为一个对象类型，该对象类型的键为data属性里数据的名称，值为函数watch : {数据名称 : function(newValue, oldValue){代码行;}}(该函数的两个参数第一个是新值，第二个参数是旧值)
- 深度监视使用方法：给对象添加watch的属性，属性的值为一个对象类型，该对象类型的键为data属性里数据的名称，值为一个对象类型，其中有两个属性（deep和handler），deep用来控制是否深度监视，handler是用来写入方法。watch : {数据名称 : {deep : true, handler : function(newValue, oldValue){代码行;}}}(因为监视还是监视的对象的地址，又因为该函数的两个参数的数据类型是对象或者列表，地址不会更改，所以连个参数的访问地址都是一样的，都是新的值)
cumputed 监视多个数据
- computed : {监视的业务名 : function(){代码行;}}最终方法内通过return显示一些内容
  - 使用方法：{{计算属性的名称}}

<div id="app"></div>
<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el : '#app',
        template : `
            <div>
                <input type = 'text' v-model = 'myValue1' />
                {{myValue1}}
                <br />
                <input type = 'text' v-model = 'myValue2[0].name' />
                {{myValue2[0].name}}
                <hr />
                <input type = 'number' v-model = n_1 />
                +
                <input type = 'number' v-model = n_2 />
                -
                <input type = 'number' v-model = n_3 /> 
                ={{result}}
            </div>
        `,
        data : {
            myValue1 : '请输入xxxx',
            myValue2 : [{name : '改变原来的值'}],
            n_1 : 0,
            n_2 : 0,
            n_3 : 0,
        },
        watch: {
            myValue1 : function(newValue, oldValue) {
                console.log(oldValue);
                if (newValue == 'xxxx') {
                    alert('让你输你就输，让你吃屎呢')
                }
            },
            myValue2 : {
                deep : true,
                handler : function(newValue, oldValue) {

                    alert('改变成功！！原来的值为：' + e[0].name)
                }
            }
        },
        computed: {
            result : function(e) {
                return this.n_1-0 + (this.n_2-0) - this.n_3;
            }
        },
    })
</script>

内置组件：slot

用来将DOM元素的传递，其中被slot组件留下的位置，可以在用该DOM时放入你想放的数据
留坑方法:
- 正常留坑：<slot></slot>
- 具名留坑：<slot name = '名字'></slot>
使用方法：
- 正常使用：<子组件名>DOM</子组件名>
- 具名使用：<子组件名 slot = "名字">DOM</子组件名>
slot是动态的DOM，props是动态的数据

<style>
    li {
        list-style: none;
        width: 33%;
        height: 200px;
        background-color: brown;
        float: left;
        border: 1px black solid;
    }
</style>
<div id="app"></div>
<script src="js/vue.min.js"></script>
<script>

    var myLi1 = {
        template : `
            <li>
                <h5>第一个子组件DOM</h5>
            </li>
        `,
    }

    var myLi2 = {
        template : `
            <li>
                <slot></slot>
            </li>
        `,
    }

    var mySlot = {
        template : `
            <div>
                <p>我是第一个坑：</p>
                <slot name = 'one'></slot>
                <hr />
                <p>我是第二个坑：</p>
                <slot name = 'two'></slot>
            </div>
        `,
    }

    new Vue({
        el : '#app',
        template : `
            <div>
                <ul>
                    <my_li1><h1>1</h1></my_li1>
                    <my_li1><button>2</button></my_li1>
                    <my_li1>
                        <bold>3</bold><br />
                        <bold>33</bold><br />
                        <bold>333</bold><br />
                        <bold>3333</bold><br />
                    </my_li1>
                    <my_li2><h1>1</h1></my_li2>
                    <my_li2><button>2</button></my_li2>
                    <my_li2>
                        <bold>3</bold><br />
                        <bold>33</bold><br />
                        <bold>333</bold><br />
                        <bold>3333</bold><br />
                    </my_li2>
                </ul>
                <my_slot>
                    <h1 slot = 'two'>我是第二个坑的内容</h1>
                    <h1 slot = 'one'>我是第一个坑的内容</h1>
                </myslot>
            </div>
        `,
        components : {
            my_li1 : myLi1,
            my_li2 : myLi2,
            my_slot : mySlot,
        },
    })
</script>

生命周期钩子

beforeCreate 组件创建之前
created 组件创建之后
- 使用该组件，就会触发以上的created和beforeCreate事件函数（钩子函数）,created中可以操作数据，并且可以实现vue->页面的影响，应用：发起ajax请求
beforeMount vue起作用，装载数据到DOM之前
mounted vue起作用，装载数据到DOM之后
- beforeMount vue启动前的DOM
- mount vue启动后的DOM
beforeUpdate 基于数据改变，影响页面，改变前
updated 基于数据改变，影响页面，改变后
- 以上两个是当有更改数据才会触发
- 应用：beforeUpdate 可以获取原DOM；updated可以获取新的DOM
beforeDestroy 对应父组件v-if false 就销毁当前组件，销毁之前
destroyed 对应父组件v-if false 就销毁当前组件，销毁之后
- 应用：最终都是做一些其他功能的释放，比如：保存localStorage
activated 组件被激活了
deactivated 组件被停用了
- 不能够频繁的创建和销毁组件，需要用<keep-alive></keep-alive>内置组件包裹，通过在keep-alive内置组件里使用v-if就相当于是组件的激活和停用

<div id="app"></div>
<script src="js/vue.min.js"></script>
<script>

    var App = {
        template : `
            <div>
                <input type = 'text' v-model = 'myValue' />
                <button @click = 'myValue = myValue + 1'>加1</button>
                <hr />
                <h1>{{myValue}}</h1>
            </div>
        `,
        data() {
            return {
                myValue : 'xxx',
            }
        },
        beforeUpdate() {
            console.log('子组件，beforeUpdate');
        },
        updated() {
            console.log('子组件，updated');
        },
        beforeDestroy() {
            console.log('子组件，beforeDestroy');
        },
        destroyed() {
            console.log('子组件，destroyed');
        },
        activated() {
            console.log('子组件，activated');
        },
        deactivated() {
            console.log('子组件，deactivated');
        },
    }

    new Vue({
        el : '#app',
        template : `
            <div>
                <keep-alive>
                    <app v-if = 'isExist'></app>
                </keep-alive>
                <button @click = 'isExist = !isExist'>点击决定是否显示内容</button>
            </div>
        `,
        components : {
          app : App,  
        },
        data : {
          isExist : true,
        },
        beforeCreate : function() {
            console.log('父组件，beforeCreate');
            // console.log(document.body.innerHTML);
        },
        created : function() {
            console.log('父组件，created');
            // console.log(document.body.innerHTML);
        },
        beforeMount : function() {
            console.log('父组件，beforeMount');
            // console.log(document.body.innerHTML);
        },
        mounted : function() {
            console.log('父组件，mounted');
            // console.log(document.body.innerHTML);
        },
        beforeUpdate() {
            console.log('父组件，beforeUpdate');
        },
        updated() {
            console.log('父组件，updated');
        },
        activated() {
            console.log('父组件，activated');
        },
        deactivated() {
            console.log('父组件，deactivated');
        },
        beforeDestroy() {
            console.log('父组件，beforeDestroy');
        },
        destroyed() {
            console.log('父组件，destroyed');
        },
    })
</script>

ajax异步传输，axios是基于promise的，还有vue-resource

卢严砖

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue学习笔记2—Vue基础

Vue基础复习options的根属性el : 目的地（string||DOM元素）template : 模板data : 可以直接返回一个对象，也可以是一个函数，然后return一个对象；在对象中的属性，可以直接在页面中用key使用，但是在js中要使用this.keycomponents : 用来声明组件的一个对象属性，key是组件名，value是组件对象methods : 存...
复制链接

扫一扫