前端学习笔记05：vue初认识（二）

……续

循环渲染： v-for

<!-- 数据是数组 -->
<div v-for="value in array">
</div>
<div v-for="(value, index) in array">
</div>
<!-- value 代指元素， index 代指数组下标 -->

<!-- 数据是对象 -->
<div v-for="value in object">
</div>
<div v-for="(value, key) in object">
</div>
<!-- value 代指对象属性值， key 代指对象属性 -->

<!-- 数据是数字 -->
<div v-for="num in number">
</div>
<!-- num 从 1 开始，直到 number -->

其他指令

• v-model
  如：

new Vue({
  el: `#app`,
  data() {
    return {
      computed: false,
      message: `测试数据`
    }
  }
})

在注册时，是否会注意到当输入完成后，页面会自动检测用户名是否符合规范，在 JS 中，我们可能需要使用 oninput 事件来动态监测，或 Object.defineProprety() 实现双向数据绑定。而在 vue 中，只需要使用 v-model 指令即可完成对 message 属性的修改，具体使用如下：

<div id="app">
  <input type="text" v-model="message" />
  <input type="checkbox" v-model="computed" />
</div>

image.png
image.png

• v-on
  v-on 的指令类似于在标签上绑定事件的用法，如 onclick 使用指令后则写作 v-on:click （简写为 @click），其他事件诸如此类用法。

<button v-on:click="eventName">点击</button>
<button @click="eventName">点击</button>
<button @mouseover="eventName">点击</button>

new Vue({
  ......
  methods:{
    eventName(){}
  }
})

• v-pre
  这个指令类似于 HTML 中的 <pre></pre> 标签，可以让拥有该指令的标签内部不加载 vue 中如 {{ }} 的内容，按照原本内容显示
• v-once
  这个指令表示只会渲染一次，即当 {{ message }} 的内容第一次显示后，即便外部操作改变了 message 的属性值， 但拥有 v-once 这个标签内部并不会随着改变而改变，也可理解为一次性用品。
• v-cloak
  当 Vue 实例发送异步请求或者设置延时器时，页面会显示最原始的，诸如 {{ message }} 的内容，但实际上并非我们刻意而为，直到收到结果后，才会正常显示。
  所以，在某些标签上加上 v-cloak 并搭配 css 属性选择器，如： [v-cloak] { display:none } 将需要被渲染的地方隐藏，直到渲染成功后会自动删除标签上的 v-cloak。

……未完待续