Vue学习

最新推荐文章于 2024-05-29 17:10:32 发布

An_1999

最新推荐文章于 2024-05-29 17:10:32 发布

阅读量120

点赞数

分类专栏： Vue学习文章标签： Vue

本文链接：https://blog.csdn.net/An_1999/article/details/102654297

版权

Vue学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

Vue学习2019/10/20

（v-for、v-on、v-model应用）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>hell world</title>
		<script src='./vue.js'></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="value">
			<button v-on:click="clic">提交</button>
			<ul>
				<li v-for="iem in list">{{iem}}</li>
			</ul>
		</div>
		<script>
			var app = new Vue({
				el:'#app',
				data:{
			     	list:[],
					value:''
				},
			methods:{
				clic:function(){ 
					this.list.push(this.value)
					this.value=''	
				}
			}
		})
		</script>
	</body>
</html>

点击提交按钮将文本框内输入的内容提交到list里面，并清空文本框里面的内容。

jQuery M模型层 V 视图 P控制器
核心在presenter中，大量代码在做对DOM的操作

Vue M（Model模型层）存储数据 V（View视图层）显示数据 VM（ViewModel）Vue内置的
核心一部分在模型层（主要），一部分在视图层（次要）。

（前端组件化）
每一个组件就是页面上的一个区域，这样就可以方便我们进行页面的维护。
（使用组件化思想修改hell world）
（全局）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>hell world</title>
		<script src='./vue.js'></script>
	</head>
	<body>
		<div id="root">
			<input type="text" v-model="value">
			<button v-on:click="clic">提交</button>
			<tudo-item v-bind:content="item" 
			           v-for="item in list">
			</tudo-item>
		</div>
		<script>
			 Vue.component("TodoItem", {
				props: ['content'],
				template: "<li>{{content}}</li>",
			}) 
			
			var app = new Vue({
				el:"#root",
				data:{
			     	value:'',
					list:[]
				},
			methods:{
				clic:function(){
					this.list.push(this.value)
					this.value=''	
				}
			}
		})
		</script>
	</body>
</html>

（局部）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>hell world</title>
		<script src='./vue.js'></script>
	</head>
	<body>
		<div id="root">
			<input type="text" v-model="value">
			<button v-on:click="clic">提交</button>
			<tudo-item v-bind:content="item" 
			           v-for="item in list">
			</tudo-item>
		</div>
		<script>
			
			 var TodoIem={
				props['content'],
				template:"<li>{{content}}</li>"
			} 
			var app = new Vue({
				el:"#root",
				 components:{
					TodoIem:TodoIem
				}, 
				data:{
			     	value:'',
					list:[]
				},
			methods:{
				clic:function(){
					this.list.push(this.value)
					this.value=''	
				}
			}
		})
		</script>
	</body>
</html>