• vue学习记录(一)---基本指令


    1、在vue的实例化对象中对vue的data进行操作,建议用vm.$data进行操作, vm.$watch('字段', function(newValue, oldValue){})可以对字段进行监听,但是注意,该方法对路径引用的数组或对象来说,newValue与oldValue两个值是一样的,注意:在$watch里的函数尽可能不要用箭头函数,因为这样容易获取不到上下文

    let app = new Vue({
        el: '#container',
        data: {
            name: 'are you ok???',
            list: ['AAA', 'BBB', 'CCC']
        }
    });
    app.$watch('list', function() {
        console.log(arguments);
    });
    //输出两个 ['AAA', 'BBB', 'CCC','ddd']
    app.$data.list.push('ddd');
    app.$watch('name', function() {
        console.log(arguments);
    });
    //输出 'haha', 'are you ok???'
    app.$data.name='haha';

     2、vue的生命周期函数

    let app = new Vue({
        el: '#container',
        data: {
            name: 'this is title',
            list: ['aaa', 'bbb']
        },
        beforeCreate() {
            console.log(this, 'beforeCreate');
        },
        created() {
            console.log(this, 'created')
        },
        beforeMount() {
            console.log(this, 'beforeMount');
        },
        mounted() {
            console.log(this, 'mounted');
        },
        beforeUpdate() {
            console.log(this, 'beforeUpdate');
        },
        updated() {
            console.log(this, 'updated');
        },
        beforeDestroy() {
            console.log(this, 'beforeDestroy');
        },
        destroyed() {
            console.log(this, 'destroyed');
        }
    });
    
    setTimeout(() => {
        app.$data.name='check title';
    }, 2000);
    
    setTimeout(() => {
        app.$destroy();
    }, 5000);

     3、vue的三种插值方法

    <body>
    <div id="container">
        <h1>{{name}}</h1>
        <h2>{{age >= 30? '年龄大于等于30': '小于30岁'}}</h2>
        <h3>{{msg.split('').reverse().join('')}}</h3>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
    let app = new Vue({
        el: '#container',
        data: {
            name: 'title',
            age: 30,
            msg: 'good'
        }
    });
    </script>
    </body>

    注意:这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是,每个绑定都只能包含单个表达式,比如定义变量,用if语句等,是不生效的。

    4、vue指令

    v-once: 只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过

    v-pre: 跳过这个元素和它的子元素的编译过程

    <body>
    <div id="container">
        <h3 v-once>{{msg}}}</h3>
        <h3 v-pre>{{msg}}</h3>
    </div>
    <script src="./vue.js"></script>
    <script>
    let app = new Vue({
        el: '#container',
        data: {
            msg: '<b style="color: red">this is test</b>'
        }
    });
    </script>

    v-text:更新元素的 textContent。如果要更新部分的 textContent ,相当于 {{ Mustache }} 插值。

    v-html:更新元素的 innerHTML 。注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用 v-html 组合模板,需考虑是否通过使用组件来替代。

    <body>
    <div id="container">
        <h3 v-text="msg"></h3>
        <h3 v-html="msg"></h3>
    </div>
    <script src="./vue.js"></script>
    <script>
    let app = new Vue({
        el: '#container',
        data: {
            msg: '<b style="color: red">this is test</b>'
        }
    });
    </script>
    </body>

    输出内容:

    v-model:与表单指定的字段进行双向绑定,并且值随着字段的变化而变化

    • .lazy   - 取代 input 监听 change 事件
    • .number - 输入字符串转为有效的数字
    • .trim   - 输入首尾空格过滤
    <body>
    <div id="container">
        <input type="text" v-model.trim="msg">          <!--添加trim后,可以删除两边的空格-->
        <input type="text" v-model.number="msg">            <!--在data中把msg转成number类型的数据-->
        <input type="text" v-model.lazy="msg">              <!--添加lazy后的这个属性,相当于是change事件-->
        <h3>{{msg}}</h3>
        <input type="button" value="点击" @click="getVal">
    </div>
    <script src="./vue.js"></script>
    <script>
    let app = new Vue({
        el: '#container',
        data: {
            msg: ''
        },
        methods: {
            getVal() {
                console.log(`(${this.$data.msg})`);
                console.log(typeof this.$data.msg);
            }
        }
    });
    </script>
    </body>

    与表单组件的绑定,参看vue官方文档

    v-show: 根据表达式之真假值,切换元素的 display CSS 属性 即为false时,display: none;

    v-if: 当所绑定的值为true时会被渲染,否则会被销毁,不出现在元素中(注意v-for 与v-if不同时使用,因为v-for的优先级比v-if高,会导致各种嵌套)一般配合v-else, v-else-if 配合使用

    <body>
    <div id="container">
        <h3 v-show="show">{{msg}}</h3>      <!--如果是false的时候,那么会在对应的dom元素上添加style="display: none;"-->
        <h4 v-if="ifShow > 5">{{msg}}</h4>        <!--如果是false的时候,那么在dom元素上就不会渲染这个元素,即不存在-->
        <h4 v-else-if="ifShow == 5">{{msg}}--haha</h4>
        <h4 v-else>{{msg}}--this is true</h4>
    </div>
    <script src="./vue.js"></script>
    <script>
    let app = new Vue({
        el: '#container',
        data: {
            msg: 'this is message',
            show: false,
            ifShow: 3
        }
    });
    </script>
    </body>

    v-for: 参数可以是Array | Object | number | string 实现循环渲染

    <body>
    <div id="container">
        <ul><li v-for="(v,k) of msg">{{v}}----{{k}}</li></ul>
        <ul><li v-for="(v,k) in msg">{{v}}----{{k}}</li></ul>
    </div>
    <script src="./vue.js"></script>
    <script>
    let app = new Vue({
        el: '#container',
        data: {
            msg: 'good',
        }
    });
    </script>
    </body>

    v-on: 绑定事件

    • .stop - 调用 event.stopPropagation()
    • .prevent - 调用 event.preventDefault()
    • .capture - 添加事件侦听器时使用 capture 模式。
    • .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
    • .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
    • .native - 监听组件根元素的原生事件。
    • .once - 只触发一次回调。
    • .left - (2.2.0) 只当点击鼠标左键时触发。
    • .right - (2.2.0) 只当点击鼠标右键时触发。
    • .middle - (2.2.0) 只当点击鼠标中键时触发。
    • .passive - (2.3.0) 以 { passive: true } 模式添加侦听器

    具体参看vue官方文档

    <!-- 方法处理器 -->
    <button v-on:click="doThis"></button>
    
    <!-- 动态事件 (2.6.0+) -->
    <button v-on:[event]="doThis"></button>
    
    <!-- 内联语句 -->
    <button v-on:click="doThat('hello', $event)"></button>
    
    <!-- 缩写 -->
    <button @click="doThis"></button>
    
    <!-- 动态事件缩写 (2.6.0+) 相当于会把event转化成data里对应的event字段-->
    <button @[event]="doThis"></button>
    
    <!-- 停止冒泡 -->
    <button @click.stop="doThis"></button>
    
    <!-- 阻止默认行为 -->
    <button @click.prevent="doThis"></button>
    
    <!-- 阻止默认行为,没有表达式 -->
    <form @submit.prevent></form>
    
    <!--  串联修饰符 -->
    <button @click.stop.prevent="doThis"></button>
    
    <!-- 键修饰符,键别名 -->
    <input @keyup.enter="onEnter">
    
    <!-- 键修饰符,键代码 -->
    <input @keyup.13="onEnter">
    
    <!-- 点击回调只会触发一次 -->
    <button v-on:click.once="doThis"></button>
    
    <!-- 对象语法 (2.4.0+) -->
    <button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

    v-bind: 绑定属性

    <!-- 绑定一个属性 -->
    <img v-bind:src="imageSrc">
    
    <!-- 动态特性名 (2.6.0+) -->
    <button v-bind:[key]="value"></button>
    
    <!-- 缩写 -->
    <img :src="imageSrc">
    
    <!-- 动态特性名缩写 (2.6.0+) -->
    <button :[key]="value"></button>
    
    <!-- 内联字符串拼接 -->
    <img :src="'/path/to/images/' + fileName">
    
    <!-- class 绑定 -->
    <div :class="{ red: isRed }"></div>
    <div :class="[classA, classB]"></div>
    <div :class="[classA, { classB: isB, classC: isC }]">
    
    <!-- style 绑定 -->
    <div :style="{ fontSize: size + 'px' }"></div>
    <div :style="[styleObjectA, styleObjectB]"></div>
    
    <!-- 绑定一个有属性的对象 -->
    <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
    
    <!-- 通过 prop 修饰符绑定 DOM 属性 -->
    <div v-bind:text-content.prop="text"></div>
    
    <!-- prop 绑定。“prop”必须在 my-component 中声明。-->
    <my-component :prop="someThing"></my-component>
    
    <!-- 通过 $props 将父组件的 props 一起传给子组件 -->
    <child-component v-bind="$props"></child-component>
    
    <!-- XLink -->
    <svg><a :xlink:special="foo"></a></svg>

    v-cloak: 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none }一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

    [v-cloak] {
      display: none;
    }
    <div v-cloak>
      {{ message }}
    </div>
  • 相关阅读:
    xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun
    查看公钥
    Flutter 环境配置,创建工程
    Flutter 简介
    Mac版本 FinalShell SSH工具
    windows下如何生成公钥和私钥
    pyqt 打包为dmg文件
    apple 升级后shell切换为zsh
    dart 类共享变量
    python 获取一小时前的时间戳
  • 原文地址:https://www.cnblogs.com/rickyctbu/p/9821170.html
Copyright © 2020-2023  润新知