Vue简单实例操作

最新推荐文章于 2023-08-02 17:18:45 发布

Wang某人

最新推荐文章于 2023-08-02 17:18:45 发布

阅读量194

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/WangShuoQing/article/details/102567669

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1)介绍

兼容性: IE8+
特点:
1)声明式渲染
只需要将Vue实例中的变量声明在模块中即可
2)使用指令完成条件渲染和列表渲染
3)双向数据绑定
4)组件化方式进行编程

简单实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>第一次的Vue</title>
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<!-- 根标签 -->
<div id="app">
<!-- 模板 -->
	<p>{{ message }}</p>
	<p>{{ message }}</p>
	<p>{{ message }}</p>
	<!-- 列表渲染 -->
	<ul>
		<li v-for="item in list">{{item}}</li>
	</ul>
	<!-- 条件渲染 -->
	{{flag}}
	<div v-if="flag > 0.5">
		show...
	</div>

</div>


<script>
	var app = new Vue({
		el:'#app',   // 描述为哪个模板提供实例,用于指定模板,表示模板
		data:{       //用于保存该页面渲染或双向数据绑定,当vue实例创建后，data中的值就会放入到响应式系统中，只要data中的值发生了变化，页面中也就相应的得到响应。
			message: 'hello Vue!',
			list:[{id:1,name:"terry"},{id:2,name:"larry"}],
			flag:Math.random()
		}
	})

	setInterval(()=>{
		app.list.push({"id":Math.random(),name:"tom"})
	},2000)
</script>
	
</body>
</html>