【vue入门】一丶14个基础案例

vue介绍

Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑
定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。

入门案例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>快速入门</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			{{message}}   <!--vue的插值表达式-->
			<!--三目运算符-->
			{{true?"yes" : "no"}}
			<!--数学运算-->
			{{num * 2.11}}
			<!--不支持插值表达式-->
			<!--{{var a = 1;}}-->
		</div>
	</body>
	<script>
		//view model
		// 创建vue对象
		new Vue({
			el:"#app", //由vue接管id为app区域
			data:{
				message:"hello Vue" ,//action:此处不要加分号!
				num:100
			}
		});
	</script>
</html>

  • v-on:click (@click)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-on:click</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			{{message}}  
			<button @click="fun1('vue-v-on')" >vue的onclick</button>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			data:{
				message:"hello vue"
			},
			methods: {
				fun1: function (msg) {
					alert("hello");
					this.message = msg;
				}
			}
		});
	</script>
</html> 
  • v-on:keydown
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>v-on:keydown</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>

<body>
<div id="app">
    vue:<input type="text" v-on:keydown="fun($event)">
    <hr/>
    传统js:<input type="text" onkeydown="showKeyCode()">
</div>
</body>
<script>
    //view model
	new Vue({
		el:"#app",
		methods: {
			fun:function (event) {
				// $event是vue中的事件对象 和我们传统js的event对象是一样的
				var keyCode = event.keyCode;
				if (keyCode < 48 || keyCode > 57) {
					//不起作用
					event.preventDefault();
				}
			}
		}
	});

    //传统的键盘按下时间
    function showKeyCode() {
        var keyCode = event.keyCode;
        if (keyCode < 48 || keyCode > 57) {
            //不起作用
            event.preventDefault();
        }
    }
</script>


</html>
  • v-on:mouseover
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>v-on:mouseover</title>
    <style>
        #div {
            background-color: red;
            width: 980px;
            height: 200px;
        }
    </style>
    <script src="js/vuejs-2.5.16.js"></script>
</head>

<body>
<div id="app">
    <div @mouseover="fun1" id="div">
        <textarea @mouseover="fun2($event)">这是一个文件域</textarea>
    </div>
</div>
<!--<div onmouseover="divMouse()" id="div">-->
<!--    <textarea onmouseover="textMouse()">这是文件域</textarea>-->
<!--</div>-->
</body>
<script>
    //view model
    new Vue({
        el: "#app",
        methods: {
        	fun1:function () {
				alert("鼠标停在div上");
			},
			fun2:function (event) {
				alert("鼠标悬停在textarea上");
				event.stopPropagation();
			}
		}
    });


    //传统的鼠标移动事件
    function divMouse() {
        alert("鼠标移动到了div区域");
    }

    function textMouse() {
        alert("鼠标移动到了text域");
        event.stopPropagation(); //防止传播
    }

</script>

</html>
  • v-on:事件修饰符
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>v-on:事件修饰符</title>

    <script src="js/vuejs-2.5.16.js"></script>
</head>

<body>
<div id="app">
	<form action="http://www.itheima.com" method="post" @submit.prevent >
		<input type="text">
		<input type="submit" value="提交">
	</form>

  <!--  <form action="http://www.itheima.com" onsubmit="return checkForm()">
        <input type="submit" value="提交">
    </form>-->
</div>
</body>
<script>
    //view model
	new Vue({
		el:"#app"
	})


    //传统的js方式
    function checkForm() {
        alert("submit success!");
        return true;
    }
</script>

</html>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-on:按键修饰符</title>

		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
			<input type="text" @keyup.enter="fun1" /><br>
			<input type="text" @keyup.space="fun2"/>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			methods:{
				fun1:function () {
					alert("你按下了回车!")
				},
				fun2:function () {
					alert("你按下了空格!")
				}
			}
		})
	</script>

</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-text与v-html</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			<div v-text="message" ></div>
			<div v-html="message"></div>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			data: {
				message:"<h2>传直播</h2>"
			}
		})
	</script>
</html>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-model</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
			<input type="text" v-model="user.username"><br>
			<input type="password" v-model="user.password"><br>
			<input type="button" value="获取" @click="fun"/>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			data:{
				user:{
					username:"",
					password:""
				}
			},
			methods:{
				fun:function () {
					alert(this.user.username +  "   " + this.user.password);
					this.user.username="liBo";
					this.user.password="123";
				}
			}
		})
	</script>

</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-bind上的使用在html的属性中用</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
				<font size="5" v-bind:color="ys1">传智播客</font><hr/>
				<font size="5" v-bind:color="ys2">黑马程序员</font>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			data:{
				ys1:"red",
				ys2:"blank"
			}
		})

	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-for遍历数组</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="(item,index) in list">{{"索引:" + index + "      值:" + item}}</li>
			</ul>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			data:{
				list:[1,2,3,4,5]
			}
		})
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-for遍历对象</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="(value, key) in product">
					{{key}} ==== {{value}}
				</li>
			</ul>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			data:{
				product:{
					id:1,name:"电视",price:1234
				}
			}
		})
	</script>
</html>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-for遍历对象</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
			<table border="1">
				<tr>
					<td>序号</td>
					<td>名称</td>
					<td>价格</td>
				</tr>
				<tr v-for="p in products">
					<td>{{p.id}}</td>
					<td>{{p.name}}</td>
					<td>{{p.price}}</td>
				</tr>
				
			</table>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			data:{
				products:[
					{id:1,name:"qiqi",price:111},
					{id:2,name:"tiantit",price:999}
				]
			}
		})
	</script>

</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>v-if与v-show</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
    <span v-if="flag">传智播客</span>
    <span v-show="flag">itcast</span>
    <button @click="toggle">切换</button>
</div>
</body>
<script>
    //view model
    new Vue({
        el: "#app",
        data: {
            flag: false
        },
        methods: {
            toggle: function () {
                this.flag = !this.flag
            }
        }
    })

</script>
</html>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>vuejs生命周期</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
			{{message}}
		</div>
	</body>
	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				message: 'hello world'
			},
			beforeCreate: function() {
				console.log(this);
				showData('创建vue实例前', this);
			},
			created: function() {
				showData('创建vue实例后', this);
			},
			beforeMount: function() {
				showData('挂载到dom前', this);
			},
			mounted: function() {
				showData('挂载到dom后', this);
			},
			beforeUpdate: function() {
				showData('数据变化更新前', this);
			},
			updated: function() {
				showData('数据变化更新后', this);
			},
			beforeDestroy: function() {
				vm.test = "3333";
				showData('vue实例销毁前', this);
			},
			destroyed: function() {
				showData('vue实例销毁后', this);
			}
		});

		function realDom() {
			console.log('真实dom结构:' + document.getElementById('app').innerHTML);
		}

		function showData(process, obj) {
			console.log(process);
			console.log('data 数据:' + obj.message)
			console.log('挂载的对象:')
			console.log(obj.$el)
			realDom();
			console.log('------------------')
			console.log('------------------')
		}
		//vm.message = "good...";
		vm.$destroy(); 
	</script>

</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值