每日学到 52 - Vue

iiiiiiiiiiice

已于 2022-10-19 14:46:19 修改

阅读量179

点赞数 1

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

于 2022-10-17 15:41:28 首次发布

本文链接：https://blog.csdn.net/m0_52588421/article/details/127319026

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

创建Vue实例

引入vue.js

创建一个容器让Vue管理
<div id="root">{{name}}</div>

   创建Vue实例
            new Vue({
        el:'#root',
        data:{
            name:'张三',
        }
    });

数据绑定

   单项数据绑定
       <input type="text" v-bind:value="name">
           真实dom中value发生变化，Vue中data的name不变，但是Vue中data的name变化，真实dom中的value改变

   双向数据绑定
       <input type="text" v-model:value="name">
           v-model 只能应用表单类元素
           v-model:value 可以简写为 v-model

el的两种写法

写在Vue中
el:'#root',

写在Vue外部
v-$mount('#root');

data的两种写法

   对象式
       data:{
    name:'张三',
}

   函数式
       data:function(){
    return{
        name:'李四',
    }
}

MVVM模型

           V
               View
                   视图层，向用户展示信息的
           VM
               ViewModel
                   在Vue中指Vue实例
                       是一个同步View 和 Model的对象
           M
               Model
                   数据层，可以是我们固定死的数据，也可以是来自服务器请求来的数据。

数据代理

Vue中的数据代理是通过vm对象来代理data对象中属性的操作，借用的是getter和setter方法，能够更加方便的操作data中的数据

事件处理

键盘事件

       Vue中常用的按键别名
           回车 => enter
           删除 => delete (捕获“删除”和“退格”键)
           退出 => esc
           空格 => space
           换行 => tab (特殊，必须配合keydown去使用)
           上 => up
           下 => down
           左 => left
           右 => right

Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

       系统修饰键（用法特殊）：ctrl、alt、shift、meta
           配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
           配合keydown使用：正常触发事件。

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

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