vue指令

指令

模板语法{{}} v-text

作用：将vue实例的data绑定到DOM中。{{}} 是文本插值，不会判断解析内容，只会做文本的直接插入。

表达式语法：{{ js 环境}}

只能写一条语句，不能写多条。不推荐写逻辑，可以写三目运算。

和v-text作用相同。

v-html

作用：解析数据如果数据里面嵌套标签会识别标签。

语法：

<div v-html='js变量'></div>

<template>
<!--拼接字符串  -->
    <p v-html="'v-html指令' + msg"></p>
</template>
<script>
     export default {
         data(){
             return{
                 mag:'<strong>我是文本msg</strong>'
             }
         }
     }
</script>

v-if

作用：控制元素是否显示

语法： <div v-if='js变量-表达式'></div>

说明： v-if='表达式是boolean值' true 创建元素 false 销毁元素控制显示隐藏的原理：通过元素的创建和销毁实现的。

v-else

作用：和v-if/v-else-if 配合使用取反操作

语法： <div v-else></div> 说明：取反操作。

v-show

作用：控制元素是否显示。

语法： <div v-if='js变量-表达式'></div>

说明： v-show='表达式是boolean值' true 显示元素 false 隐藏元素控制显示隐藏的原理：通过元素css样式display:none/block显示隐藏的。

v-show 与 v-if区别

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

总结：v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if。

v-for

作用：遍历数组或者是对象展示每一项内容

语法：

数组： <div v-for='(value,index) in 数组名称' v-bind:key='item.id'></div>

对象： <div v-for='(value, name, index) in 对象名称' v-bind:key='item.id'></div>

说明： value 当前数据的每一项的值 index 遍历数据的下标从0开始 name 对象的key键名

补充：v-for可以在<template>中使用来渲染一段包含多个元素的内容。

<ul>
    <template v-for='item in items'>
        <li>{{ item.msg }}</li>
        <li class='divder' role='presentation'></li>
    </template>
</ul>

v-for里面key的作用

key作用高效的更新虚拟DOM。
Diff算法虚拟DOM执行高效依赖底层原理是Diff算法

介绍：

1. 虚拟DOM修改的时候，diff算法进行同级比较

2. 如果节点类型不同，直接干掉前面的节点，再创建并插入新的节点，不会再比较这个节点以后的子节点了。

3. 如果节点类型相同，则会重新设置该节点的属性，从而实现节点的更新

v-bind

作用：动态绑定属性

语法：<div v-bind:class='box'></div>

说明： v-bind:属性='' 简写 :属性=''

v-on

指令 v-on:事件名='函数名' 语法： <div v-on:事件名='函数名'></div> 简写： <div @事件名='函数名'></div>

script里面： methods:{ 函数名(){ ... } }

事件三个知识点

事件对象 event
事件 this this指向当前组件实例对象
事件传递参数

总结：
1. 事件的this指向当前的组件实例对象
2. 传递参数给函数名加() <div @事件名='函数名(1,2,3)'></div>
3. 事件对象
a:函数不带参数不加() 默认定义的函数同js的事件对象event
b:函数不带参数加() 需要手动传递$event
c:函数带参数加() 需要手动传递$event ，最后一个参数是$event

修饰符

// 事件修饰符  stop  prevent
<div @click='parent'>父元素
    <!-- 阻止事件冒泡的修饰符 stop  就是只触发子元素事件，不会向上触发父元素的事件-->
    <button @click.stop='child1'>子元素 1</button>
    <!-- 阻止默认事件的修饰符 prevent / a 和 form-submit 都有默认事件 -->
    <a @click.prevent='child2'>子元素 2</a>
    <!-- 事件修饰符可以串联，没有顺序 -->
    <a @click.stop.prevent='child3'>子元素 3</a>
</div>

按键修饰符
.enter 按下了enter键
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
系统修饰键：
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
- `.ctrl`
- `.alt`
- `.shift`
- `.meta`

绑定class

作用：动态绑定class的类名样式语法：

1.动态绑定class类名

2.对象语法

<div v-bind:class='{样式类名:表达式,样式类名:表达式,...}' class='字符串类名'></div>

v-model

基本类型

作用：获取设置表单数据。

语法：<input type='xx' v-model='变量'>

<template>
    <input type='text' v-model='inp' name='' id=''>
    <p> input数据--{{inp}} </p>

<!--单选按钮-->
性别：
    <input type='radio' v-model='sexValue' value='1' name='sex' id=''>男
    <input type='radio' v-model='sexValue' value='2' name='sex' id=''>女
    <p> 性别值--{{sexValue}} </p>

<!-- 多选按钮-->
爱好：
    <input type='checkbox' v-model='selectValue' value='1' name='' id=''>吃
    <input type='checkbox' v-model='selectValue' value='2' name='' id=''>喝
    <input type='checkbox' v-model='selectValue' value='3' name='' id=''>玩
    <p> 爱好：--{{selectValue}} </p>

<!--下拉框-->
位置：
    <select name='' id='' v-model='location'>
        <option value='beijing'>北京</option>
        <option value='shanghai'>上海</option>
        <option value='shenzhen'>深圳</option>
    </select>
<!--文本域-->
    <textarea name='' id='' v-model='text' cols='30' rows='10'></textarea>
</template>

<script>
    export default {
        data(){
            return{
                inp:'',
                sexValue:'',
                selectValue:[],
                loaction:'',
                tesxt:''
            }
        }
    }

</script>

修饰符

.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步,你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步：（就是失去inpu焦点）

.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符

.trim 如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符

v-model实现原理

<template>
<!--
<input type='text' v-model='val'>
v-model做了两件事
   1. 获取渲染变量默认值，呈现在input框。
   2. 获取用户输入的值赋给变量。
真实写法：vue技术
-->
<input type='text' :value='val' @input='changeVal'>
<!--上面的写法等价于下面一行代码-->
<input type='text' :value='val' @input='val=$event.target.value'>
</template>
<script>
export default{
    data(){
        return{
            val:'默认值',
        }
    },
    methodes:{
        changeVal(event){
            this.val = event.target.value
        }
    }
}
</script>

posted @ 2023-01-11 10:56 gxtbky 阅读(28) 评论(0) 收藏举报

刷新页面返回顶部

XueTingG