# 【vue.js】vue起步练习

最新推荐文章于 2022-05-24 10:10:41 发布

原创最新推荐文章于 2022-05-24 10:10:41 发布 · 410 阅读

1 ·

CC 4.0 BY-SA版权

vue.js 专栏收录该内容

1 篇文章

订阅专栏

本文通过七个实例演示了Vue.js的基本用法，包括数据绑定、条件渲染、列表渲染、事件处理等核心功能。读者可通过这些示例了解如何使用Vue.js进行前端开发。

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hhhh</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app_1">
<h3>example 1</h3>
<p>{{message}}</p>
</div>


<div id="app_2">
<h3>example 2</h3>
<span v-bind:title="message">鼠标悬停查看动态绑定信息</span>
</div>


<div id="app_3">
<h3>example 3</h3>
<p v-if="message">条件语句(控制台输入app_3.message=false,则message内容消失)</p>
</div>


<div id="app_4">
<h3>example 4</h3>
<p>在控制台输入app_4.select.push({ text: 'coffee' }),添加选项</p>
<ol>
<li v-for="num in select">{{num.text}}</li>
</ol>
</div>


<div id="app_5">
<h3>example 5</h3>
<p>{{message}}</p>
<button v-on:click="reverseMessage">逆转</button>
</div>


<div id="app_6">
<h3>example 6</h3>
<p>{{message}}</p>
<input v-model="message">
</div>


<div id="app_7">
<h3>example 7</h3>


</div>


<script type="text/javascript">
var app_1 = new Vue({
	el:'#app_1',
    data:{
	message:'hello vue.js'
}
})
var app_2 = new Vue({
	el: '#app_2',
	data:{
		message:'页面加载时间:'+ new Date().toLocaleString()
	}
})


var app_3 = new Vue({
	el:'#app_3',
	data:{
		message:true
	}
})


var app_4= new Vue({
	el:'#app_4',
	data:{
		select:[
         {text:'apple'},
         {text:'banana'},
         {text:'orange'}
		]
	}
})


var app_5 = new Vue({
	el:'#app_5',
	data:{
		message:'hello'
	},
methods:{
	reverseMessage:function(){
		this.message=this.message.split('').reverse('').join('')
	}
}
})


var app_6 = new Vue({
	el:'#app_6',
    data:{
    	message:'hello vue.js'
    }
})


</script>
</body>
</html>