vue小例子

最新推荐文章于 2020-12-10 14:11:00 发布
最新推荐文章于 2020-12-10 14:11:00 发布
阅读量173 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42243957/article/details/107749801
版权 
**1、快速入门**

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>快速入门</title>
		<script src="./vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			{{message}}
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			data:{
				message: "Hello Vue!"
			}
		});
	</script>
</html>

在这里插入图片描述

2、v-on:click
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-on:click</title>
		<script src="./vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			{{message}}  
			<button v-on:click="fun('这是使用vue绑定的点击事件')">vue的onclick</button>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			data:{
				message:"hello world"//model
			},
			methods:{
				fun:function(msg){
					//alert(msg);
					this.message = msg;
				}
			}
		});
	</script>
</html>

原来：
在这里插入图片描述
点击后：
在这里插入图片描述
3、v-on:keydown

<!DOCTYPE html>
<html>

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

	<body>
		<div id="app">
			<input type="text" v-on:keydown="fun($event)">
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			methods:{
				fun:function(event){
					//alert(event.keyCode);
					var keyCode = event.keyCode;
					if(!(keyCode >= 48 && keyCode <= 57)) {
						//2.阻止默认行为执行
						event.preventDefault();
					}
				}
			}
		})
		
		function showKeyCode(){
			var code = event.keyCode;
			alert(code);
		}
	</script>

</html>

在这里插入图片描述
在这里插入图片描述

4、 v-on:mouseove

<!DOCTYPE html>
<html>

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

	<body>
		<div id="app">
			<div @mouseover="fun1" id="div">
				<textarea @mouseover="fun2($event)">这是一个文件域</textarea>
			</div>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el: "#app", //表示当前vue对象接管了div区域   
			methods:{
				fun1:function(){
					alert("div......");
				},
				fun2:function(e){
					alert("textarea......");
					e.stopPropagation();//阻止冒泡 
				}
			}
		});
	</script>

</html>

在这里插入图片描述

5、v-on:事件修饰符
在这里插入图片描述

<!DOCTYPE html>
<html>

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

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

	<body>
		<div id="app">
			<!-- <form action="http://www.itcast.cn" onsubmit="return checkform()">
				<input type="submit" value="Go"> 
			</form> -->
			<form  v-on:submit.prevent action="http://www.itcast.cn" >
				<input type="submit" value="Go"> 
			</form>
			
			<div v-on:click="fun">
				<a v-on:click.stop href="http://www.itcast.cn">itcast</a>
			</div>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			methods:{
				fun:function(){
					alert("haha");
				}
			}
		});
		
		/* function checkform(){
			return false;
		} */
		
	</script>

</html>

在这里插入图片描述
6、v-on:按键修饰符

<!DOCTYPE html>
<html>

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

		<script src="./vue.js"></script>
	</head>

	<body>
		<div id="app">
			<input type="text" @keydown.enter="fun"/>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			methods:{
				fun:function(){
					alert("aaa");
				}
			}
		});
	</script>

</html>

在这里插入图片描述

在这里插入图片描述
7、v-text与v-html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-text与v-html</title>
		<script src="./vue.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:"<h1>Hello Vue!</h1>"
			}
		});
	</script>
</html>

在这里插入图片描述
8、v-model

<!DOCTYPE html>
<html>

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

	<body>
		<div id="app">
			用户名：<input type="text" v-model="user.username"><br/>
			密码：<input type="text" v-model="user.password"><br/>
			<input type="button" v-on:click="fun" value="按钮">
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			data:{
				user:{
					username:"test",
					password:"123"
				}
			},
			methods:{
				fun:function(){
					this.user.username="haha";
					this.user.password="1234";
				}
			}
		});
	</script>

</html>

原来：
在这里插入图片描述

点击后：
在这里插入图片描述
在这里插入图片描述

9、v-text与v-html在v-bind上的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-text与v-html在v-bind上的使用</title>
		<script src="./vue.js"></script>
	<body>
		<div id="app">
			<font v-bind:color="rs1">hello world</font>
			<font :color="rs2">hello itcast</font>
			
			<a href="http://www.itcast.cn/index/id">itcast1</a>	
			<a v-bind="{href:'http://www.itcast.cn/index/'+id}">itcast</a>					
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			data:{
				rs1:"red",
				rs2:"green",
				id:1
		
			}
		});
	</script>
</html>

在这里插入图片描述

10、v-for遍历数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-for遍历数组</title>
		<script src="./vue.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="(value,index) in arr">{{value}} and {{index}}</li>
			</ul>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			data:{
				arr:['a','b','c','d']
			}
		});
	</script>
</html>

在这里插入图片描述
11、v-for遍历对象

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

在这里插入图片描述
12、v-for遍历对象数组
数组：[]
对象：{}

<!DOCTYPE html>
<html>

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

	<body>
		<div id="app">
			<table border="1">
				<tr>
					<td>序号号</td>
					<td>编号</td>
					<td>名称</td>
					<td>价格</td>
				</tr>
				<tr v-for="(p,index) in products">
					<td>{{index+1}}</td>
					<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: 'itcast001',
					name: "电视机",
					price: 1000
				}, {
					id: "itcast002",
					name: "洗衣机",
					price: 2000
				}] //model
			}
		});
	</script>

</html>

在这里插入图片描述
13、v-if与v-show

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-if与v-show</title>
		<script src="./vue.js"></script>
	</head>
	<body>
		<div id="app">
			<span v-if="flag">hello itcast</span>			
			<span v-show="flag">hello ithemai</span>
			<button @click="fun">切换</button>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			data:{
				flag:true //model
			},
			methods:{
				fun:function(){
					
					this.flag=!this.flag;
				}
			}
		});
	</script>
</html>

在这里插入图片描述
点击后：

在这里插入图片描述

14、vuejs生命周期

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>vuejs生命周期</title>
		<script src="./vue.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>

console:

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

随枫潜入夜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一个vue的小例子
06-26
这是一个自己写的比较精简的微信公众号，自己看看吧，
vue一个小例子
冰淇淋真好吃
10-26 334
vue 的一个例子 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Title&amp;lt;/titl
Vuex2.0边学边记+两个小例子
wulixiaoxiao1的博客
02-25 7217
转载自：http://www.jianshu.com/p/13bec8f5b17d 最近在研究Vuex2.0，搞了好几天终于有点头绪了。 首先vuex概念比较多，一定要搞懂里面的概念，可以参考官网Vuex2.0概念，我写此文的目的是希望能对前端爱好者提供个参考，加深对vuex2.0各核心概念的理解。 废话少说，直接上干货。这是官网上的一个计数的实例。 先来起个项
vue入门小例子
07-08
学习vue.js官网时,写的几个小例子.
vue小案例
xiaoyuyully的博客
12-10 519
####1.实现微博发布删除功能： 点击提交，在文本上方显示要插入的内容 点击X删除按钮，删除本条数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-
vue的小例子
肖肖肖丽珠的博客
02-22 2429
想要的效果是： A B          item.isfinished}">{{item.label}}   //比较容易忽视这里面的也是循环得到的。让他绑定数组里的isfinished，他就是变量可以有不同的值       export default{      data(){         return {
一个VUE的小案例
weixin_30432007的博客
04-26 78
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...
vue基础之小案例
keep789的博客
08-20 1763
Todolist &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href=&quo
VUE前端小例子
03-25
VUE前端写的一个简单资产管理的小例子，里面有简单实现布局的代码。
vue简单登录小案例
04-28
这是一个简单的登录注册案例，可以让初学者更好的学习vue中的路由、路由嵌套、axios以及vuex。
Vue入门小案例
麻子的博客
04-22 2100
** VUE入门 ** vue入门案例01 入门案例-01代码展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue-2.6.10.js"&...
Vue.js小案例(1)
u011927449的博客
06-19 268
数据绑定 数据绑定是vue.js的基础。本例中就是利用了vue.js的v-model指令在表单元素上创建双向数据绑定。 <!--这是我们的View--> <div id="app"> <p>{{ message }}</p> <input type="text" v-model="message"/> </div> <script> // 这是我们的Model new Vue({
初学者Vue超简单入门小例子
10-23 1941
Vue小实例 这是转载一个大大的，跟着敲了以后顿觉清明，于是记录下来 这个例子还是比较简单的，独立完成后，能大概知道vue是干嘛的，可以写个todoList的小例子。 开始写例子之前，先对环境的部署做点简单的介绍，其实和Vue官方的差不多。 #如若没有安装过vue-cli,先全局安装一下vue-cli $ cnpm i -g vue-cli #到自己喜欢的目录下创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # # #之后会有如下询问 ? Proj
vue快速入门的三个小实例
qq_40479190的博客
11-27 1万+
1.前言 用vue做项目也有一段时间了。但是关于vue入门基础的文章，我还没有写过，那么今天就写vue入门的三个小实例，这三个小实例是我刚接触vue的时候的练手作品，难度从很简单到简单，都是入门级的。希望能帮到大家更好的学习和了解vue，也是让自己能够复习一下vue。如果发现文章写得有什么不好，写错了，或者有什么建议！欢迎大家指点迷津！ 1.本篇文章使用的vue版本是2.4.2，可能会和新
Vue.js实际开发案例
大灰狼的小绵羊哥哥的博客
09-14 3626
应用实例 https://github.com/phanan/koel koel-基于网络的个人音频流媒体服务 https://github.com/pagekit/pa... pagekit-轻量级的CMS建站系统 https://github.com/Vuedo/vuedo vuedo-博客平台 https://github.com/jackhutu/j... jackblog-vue-...
使vue组件居中、中下
热门推荐
qq_42243957的博客
08-04 1万+
position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%);
vue props例子
最新发布
06-23
Vue.js中的Props（属性）是父组件向子组件传递数据的一种机制，它允许父组件将数据作为配置提供给子组件，并确保数据的一致性和可复用性。这里是一个简单的Vue Props的例子： ```html <!-- 父组件 App.vue --> <template> <div> <child-component :message="parentMessage" /> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { parentMessage: 'Hello from Parent!' } } } </script> ``` 在这个例子中，`parentMessage`是一个props，我们使用冒号(`:`)将其标记为props，然后在`<child-component>`标签中传递给子组件。 ```html <!-- 子组件 ChildComponent.vue --> <template> <p>{{ message }}</p> </template> <script> export default { props: { // 定义接受的prop名称和默认值 message: { type: String, // 数据类型 default: 'Default message' // 默认值 } } } </script> ``` 子组件通过`props`对象定义了它期望从父组件接收哪些数据。当父组件的数据发生改变时，通常不需要手动通知子组件更新，因为Vue会自动进行更新。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值