<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue学习</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<style type="text/css">
			.box{
				width: 200px;
				height: 200px;
				background-color: aquamarine;
			}
		</style>
	</head>
	<body>
		<!-- 容器 -->
		<!-- 第一层 -->
		<div id="box">
			<h1>第一个：{{msg}}</h1>
		</div>
	</body>
	<script type="text/javascript">
		//一个Vue对象管理一个容器
		//id一般给javascript使用  class给样式使用
		//生产模式Vue：没有错误提示，代码被压缩。
		//开发者模式Vue：是有错误提示，没有被压缩的。
		
		//关掉开发环境的警告
		Vue.config.productionTip = false;
		
		/* 
			var 经常使用 没有值的时候输出 undefined
			let 块级变量方法内不受影响
			const 必须给一个初始化的值 
		*/
		
		const v = new Vue({
			el:'#box',
			data:{
				msg:'Hello Vue'
			}
		});
	</script>
</html>

插值语法和指令语法的基本使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插值语法和指令语法</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<h1>插值语法</h1>
			<h3>你好：{{name}}</h3>
			<h1>指令语法</h1>
			<a v-bind:href="webUrl">{{webName}}</a>
			<a href="#" v-bind:del="del">删除</a>
			<a href="" :chage="chage">修改</a>
			<!-- 
			指令语法的两种写法：
			v-bind:属性="data的key"
			:属性="data的key" 
			-->
			
			<h3>ID:{{user.id}} 姓名:{{user.name}} 性别:{{user.sex}}</h3>
		</div>
		<!-- 
		为什么Script的标签会放在body结束标签之前？
		一、避免堵塞
		二、HTML2.0起放在</body>下是不符合标准的
		-->	
		<script type="text/javascript">
			//关掉开发环境的警告
			Vue.config.productionTip = false;
			
			const v = new Vue({
				el:'#box',
				data:{
					name:'张三',
					webName:'百度',
					webUrl:"http://www.baidu.com",
					del:"101",
					chage:"101",
					user:{
						id:1,
						name:'张三',
						sex:'男'
					}
				}
			});
			
		</script>
	</body>
</html>

数据绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据绑定</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<h1>单项数据绑定</h1>
			用户名：<input type="text" name="name" v-bind:value="name"/><br>
			<h1>双向数据绑定</h1>
			用户名：<input type="text" name="name" v-model:value="name"/><br>
			<!-- 注意：v-model 只能用在表单元素上 -->
			<!-- 
			单项绑定：
				v-bind 或 :
			双向绑定
				v-model:value 或 v-model 
			-->
			
			<!-- 以下是这两个的简写方式 -->
			<h1>单项数据绑定</h1>
			用户名：<input type="text" name="name" :value="name"/><br>
			<h1>双向数据绑定</h1>
			用户名：<input type="text" name="name" v-model="name"/><br>
		</div>
		
		
		
		<script type="text/javascript">
			/* 
			const v = new Vue({
				data:{
					name:'张三'
				}
			}); 
			*/
		   
		   //目前两种都可以，学到组件过后只能用这种
		   const v = new Vue({
				data:function(){
					return{
						name:'张三'
					}
				}
		   });
			
			//ES6函数写法
			setTimeout(() => {
				//手动挂载
				v.$mount("#box");
			},3000);
			
			/* setTimeout(function(){
				
			},3000); */
		</script>
	</body>
</html>

 

最后修改于 2021-09-14 14:52:25
如果觉得我的文章对你有用，请随意赞赏
扫一扫支付
上一篇