Vue渲染、循环、事件绑定

最新推荐文章于 2025-05-27 21:39:09 发布

q_NULI

最新推荐文章于 2025-05-27 21:39:09 发布

阅读量462

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_44699164/article/details/107515683

版权

vue 专栏收录该内容

9 篇文章

订阅专栏

这篇博客介绍了Vue的核心特性，包括声明式渲染，使用模板语法和绑定元素来操作DOM。还讲解了条件渲染v-if和列表渲染v-for。此外，详细阐述了事件绑定，特别是v-model实现的双向数据绑定。最后，概述了Vue组件的生命周期，重点提及了与DOM渲染相关的beforeCreate、created、beforeMount和mounted四个阶段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.声明式渲染
采用模板语法来将数据渲染进DOM系统

<div>{{message}}</div>

data(){
    return{
      message: 'Hello Vue!'
    }
},

第二种可以通过绑定元素

<span v-bind:title="message">
    提示信息
</span>

data(){
    return{
    	message: '页面加载于 ' + new Date().toLocaleString()
    }
},

2.条件与循环
通过v-if渲染数据

<div v-if="seen">{{message}}</div>

data(){
    return{
        message: 'Hello Vue!',
	    seen:true
   	}
},

通过v-for来进行渲染列表

<ul>
	<li v-for="item in todos" :key="item">
        {{item.id}}--{{ item.text }}
	</li>
</ul>

data(){
	return{
		todos: [
	        {id:1, text: '学习 JavaScript' },
	        {id:2, text: '学习 Vue' },
	        {id:3, text: '整个牛项目' }
	    ],
	}
}

3.事件绑定

<div>
  <div>{{ message }}</div>
  <button v-on:click="reverseMessage">反转消息</button>
  //<button @click="reverseMessage">反转消息</button> -->
</div>

data(){
	return{
		message: 'Hello Vue!',
	},
	methods:{
	    reverseMessage: function () {
	      this.message = this.message.split('').reverse().join('')
	    }
	  }
}

Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

<div>
	<p>{{model}}</p>
    <input v-model="model">
</div>

data(){
    return{
      model:"",
    }
  },

4.Vue生命周期
1、beforeCreate（创建前）
2、created（创建后）
3、beforeMount（载入前）
4、mounted（载入后）
5、beforeUpdate（更新前）
6、updated（更新后）
7、beforeDestroy（销毁前）
8、destroyed（销毁后）

vue第一次页面加载会触发的钩子函数
beforeCreate、created、beforeMount、mounted

DOM渲染在 mounted周期中就完成了

在这里插入图片描述