vue基础 指令

目录

01 vuejs中属性的基本使用

02 v-show指令的使用

03 v-if 指令的使用

04 v-for指令的使用

05 v-model 指令

06 template模板标签

07 v-on事件的绑定指令

08 事件中的event对象

---

01 vuejs中属性的基本使用

        {{ }} 叫做mustache模板语法  双花括号  小胡子语法

        双花括号里可以写js表达式  所谓的js表达式就是取个值 只要有个值就行(变量  字面量值 函数调用 运算符表达式 三目 都可以)

        el:'#app',

        挂载目标 被挂载的标签以及内部可以使用vue语法

        可以使写成el:'div' 但是不能写body 和html 不允许直接挂载到body或者html标签上面

        data:{ }

        定义所有在页面上使用的变量

        data里面可以定义任意类型的变量 然后在页面中使用

02 v-show指令的使用

        vue指令: 写在标签属性位置  用来弥补属性功能不足的问题

        v-show指令 用来控制元素的显示与隐藏

        使用步骤: 

                标签 v-show ='js表达式'

                        表达式返回的值解析以后 如果是true 则元素显示 否则元素隐藏

        本质: 控制的是元素的display属性

        

03 v-if 指令的使用

        v-if 指令:  控制元素渲染与否

        使用步骤:

                v-if='js表达式'

                        如果表达式结果为true则元素显示 否则元素销毁

                和 v-if 搭配使用的指令v-else

                v-if 为true的时候显示v-if的元素 销毁v-else的元素

                v-if为false的时候销毁v-if的元素 显示v-else的元素

                还有v-else-if指令:

                        v-if='表达式1'

                        v-else-if='表达式2'

                        v-else-if='表达式3'

                        ...

                        v-else

                注意点:

                        v-if 系列指令 中间不能有任何其他元素/标签 否则会报错

        面试题:

                v-show和v-if的区别:

                        从表面上看都是控制元素的显示隐藏的

                        那么区别是:

                                v-show只是控制元素的display属性

                                所以不管条件式true还是false都会渲染这个元素

                                但是v-if 不一样 

                                如果条件式true才渲染这个元素  如果是false则元素不渲染

                        使用场景:

                                如果页面加载时不需要这个元素 然后后期通过条件改变渲染 

                                则使用v-if(具有懒加载的性能  性能高一点)

                                如果像弹窗一样 短时间内反复显示隐藏 则推荐使用v-show, 

                                因为这种场景使用v-if反复渲染销毁 非常消耗性能

04 v-for指令的使用

        v-for模板渲染:

                把同一段html代码中的数据按照数组或者对象的循环的方式反复渲染并且同步渲染数据

        写法:

                渲染数组:

                        <标签 v-for='变量 in data里面的数组'>{{变量}}</标签>

                        <标签 v-for='( 元素,索引) in data里面的数组'>{{元素}}{{索引}}</标签>

                渲染对象:

                        <标签 v-for =' 值 in data里面的对象 '>{{值}}</标签>

                        <标签 v-for =' (值,键)  in data里面的对象 '>{{值}},{{键}}</标签>

                        <标签 v-for =' (值,键,索引)  in data里面的对象 '>{{值}},{{键}},{{索引}}</标签>

05 v-model 指令

        专门用在表单控件上面 代替value属性 让value能够绑定一个data变量

        获取这个变量的值就是控件的值

        修改这个变量的值就是修改控件的value属性的值

        输入框和多行文本框 一旦使用v-model就不用再单独定义value属性

        单选和多选的value需要单独定义

                v-model绑定的变量 自动关联被选中的单选框和多选框的value值

06 template模板标签

        作用: 专门用来渲染html代码  而且页面渲染成功后这个标签本身不存在

        template 可以结合v-if 和v-for指令来使用 但是不能结合v-show使用

07 v-on事件的绑定指令

         v-on事件绑定:

        <标签 v-on:事件名称='驱动函数(传实参)'></标签>

                如果不传参一般括号不写直接写函数名

        使用步骤:

                1.在需要绑定事件的标签上面定义v-on

                2.v-on:不带on的事件名称='事件驱动函数名'

                3.在vue构造函数的对象里面和data同级的位置定义methods

                4.在methods里面定义驱动函数

        简写:

                @事件名称='事件驱动函数'

       在事件驱动函数中 如果想要获取data里面的变量进行操作那么直接this.data里面的变量名即可

       在vue中驱动函数内部的this指向的是vue对象 不是dom对象

08 事件中的event对象

        事件中的event对象获取方式有两种情况:

                1.在标签上面绑定事件时 没有形参 @事件名称='驱动函数'

                        这个时候驱动函数的形参上面直接定义单个形参接收event对象

                2.如果标签上面绑定事件时有传自定义参数 这个时候我们还想要使用event对象,那么

                    第一个实参必须是$event   后面是自己传递的参数