vue语法总结

文本渲染

1. {{}} --------- 将元素当成纯文本输出

2 v-html --------- 降元素当成 HTML 标签解析后输出

3.v-text --------- 降元素当成纯文本输出

{{data中的变量名}}
<view v-html="xxx"></view>
<view v-text="xxx"></view>

条件渲染

v-if,v-show,v-else,v-else-if

 v-if 和 v-show 的区别

实现原理不同：

•  v-if 指令会动态地创建或移除DOM 元素，从而控制元素在页面上的显示与隐藏；

• v-show 指令会动态为元素添加或移除 style="display: none;" 样式，从而控制元素的显示与隐藏；

性能消耗不同：
v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此：

•  如果需要非常频繁地切换，则使用 v-show 较好

•  如果在运行时条件很少改变，则使用 v-if 较好

遍历

1.循环遍历:
    vue的循环遍历用v-for，语法类似于js中的for循环
    当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。
    v-for使用格式：
   格式为：v-for = "item in items"  (遍历items中的数据)
2.v-for遍历数组:
    用v-for指令基于一个数组来渲染一个列表。
    v-for 指令使用item in items形式的语法，
    其中items是源数据数组， 而item则是被迭代的数组元素。

3.v-for遍历对象：
    遍历对象属性 用value值。
    遍历对象属性和属性值 用value值和key。
    遍历对象属性和属性值和索引 用value值、key和index。

4.v-for使用中添加key：
    优点：key提升虚拟dom 的diff算法。
              提高列表排序和过滤时的渲染速度。
              要求兄弟间节点保持唯一性。

属性绑定

• v-bind:属性="值" v-bind:checked="true"

• :属性="值" :checked="true"

<switch :checked="isLog" @change="isLog=$event.detail.value"/>

表单双向绑定

• v-model="msg" 是 :value="msg" @change="msg=$event"的简写

• (v3) v-mode="msg" 是 ;modelValue="msg" @change="msg=$event"的简写

<input v-model="msg"/>

• .lazy 等待change事件后触发(默认是input事件)

• .trim 移除前后空格

• .number 转化为数值

单选绑定

<view>单选:{{sel}}</view>
<radio-group name="" @change="sel=$event.detail.value" >
     <view v-for="item in list" :key="item">
        <label class="radio">
            <radio :value="item" :checked="item==sel" /><text>{{item}}</text>
        </label>
     </view>
</radio-group>

多选

<view>多选框:{{csel}}</view>
<checkbox-group name="" @change="csel=$event.detail.value">
    <block v-for="item in list" :key="item">
        <label>
            <checkbox :value="item" :checked="csel.includes(item)" /><text>{{item}}</text>
        </label>
    </block>
</checkbox-group>

事件响应

事件

v-on:click="" @click=""

1. 行内事件

<button @click="msg='你是我的神'"></button>

1. 事件响应methods中的函数

<button @click="doit"></button> <button @click="doit($event)"></button>

1. 事件传参

<button @click="biaobai('盖聂')"></button>

修饰符

.stop 阻止事件冒泡 .prevent 阻止默认事件 .once 只响应一次

按键修饰符

.enter .esc .delete .ctrl .up.down.right.left .xxxx