vue学习（一）

本文章时b站课程尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

的笔记

vue-devtools的下载安装

https://blog.csdn.net/weixin_39150852/article/details/88181482

初识vue

1.要使VUE工作必须创建一个vue实例，并传入一个配置对象

2.容器里依旧符合html规范，但也混入了一些特殊的Vue语法

3.容器里的代码被称为【vue模板】

4.容器与vue实例是一一对应的

5.{{xxx}}中xxx要写js表达式，且xxx可以读取data中所有数据

6.data中数据发送改变这页面中所有用到该属性的地方都会改变

<div id="root">
    {{name}}
<div>

<!--导入vue.js-->
<script type="text/javascript" src="../js/vue.js"></script>

<script type="text/javascript">
    Vue.config.productionTip=false   //关闭vue生产提示

    //创建vue实例
    new vue({
        el:"#root",      //el指定当前vue实例为那个容器服务
        data:{           //data为el指向的容器提供数据
            name="第一个Vue"
        }
    })
</script>

模板语法

1.插值语法

        功能：用于解析标签体内容

        写法：{{xxx}},xxx为js表达式

2.指令语法

        功能：用于解析标签（包括：标签属性，标签体内容，绑定事件....）

        写法：v-bind:href="xxx" 或简写成 :href="xxx" xxx同样为js表达式

        备注：vue的指令有很多，且都为v-xxx形式。这里是以v-bind举例

数据绑定

1.单向绑定（v-bind:）:数据只能就data流向页面

2.双向绑定（v-model:）:数据不仅可以从data流向页面，还可以从页面流向data

        备注：1.双向绑定都用于表单元素上（input,select）

                   2.v-model:value简写为v-model

<div id="root">

    <!--一般形式-->
    单向数据绑定<input type="text" v-bind:value="name"/>
    双向数据绑定<input type="text" v-model:value="name"/>

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

el与data的两种写法

        el: 1. new vue 时配置el 

             2. 先创建vue实例，随后通过vm.$('XXX')指定el的值

        data: 1.对象式

                 2.函数式

        备注：1.使用vue组件时，data必须为函数式

                   2.由vue管理的函数不能为箭头函数，一旦为箭头函数，this就不再是vue实例了

Object.defineProperty

这是数据代理的前置知识，方便理解数据代理

<script type="text/javascript">
    let number=18
    let person={
        name='张三'，
        gender='男'
    }

    object.defineProperty(person,‘age’,{
        value:18,
        enumerable:ture,   //能够被枚举，默认为flase
        writable:ture,     //能够被修改，默认为flase
        configurable:ture, //能够被删除，默认为flase

        //读取person中age属性时，get函数被调用，返回值为age值
        get(){
            console.log('有人读取了age属性')
            return number
        }，

        //修改person中age属性时，set函数被调用，会受到具体修改值
        set(value){
             console.log('有人修改了age属性，修改后的属性为：'，value)
             number=value
        }

    })
</script>

数据代理

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）效果一致，但后者可以传参;
 

点击事件：click

事件修饰符

vue中的事件修饰符:
1.prevent:阻止默认事件（常用）;

2.stop:阻止事件冒泡（常用);

3.once:事件只触发一次（常用);

4.capture:使用事件的捕获模式;

5.self:只有event.target是当前操作的元素是才触发事件;

6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕;
 

<div id="root">
    <button @click.once="show1">点击提示信息</button>
    <button @click.stop="show2($event,66)">点击提示信息2</button>
</div>

<script>
new vue=({
    el:'#root',
    data:{
        name:"张三"
    }，
    mothods:{
        show1(event){
            alert('name是',this.name)
        },
        show2(event,age){
            alert('name是',this.name,'age是'，age)
        }
    }
})
</script>

页面滚动：wheel,scroll

修饰符可以连续写

例：@click.stop.paroetent

键盘事件(keyup,keydown)

1.Vue中常用的按健别名:
                回车=> enter

                删除=> delete(插获"删除”和“退格”健)

                退出=>esc

                空格=>space

                换行=> tab

                上=> up

                下 => down

                左=>left

                石=>right
2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case
3,系统修饰键（用法特殊）: ctr1、 alt、 shift、 meta
        (1).配合keyup使用:按下修饰键的同时,再按下其他键，随后释放其他键,事件才被触发.

        (2).配合keydown使用:正常触发事件。
4.也可以使用keyCode去指定具体的按键（不推荐)
5.Vue.config.keyCodes.自定义键名–健码，可以去定制按键别名

6.第三类的可继续加符号

例：@keyup.ctrl.y       只有摁下ctrl和y后才触发

实例一：姓名