Vue学习记录1，Vue是什么？搭建开发者工具，关闭生产提示， Vue实例配置，模板语法，数据绑定，el的写法，data的写法，MVVM模型，数据代理，事件处理，Vue中的事件修饰符，键盘事件

小婵婵不怕鬼

已于 2023-03-07 13:01:52 修改

阅读量955

点赞数 2

分类专栏： Vue 文章标签： vue.js 学习 javascript

于 2022-07-27 23:13:23 首次发布

本文链接：https://blog.csdn.net/qq_49080239/article/details/126015679

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

Vue是什么？

Vue是一套用于构建用户界面的渐进式JavaScript框架。Vue可以自底向上逐层的应用，简单应用：只需要一个轻量小巧的核心库。复杂应用：可以引入各式各样的Vue插件。

Vue的特点：

1、采用组件化模式，提高代码复用率、且让代码更好维护。
2、声名式编码，让编码人员无需直接操作DOM，提高开发效率。
3、使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。

如何删除这两个提示？

在这里插入图片描述
1、下载开发者工具
（1）下载这个文件vue_dev_tools.crx（以下链接）

链接: https://pan.baidu.com/s/10R7tpK0rlx0rdKlxUX1-2w 提取码: rcaf 复制这段内容后打开百度网盘手机App，操作更方便哦

（2）拖入想要使用的浏览器页面中
（3）点击右上角这个图标再打开开发者模式在这里插入图片描述
（4）添加扩展程序即可
2、关闭生产小提示
在script标签里添加即可

    <script>
        Vue.config.productionTip = false
    </script>

Vue实例配置:

el: el用于指定当前Vue实例为哪个容器服务，值通常为CSS选择器字符串
data: 用于存储数据，数据供el所指定的容器去使用

实例：

<!--准备好一个容器-->
<div id="root">
    <h1>Hello,{{name}},今年{{age}}岁了</h1>
</div>
<script>
    //创建Vue实例
    new Vue({
        el:'#root',  //el用于指定当前Vue实例为哪个容器服务，值通常为CSS选择器字符串
        data:{   //用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
            name:'trx',
            age:23
        }
    })
</script>

总结：
1、想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象。
2、root容器里代码依然符合HTML规范，只不过混入了一些特殊的Vue语法。
3、root容器里的代码被称为【Vue模板】。
4、Vue容器与与Vue实例只能一一对应。
5、真实开发中只有Vue实例，并且会配合着组件一起使用。
6、{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性。
7、一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新。

模板语法

插值语法
功能：用于解析标签体内容。
写法：{{xxx}},xxx是js表达式，且可以直接读取到data中的所有属性。
指令语法
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件等等）。
举例：v-bind:href="xxx"或简写为:href="xxx",xxx同样要写js表达式，且可以直接读取到data中的所有属性。
备注：Vue中有很多指令，且形式都为：v-????，此时仅用v-bind举例。

<div id="root">
    <h1>Hello,{{name}},今年{{age}}岁了</h1>
<!--    <a v-bind:href="url">点我去学习</a>-->
    <a :href="school.url.toUpperCase()">点我去{{school.name}}学习</a>
</div>
<script>
    new Vue({
        el:'#root', 
        data:{ 
            name:'trx',
            age:23,
            school:{
                url:'http://www.atguigu.com',
                name:'cgc'
            }
        }
    })
</script>

数据绑定

单向绑定（v-bind）

数据只能从data流向页面。

双向绑定（v-model）

数据不仅能从data流向页面，还可以从页面流向data。

双向绑定一般都应用在表单类元素上（如：input、select等）
v-model:value 可以简写为v-model，因此v-model默认收集的就是value值

    单向数据绑定：<input type="text" v-bind:value="name">
    双向数据绑定：<input type="text" v-model:value="name">
    双向数据绑定简写：<input type="text" v-model="name">

el的写法

new Vue时配置el属性。el:'#root'
先创建Vue实例，随后再通过vm.$mount('#root')指定el属性。

    const vm = new Vue({
        data:{
            name:trx,
            age:222
        }
    })
    vm.$mount('#root')

data的写法

对象式：

        data:{
            name:trx,
            age:222
        }

函数式：

       data() {
            return{
                name:'trx'
            }
        }

注意：
1、目前哪种写法都可以，当学到组件时，data必须使用函数式，否则会报错。
2、由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

MVVM模型

M：模型（Model）：对应data中的数据
V：视图（View）:模板
VM：视图模型（View Model）:Vue实例对象
总结：
1、data中所有的属性，最后都出现在了vm身上。
2、vm身上所有的数据及Vue原型上所有的属性，在Vue模板上都可以直接使用。
在这里插入图片描述

Object.defineProperty

let number = 18
let person = {
    name:'trx',
    sex:'男',
}
Object.defineProperty(person,'age',{
    // value:18,
    // enumerable:true,//控制属性是否可以枚举，默认值为false
    // writable:true,//控制是否可以被修改，默认值为flase
    // configurable:true,//控制属性是否可以被删除，默认值为false
    //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
    get(){
        return number
    },
    //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
    set(value){
        number = value
    }
})

数据代理

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

//数据代理
let obj = {x:100}
let obj2 = {y:200}
Object.defineProperty(obj2,'x',{
    get() {
        return obj.x
    },
    set(value) {
        obj.x = value
    }
})

1、Vue中的数据代理：
通过vm对象来代理data对象中属性的操作（读/写）
2、Vue中数据代理的好处：
更加方便的操作data中的数据
3、基本原理：
通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的数据。
在这里插入图片描述

事件处理

1、使用v-on:xxx或@xxx绑定事件，其中xxx是事件名。
2、事件的回调需要配置在methods对象中，最终会在vm上。
3、methods中配置的函数，不要用箭头函数！否则this就不是vm了。
4、methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象。
5、@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参。

<body>
<div id="root">
    <h2>你好{{name}}</h2>
    <button v-on:click="showInfo">点我</button>
    <button @click="showInfo2($event,66)">点我</button>
</div>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el:'#root',
        data:{
            name:'trx',
            age:24
        },
        methods:{
            showInfo(event){
                console.log(event.target.innerText)
                console.log(this)//此处的this是vm
                alert('你好')
            },
            showInfo2(event,number){
                console.log(event,number)
            }
        }
    })
</script>
</body>

Vue中的事件修饰符

<!--    阻止默认事件-->
    <a href="http://baidu.com" @click.prevent="showInfo">点我跳转</a>
<!--    阻止事件冒泡-->
    <div @click="showInfo">
        <button @click.stop="showInfo">你好</button>
    </div>
<!--    事件只触发一次-->
    <button @click.once="showInfo">你好</button>
<!--    使用事件的捕获模式-->
    <div class="div1" @click.capture="showMsg(1)">
        div1
        <div class="div2" @click="showMsg(2)">div2</div>
    </div>
<!--    只有event.target是当前操作的元素时才触发事件-->
    <div class="demo1" @click.self="showInfo">
        <button @click="showInfo">点我提示</button>
    </div>
<!--    事件的默认行为立即执行，无需等待事件回调执行结束-->
    <ul @wheel.passive="demo" class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

键盘事件

1、Vue中常用的按键别名：

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

2、Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
3、系统修饰键（用法特殊）：ctrl、alt、shift、meta

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

4、也可以使用keyCode去指定具体的按键（不推荐）
5、Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">

事件总结

1、修饰符可以连续写

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

2、如果先让两个键同时按下才触发，键名也可以连续绑定

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