Vue2自学-day01-精简速成版

dy19

已于 2023-11-22 01:18:08 修改

阅读量70

点赞数

分类专栏： vue2 文章标签： vue.js javascript 前端

于 2023-11-14 01:44:47 首次发布

本文链接：https://blog.csdn.net/Dana2018/article/details/134388932

版权

vue2 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

学习内容来源于B站尚硅谷天禹老师，奈何视频过长，且未找到原版PPT。故此精简笔记实际是参考CSDN博主DantinZhang的vue2学习笔记的，纯粹挑重点记，作为vue2自学速成的捷径。

【精选】Vue2（一）：初识Vue、模板语法、数据绑定、el和data的两种写法、MVVM、数据代理、事件_vue2,data写法_DantinZhang的博客-CSDN博客

1.Object.defineProperty方法

一、vue特点+实例el和data

vue：构建用户界面的渐进式js框架，可自底向上逐层的应用。

vue特点：

1.组件化模式，提升代码复用率
2.声明式编码，不用直接操作DOM
3.虚拟DOM+优秀的Diff算法，可复用DOM节点

el： 指定被vue实例服务的容器，通常为css选择器字符串。

el有两种写法：

1.new Vue时

const vm = new Vue({
            el: '#demo',   //第一种写法，新建Vue实例的时候就指定关联的容器
            data: {
                name: 'zzy'
            }
        })

2.创建vue实例后，用 vm.$mount(‘#demo’) 。

const vm = new Vue({
    data: {
        name: 'zzy'
    }
})
vm.$mount('#demo');  //第二种写法

data： 存储数据给el容器用。data数据实时更新。可以是对象、函数。

data有两种写法：

1.对象式

data: {
         name: 'zzy'
      }

2.函数式（组件时必须用函数式）

data: function () {
     return {
               name: 'zzy'
            }
            	}

函数式简写：

data() {      //“功能”消失了
     return {
               name: 'zzy'
            }
            	}

注：由Vue管理的函数，一定不要写箭头函数。否则，this不再是Vue实例，而是window。

vue工作=vue实例+传入配置对象。

二、模板语法

1.插值语法

可解析标签体内容，写在html标签里。可直接读取data所有属性。

写法：双大括号 {{js表达式}} 。

2.指令语法

可解析标签属性、内容、绑定事件等。指令形式多为 v-？？

例：v-bind:href="js表达式"，可简写为 :href="js表达式"（注：有个冒号）。

三、数据绑定

1.单向数据绑定（v-bind）

数据从data流向页面。

<input type="text" v-bind:value="name">
简写：<input type="text" :value="name">

2.双向数据绑定（v-model）

一般应用在表单类元素上，例，input、select等。

v-model:value 可简写为 v-model 。

<input type="text" v-model:value="name">
简写：<input type="text" v-model="name">

四、MVVM

M-Model：对应data中的数据。应用程序的后端数据源，获取和保存数据。
V-View: 模板。用户界面，展示数据并接受用户的输入。
VM-View Model-视图模型: Vue实例对象。链接View和Model的中间层，实现数据绑定和协调View和Model之间的交互。

MVVM核心思想：数据绑定。即View和Model之间的数据同步是自动的，Model的数据变化时，View会自动更新反应变化，反之亦然。可减少手动DOM操作，简化开发过程。

五、数据代理

1.Object.defineProperty方法

直接在对象上定义新属性，或者修改某对象的现有属性，并返回该对象。

例，如下案例，用此方法使number变量和person对象的age产生关联。

//回顾Object.defineproperty方法
let number = 18;
let person = {
    name: 'zzy',
    sex: '男',
    // age: number
}

Object.defineProperty(person, 'age', {
    //     value: 18,
    //     enumerable: true,  //控制属性是否可以被遍历，默认值是false
    //     writable: true,  //控制属性是否可以被修改，默认值是false
    //     configurable: true  //控制属性是否可以被删除，默认值是false

    //当有人读取person的age属性时，get函数（getter）就会被调用，且返回值就是age的值
    get() {
        console.log('有人读取age了');
        return number;
    },

    //当有人修改person的age属性时，set函数（setter）就会被调用，且返回值就是age的值
    set(val) {
        console.log('有人修改age的值,' + val);
        number = val;
    }
})
console.log(person);
console.log(Object.keys(person)); //打印person对象可枚举属性的键名
//但默认情况下，通过Object.defineProperty定义的属性不是可枚举的
//除非明确设置了enumerable: true

2.数据代理

通过一个对象代理另一个对象中属性的操作（读/写）

例，如下，通过obj2来管理obj1里面的x（读/写）

let obj1 = { x: 1 }; //将新对象x，其值为1，赋给变量obj1
let obj2 = { y: 2 };

//通过obj2来读取或修改obj1里的x
Object.defineProperty(obj2, 'x', {
    get() {
        console.log('有人要通过obj2读取obj1里的x');
        return obj1.x
    },
    set(val) {
        console.log('有人要通过obj2修改obj1里的x');
        obj1.x = val;
    }
})
console.log(obj1);
console.log(obj2);

3.Vue中的数据代理

通过vm对象来代理data(或_data)对象中属性（读/写）

好处：操作data的数据更方便

基本原理：

通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的数据。

插值语法每次还得写{{_data.name}}什么的，有了数据代理，直接{{name}}就搞定了。

六、事件

1.事件处理

1、用 v-on:xxx 或 @xxx 绑定事件，xxx是事件名。
2、事件的回调需要配置在methods对象中，最终会在vm上。
3、methods中配置的函数，不要用箭头函数！this才能是vm 或 组件实例对象。
4、@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参。
5、如果不传参,默认第一个形参是事件对象；如果传参,按照参数顺序来接,如果想接事件对象,要传入$event关键字。

 <!-- 准备好一个容器 -->
<div id="root">
    <h2>我的名字叫{{name}}</h2>
    <h2>我今年{{age}}</h2>
    <button v-on:click='hello1'>点我提示信息</button>  //事件绑定写法一
    <button @click='hello1'>点我提示信息</button>       //同上，写法二
    <button @click='hello2(666,$event)'>点我提示信息</button>  //传参写法
</div>
<script>
    const vm = new Vue({    //Vue实例创建
        el: '#root',
        data: {
            name: 'zzy',
            age: 18
        },
        methods: {  //定义两个方法
            //这里是可以传多个参数的,如果不传参,默认第一个是事件对象
            //如果传参,按照参数顺序来接,如果想接事件对象,要传入$event关键字
            hello1(event) {
                console.log(event.target);  //获得当前点击的元素信息
                console.log(this); //此处的this是vm,但是如果写成箭头函数,this就是window
                alert('同学你好');
            },
            hello2(number, e) {  //接受两个参数（数字+事件对象）并打印
                console.log(number, e);  //666, mouseEvent
            }
        }
    })
</script>

2.事件修饰符

prevent：阻止默认事件（常用）
stop：阻止事件冒泡（常用）
once：事件只触发一次（常用）
capture：使用事件的捕获模式
self：只有event.target是当前操作的元素时才触发事件
passive：事件的默认行为立即执行，无需等待事件的回调执行完毕

<!-- 准备好一个容器 -->
<div id="root">
    <h2>我的名字叫{{name}}</h2>

    <!-- 1.prevent阻止默认事件 -->
    <a href="http://www.baidu.com" @click.prevent='hello'>点击提示信息1</a><br>

    <!-- 2.stop阻止事件冒泡 -->
    <div @click="hello">
        <button @click.stop="hello">点击提示信息2</button>
    </div>

    <!-- 3.once件只触发一次,触发完了就失效 -->
    <button @click.once="hello">点击提示信息3</button>

    <!-- 4.capture捕获阶段处理事件(默认的是冒泡阶段处理事件) 这个意思就是说外边的div在捕获阶段就处理事件了-->
    <div @click.capture="showInfo(1)">111111
        <div @click="showInfo(2)">22222</div>
    </div>

    <!-- 5.self只有event.target是当前操作的元素时才触发事件,也就是冒泡不管用了(类似阻止冒泡?)-->
    <div @click.self="hello">111111
        <div @click="hello">22222</div>
    </div>

    <!-- 6.passive事件的默认行为立即执行，无需等待事件的回调执行完毕-->
    <!-- 加上这个的话,不用等待creazyShow函数执行完毕,滚动条就可以流畅滚动-->
    <ul @wheel.passive="creazyShow">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
<script>
    const vm = new Vue({
        el: '#root',
        data: {
            name: 'zzy',
            age: 18
        },
        methods: {
            hello(e) {
                // e.preventDefault(); //阻止默认事件的js写法
                // e.stopPropagation();  //阻止事件冒泡的js写法
                alert('DJ drop the beat');
            },
            showInfo(val) {
                console.log(val);
            },
            creazyShow() {
                for (let i = 0; i < 100000; i++) {
                    console.log('我输出完了你再滚动');
                }
            }
        }
    })
</script>

3.键盘事件

<!-- 准备好一个容器 -->
<div id="root">
    <h2>我的名字叫{{name}}</h2>
    <input type="text" placeholder="按下回车输出" @keyup.enter="showInfo">
    <input type="text" placeholder="按下回车输出" @keyup.13="showInfo">
    <input type="text" placeholder="按下回车输出" @keyup.huiche="showInfo">
    <input type="text" placeholder="按下删除或退格输出" @keyup.delete="showInfo">
    <input type="text" placeholder="按下切换大小写输出" @keyup.caps-lock="showInfo">
</div>

<script>
    Vue.config.keyCodes.huiche = 13; //定义一个别名为huiche的enter按键

    const vm = new Vue({
        el: '#root',
        data: {
            name: 'zzy',
            age: 18
        },
        methods: {
            showInfo(e) {
                // if (e.keyCode !== 13) return  //原生js实现按下回车输出值
                console.log(e.target.value);
            }
        }
    })
</script>

按键：代码
回车： enter
删除： delete（捕获删除和退格键）
退出： esc
空格： space
换行： tab（特殊，必须配合keydown使用）
上： up
下： down
左： left
右： right

1、Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
例，我想按下切换大小写的按键就触发showInfo：

<input type="text" placeholder="按下切换大小写输出" @keyup.caps-lock="showInfo">

2、系统修饰键（特殊）：ctrl、alt、shift、meta

配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
配合keydown使用：正常触发事件。

3、也可以使用keyCode去指定具体的按键（不推荐）

<input type="text" placeholder="按下回车输出" @keyup.13="showInfo">

4、Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

Vue.config.keyCodes.huiche = 13; //定义一个别名为huiche的enter按键

3.补充

1、修饰符可连续写

<button @click.stop.prevent="showInfo">你好</button>

2、如果让两个键同时按下才触发，键名也可以连续绑定
例，按下ctrl+y触发showInfo方法

<input type="text" @keyup.ctrl.y="showInfo">

dy19

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
Vue2自学-day01-精简速成版

学习内容来源于B站尚硅谷天禹老师，奈何视频过长，且未找到原版PPT。故此精简笔记实际是参考CSDN博主DantinZhang的vue2学习笔记的，纯粹挑重点记，作为vue2自学速成的捷径。vue：构建用户界面的渐进式js框架，可自底向上逐层的应用。1.组件化模式，提升代码复用率2.声明式编码，不用直接操作DOM3.虚拟DOM+优秀的Diff算法，可复用DOM节点指定被vue实例服务的容器，通常为css选择器字符串。el有两种写法：1.new Vue时。
复制链接

扫一扫