vue基础-(数据双向绑定、常用指令、循环v-for和其他内置指令)

数据双向绑定

在表单元素中，使用v-model 实现数据的双向绑定
双向绑定：简言之就是数据在视图层的更改会立即体现在model层，反之在model层的改变也会立即体现在视图层

设置单/复选框： v-model

修饰符：
number 修饰符，把输入框中的内容转化为数字
trim 修饰符，去掉输入内容左右两边的空格
lazy 修饰符,把input事件改为change事件

常用指令v-if和v-show

v-show 指令:如果他的值是true,则它所绑定的元素显示，如果为false,他所绑定的元素会自动添加一个display:none，元素隐藏，
v-show改变的是css样式，属于元素重绘

v-if 指令，如果他的值为true，则它所绑定的元素从dom数对应的位置渲染，如果为false，它所绑定的元素会在dom数对应的位置被删除，
v-if 改变的是dom结构，属于元素删除和创建

v-else 需要结合 v-if使用，用法同js的if-else
v-else-if 需要结合 v-if使用，用法同js的if- else-if

循环v-for

语法：v-for=“形参 in 数组/对象”
如果需要 下标或者对象的属性名 v-for=“(形参，下标形参/属性名形参) in 数组/对象”，

使用 v-for的标签元素，都需要绑定一个Key属性，属性的值一般都是要循环对象中的唯一值(例如id)
使用key属性的目的：使已经渲染过的列表内容不再重新渲染，提高列表的渲染效率。注意 index 虽然可以设置key值，但是由于index的值会发生变化，这样会导致 列表重新渲染，因此慎用。

v-for 结合 template 标签(组件) 循环数据
template 标签 不会被渲染到页面上，一般用来实现数据绑定的功能

  <template v-for="item in arr" :key="item.name">
  <p>{{item.name}}</p>
  </template>

其他内置指令

v-pre 他所绑定的元素不进行vue的编译，原样输出

 <p v-pre>{{str}}</p>

v-once 他所绑定的元素只渲染一次，忽略之后所有的更新

    <p v-once>{{num}}</p>

v-memo 实现组件内容的缓存，如果他的值不发生改变，那么它绑定的元素内部不会根据数据的改变而重新渲染

<div v-memo="arr">
            <h1>{{str}}</h1>
        </div>
        <button @click="change1">点击改变数据</button>
    </div>