Vue

前提

Vue

进度: https://www.bilibili.com/video/BV1Zy4y1K7SH/?p=6&spm_id_from=pageDriver&vd_source=81bee25537470aeb5c65db3a5bba55ac

• 进度: 第23节

Vue2文档教程: https://v2.cn.vuejs.org/v2/guide/

https://v2.cn.vuejs.org/v2/guide/index.html

导入:

new Vue

• Vue实例和容器 一对一

<!-- 1. 插值语法{{}} 常用于html标签中 -->
    <!-- 2. v-bind: 常用于标签属性中 -->
    <div id="root">
        <h1>{{new Date()}}</h1>
        <h1>{{name}}</h1>
        <!--  v-bind: 可简写为 : -->
        <p><a :href="url" target="_blank">我的博客</a></p>
    </div>
    <script>
        // 关闭生产环境提示
        Vue.config.productionTip = false;
        // 创建Vue实例
        new Vue({
            el: "#root",
            data: {
                name: "Hello Vue",
                url: "https://www.yujing.fit"
            }
        })
    </script>

数据绑定

 <div id="app">
        <p>单向数据绑定:<input type="text" :value="text"></p>
 
        <!-- v-model只能用在表单类标签中的value属性, v-model:value 可简写为 v-model -->
        <p>双向数据绑定:<input type="text" v-model="text"></p>
    </div>
 
    <script>
        new Vue({
            el: "#app",
            data:{
                text: "Tiam"
            }
        })
    </script>

挂载方式

    <div id="app">
        {{text}}
    </div>
    <script>
        const vm = new Vue({
            // 函数式写法 data:function() { } , 可简写为以下(推荐)
            data() {
                return {
                    text: "Tiam"
                }
            }
        })
        // 挂载
        vm.$mount("#app");
        console.log(vm);
 
        let number = 18;
        let person = {
            name: "luo",
        }
        Object.defineProperty(person, 'age', {
            // value: 18,
            // enumerable: true, // 是否可枚举(不可枚举 颜色较淡)
            // writable: true,  // 控制属性是否可更改
            // configurable: true,  // 控制属性是否可删除
 
            // 每当有人读取person的age时,自动调用
            get() {
                return number;
            },
 
            set(value) {
                console.log("被修改了为" + value);
                number = value;
            }
        })
        console.log(person);

数据代理 | 数据劫持

• 理解其作用

    <div id="app">
        <div>{{name}}</div>
        <!--  v-on: 可简写为 @ -->
        <button v-on:click="change">求求你,点点我</button>
        <button @click="method1('参数1',$event)">调用 method1 </button>
    </div>
    <script>
        Vue.config.productionTip = false;
        // (数据代理: 通过vm对象来代理data对象中的属性的操作, 更加方便的操作data中的数据)
        let data = {
            name: "湖北师范大学",
            address: "黄石港区"
        }
        const vm = new Vue({
            el: '#app',
            // data中数据是通过 Object.defineProperty 方法定义的 
            data,
            methods: {
                change(event) {
                    console.log(event);
                    // 获取标签中的数据
                    console.log(event.target.innerText);
                    console.log(data);
                    // 指向当前Vue实例
                    console.log(this);
                    this.name = this.address;
                },
                // 不推荐写箭头函数
                method1: (param, event) => {
                    // 箭头函数中的this指向window对象, 是静态的
                    console.log(this);
                    console.log(param);
                    console.log(event);
                }
            }
        })
        // 在_data中做了 数据劫持
        console.log(vm._data === data);  // true
 
    </script>

事件修饰符

<div id="app">
        <h2>Vue中的6个事件修饰符(常见前3个)</h2>
        <ul>
            <li>1. prevent  阻止默认事件</li>
            <li>2. stop  阻止事件冒泡 , 从子元素到父元素冒泡</li>
            <li>3. once   事件只触发一次</li>
            <li>4. capture  使用事件的捕获模式 , 捕获(事件)行为从父元素到子元素</li>
            <li>5. self   只有event.target是当前操作的元素才出发事件 , 即点击 其子元素不会触发</li>
            <li>6. passive  事件的默认行为立即执行, 无需等待时间回调执行完毕, 就是刚调用的函数还没执行完, 又被触发了, 就会等待函数执行完, 卡住调用的行为.
                 使用passive后就不会等待函数执行完, 执行调用行为</li>
        </ul>
        <p>修饰符可链式调用eg: @click.prevent.stop.once 添加多个事件</p>
        <a href="https://yujing.fit" @click.prevent="jumpToMyBlog">俺的博客儿</a>
 
        两个滚动条事件
        @scroll
        @wheel
    </div>
    <script>
        new Vue({
           el: '#app',
           data: {
               
           },
           methods: {
            jumpToMyBlog(e){
                alert("欢迎!");
                // 阻止事件的默认行为 等同于 @click.prevent, 即不执行跳转
                // e.preventDefault();
            }
           },
        })
    </script>

键盘事件

<div id="app">
        <h1>键盘事件</h1>
        <h2>@keydown: 键盘被按下后触发</h2>
        <h2>@keyup: 键盘被按下后不触发, 松开后触发(一般常用这个)</h2>
        <h2>您刚刚输入了:{{info}} </h2>
 
        <input type="text" @keyup.ctrl.enter="showInfo" placeholder="输入后 按下Ctrl+回车后打印信息">
 
        <h2>您按下了: {{key}}, 其键盘码(ASCII码)为{{code}} </h2>
        <input type="text" @keydown="showkey" placeholder="打印你按下的键盘">
 
        <!-- 捕获特定的键 -->
        <h3>常用按键别名</h3>
        <ol>
            <ul>回车 => enter</ul>
            <ul>删除(包括Back和Delete两个键) => delete</ul>
            <ul>退出 => esc</ul>
            <ul>空格 => space</ul>
            <ul>换行 => tab (适合使用keydown, 否则会失效)</ul>
            <ul>上 => up</ul>
            <ul>下 => down</ul>
            <ul>左 => left</ul>
            <ul>右 => right</ul>
        </ol>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                info: "",
                key: "",
                code: ""
            },
            methods: {
                showInfo: function (e) {
                    // 等同于 @keyup.enter 输入回车后触发
                    // if (e.keyCode !== 13) return;
                    console.log(e.target.value);
                    this.info = e.target.value;
                },
                showkey(e) {
                    // 不推荐使用键盘码keyCode, 因为不同键盘的键盘码可能不同, keyCode已被废弃.
                    console.log("您输入了" + e.key, e.keyCode);
                    this.key = e.key;
                    this.code = e.keyCode;
                }
            }
 
        })
    </script>

计算属性computed

 <div id="app">
        <label for="na">姓: <input id="na" type="text" v-model="na"></label><br>
        <label for="me">名: <input id="me" type="text" v-model="me"></label><br>
        <span>姓名:【{{na}}-{{me}}】 </span><br>
        <span>插值语法 调用函数 返回值(效率不高): 【{{fullName()}} 】，每次使用都会调用,【{{fullName()}}】</span><br>
        <span>使用计算属性computed读取的: 【{{fillName}} 】第一次读取后会做缓存,下次使用不再调用 【{{fillName}}】 </span><br>
        <span>简写  {{fillName1}} </span>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                na: "陈",
                me: "思宇",
            },
            methods: {
                fullName() {
                    console.log("methods被调用");
                    return this.na + '-' + this.me;
                }
            },
            // 计算属性: 要用的属性不存在, 通过 已有的属性计算而来
            computed: {
                fillName: {
                    // 当有人读取时, 自动调用 或者所依赖的数据改变时， 也会被调用
                    get() {
                        console.log("computed被调用");
                        return this.na + '-' + this.me;
                    },
                    // 无set时不能直接更改fillName
                    set(value) {
                        // 做分割逻辑 ... 只能通过修改其依赖的属性去修改
                        // this.na = value;
                        // this.me = value;
                    }
                },
                // 简写
                fillName1() {
                    return this.na + this.me;
                }
 
            }
        })
    </script>

监听属性watch

<div id="app">
        <h1>小明:"你是真{{info}} ", {{count}} </h1>
        <!-- 调用方法实现 -->
        <button @click="sayReal">说真话1</button>
        <!-- 推荐只写简单的一句逻辑, 虽然可以写很多句语句 -->
        <button @click="isReal=!isReal;count++">说真话2</button>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                isReal: false,
                count: 0,
            },
            methods: {
                sayReal() {
                    this.isReal = !this.isReal;
                }
            },
            computed: {
                info() {
                    return this.isReal ? "笨比" : "好看";
                }
            },
            // 监视属性
            watch: {
                // 需要监视的属性(数据), 也可以监测计算属性 eg: info
                isReal: {
                    // 初始化时是否调用, 默认被改变时调用
                    immediate: true,
                    handler(newValue,oldValue){
                        console.log(oldValue+"被改为了"+newValue);
 
                    }
                }
 
            }
        })
 
        // 监视方式二
        vm.$watch('isReal',{
            // 监测后 ... 
            handler(){
                    
            }
        })
    </script>