vue初级快速入门

最新推荐文章于 2023-07-12 13:41:48 发布

再见长颈鹿

最新推荐文章于 2023-07-12 13:41:48 发布

阅读量398

点赞数 2

分类专栏： vue 文章标签： vue新手入门

本文链接：https://blog.csdn.net/BestRiven_wd/article/details/102886296

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue介绍

Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。
官网:vue官网上面有vue.js的下载还有教学视频但是代码没注释讲的又很快不适合后端新手入门我下面会写的非常详细适合新手掌握vue

vue快速入门

<!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}}	//这个叫做插值表达式
		</div>
	</body>
	<script>
		new Vue({
			el:'#app',//表示当前vue对象接管了div区域
			data:{
				message:'这里输入的内容就是给上面的message赋的值'//注意不要写分号结尾
			}
		})
	</script>
</html>

vue常用系统指令

ps:指令由很多,这里我就总结一下我觉得最基本且必须要掌握的指令,后面的代码就省去HTML的头和js的导入.
1.v-on (可以简写为@)
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码

<body>
		<div id="app">
			{{message}}  
			<button v-on:click="fun('这是使用vue绑定的点击事件')">vue的onclick</button>//v-on:click 可以简写为@click
		</div>
	</body>
	<script>
		//view model
		let vue = new Vue({//let vue可以写成Var vue ,let是JavaScript6版本以后推荐使用的
			el:'#app',
			data:{
				message:'点我'
			},
			methods:{
				fun:function(msg){
					vue.message = msg;
					//上面如果不写let vue 的话 这边可以写为this.message=msg
				}
			}
		})
	</script>

2.v-bind(可以简写为:)
插值语法不能作用在 HTML 标签里面的特性上，遇到这种情况应该使用 v-bind指令.

<body>
		<div id="app">
			<font v-bind:color="color1">请你支持我!</font>		
			<font :color="color2">你的支持是我更新的动力!</font>	//v-bind:color可以简化成:color
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			data:{
				color1:"red",
				color2:"blue"
			}
		})
	</script>

3.v-text和v-html
这个标签比较简单,不算常用,但我觉得你应该知道,简单来说v-html会解析HTML语法,而v-text就是普通文本了

	<body>
		<div id="app">
			<div v-html="message"></div> //页面输出为 helloworld
			<div v-text="message"></div> //页面输出为<h1>helloworld</h1>
		</div>
	</body>
	<script>
		//view model
		
	new Vue({
		el:'#app',
		data:{
			message:"<h1>helloworld</h1>"
		}
	})
	</script>

4.v-model(vue最重要标签没有之一)
ps:划重点,注意了!!!
Vue.js 遵循了 MVVM(Model-View-ViewModel)的思想,MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）,Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。(好像有点抽象,那就看下面代码吧)

	<body>
		<div id="app"> 
		姓名:<input type="text" id="username" v-model="user.username"><br> 
		密码:<input type="password" id="password" v-model="user.password"><br> 
			<input type="button" @click="fun" value="获取"> 
		</div> 
		
		<script> 
			new Vue({ el:'#app', //表示当前vue对象接管了div区域 
			data:{
				user:{username:"zhangsan",password:"123"} 
			},
			methods:{
				fun:function(){ 
					alert(this.user.username+" "+this.user.password);
					this.user.username="tom"; this.user.password="11111111"; }
				} 
			}); 
		</script> 
	</body>
		//总结:我们一般的数据绑定 就是给插值表达式的变量赋值,是单向的,而v-model实现了mvvm模式中的vm,即双向数据绑定,这是什么意思呢?简单来说,一开始我们在data中绑定了插值表达式的值,页面也显示了出来,后来我们在页面中重新赋值,插值表达式的值就变了,这就是双向绑定的伟大之处.

5.v-if和v-show
表面上效果相同但是简单来说当值为false时 v-show是将渲染效果隐藏 v-if是不渲染

	<body>
		<div id="app">
			<span v-if="flag">安妮</span>
			<span v-show="flag">亚索</span>
			<button @click="fun">切换</button> 
		</div>
	</body>
	<script>
		//view model
		let f =new Vue({
			el:'#app',
			data:{
				flag:'true'
			},
			methods:{
				fun:function(){
					f.flag = !f.flag
				}
			}
		})
	</script>