0
点赞
收藏
分享

微信扫一扫

vue的生命周期有那些

林塬 03-13 11:30 阅读 2
1.v-text

相当于js的innerText

<div v-text="'姓名:'+name"></div>

const name = ref('张三'); //声明

 2.v-html

相当于js的innerHTML

<div v-html="html"></div>

const html = ref('<s>这是一段文字</s>')

 3.v-bind

动态绑定属性,简写是冒号( : )

<img v-bind:src="url">
<!-- v-bind简写(:) -->
<img :src="url">

const url = ref('图片地址')

4.v-on

绑定事件,简写是@

<button v-on:click="changeName">点击更新姓名</button>
<!-- v-on简写(@) -->
<button @click="changeName">点击更新姓名</button>

let changeName = () => {
    name.value = '李四'
}

事件传参(括号在传参是是必须加,不传参可加可不加;但以下场景必须加:获取event、子组件事件传参等)

<button @click="changeName('李四')">点击更新姓名</button>

let changeName = (newName) => {
    name.value = newName
}

事件修饰符

5.v-model

可以用 v-model 指令在表单 <input><textarea>  <select> 元素上创建双向数据绑定

<input type="text" v-model="name">

const name = ref('张三');

6.v-if  v-else-if v-else

7.v-show

 8.v-for

渲染数组列表, v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名

v-for 还支持一个可选的第二个参数,即当前项的索引。

通过Key管理状态

默认模式是高效的,但只适用于列表渲染输出的结果不依赖子组件状态或者临时 DOM 状态 (例如表单输入值) 的情况

<ul>
    <li v-for="(item,index) in list">{{index}}-{{item}}</li>
</ul>

const list = ref([1, 2, 3, 4])

9.v-pre 

元素内具有 v-pre,所有 Vue 模板语法都会被保留并按原样渲染。最常见的用例就是显示原始双大括号标签及内容。

10.v-cloak

当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题

<style>
  [v-cloak]{
    display:none;
  }
</style>

<div v-cloak>
    {{ message }}
</div>

11.v-once

只渲染元素和组件一次,随后的渲染,使用了此指令的元素/组件及其所有的子节点,都会当作静态内容并跳过,这可以用于优化更新性能。

举报

相关推荐

0 条评论