Vue基础

最新推荐文章于 2024-08-04 12:47:40 发布

Whaleson

最新推荐文章于 2024-08-04 12:47:40 发布

阅读量232

点赞数

分类专栏： vue基础文章标签： Vue基础

本文链接：https://blog.csdn.net/Dreamlate_Spider/article/details/103040347

版权

vue基础专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>Vue Hello world</title>
	<script type="text/javascript" src="vue.js"></script>
</head>
<body>

	<!-- 挂载点 模板 实例之间的关系  -->
	<!-- v-text="msg" v-html="te" -->
	<!-- v-on:指令的简写是@ -->
	<div id="root" v-on:click="handleClick">{{number}}</div>
	这个div就是vue实例的挂载点
	Vue只会处理挂载点下面的内容（div里面的内容）
	挂载点内部的内容都可以称之为模板
	
	插值表达式


	<h1>Vue中的属性绑定和双向数据绑定</h1>
	<div id="root1">
		<!-- 属性绑定v-bind简写时可以省去，为:title="title" -->
		<div :title="title">Hahah</div>
		<!-- 双向数据绑定指令v-model,input标签的内容改变时，div也改变 -->
		<input type="text" name=""  v-model="content">
		<div>{{content}}</div>
	</div>

	<h1>Vue中的计算属性和监听器</h1>
	<div id="root2">
		<input type="text" v-model="firstName" name="">
		<input type="text" v-model="lastName" name="">
		<div>{{firstName}}{{lastName}}</div>
		<div>{{fullName}}</div>
	</div>

	<h1>v-if,v-show与v-for指令</h1>
	<div id="root3">
		<div v-if="show">{{content}}</div>
		<button @click="handleClick">toggle</button>
		<ul>
			<li v-for="item of list" :key="item">{{item}}</li>
		</ul>
	</div>


	<script type="text/javascript">
		//挂载点
		new Vue({
			el: "#root", //element Vue 对象和哪个节点绑定
			template:'',
			data:{
				msg:"Hello Everybody",
				number:"666",
				te:"999"

			},methods:{
				handleClick : function(){
					this.number = 999
				}
			}
		})

		//挂载点
		new Vue({
			el: "#root1", //element Vue 对象和哪个节点绑定
			data:{
				title:'Hello Everybody',
				content:'this is content'

			}
		})
		//挂载点
		new Vue({
			el: "#root2", //element Vue 对象和哪个节点绑定
			data:{
				
				firstName:'Liu',
				lastName:'Whaleson'

			},
			computed:{//一个属性由其它属性计算而来
				fullName: function(){
					return this.firstName + this.lastName
				}
			}
		})

		//挂载点
		new Vue({
			el: "#root3", //element Vue 对象和哪个节点绑定
			data:{
				show : true,
				content : ' Hello World',
				list:[1,2,3,4]
			},
			methods:{
				handleClick: function(){
					this.show = !this.show;
				}
			}
		})

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