Vue入门

最新推荐文章于 2025-01-16 16:56:18 发布

electronic老倒霉蛋

最新推荐文章于 2025-01-16 16:56:18 发布

阅读量182

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/hhhhhhhhzsw/article/details/108149665

版权

什么是Vue？

Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架。

库和框架的区别

库(Library)，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者
代表：jQuery
jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作

框架(Framework)，是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码
代表：vue
框架规定了自己的编程方式，是一套完整的解决方案
使用框架的时候，由框架控制一切，我们只需要按照规则写代码
框架的侵入性很高(从头到尾)

安装Vue

cdn下载(需连接网络)BootCDN中文网

<!- - 开发环境版本，包含了有帮助的命令行警告 - - >
< script src=“https://cdn.jsdelivr.net/npm/vue/dist/vue.js” >< /script >
< !-- 生产环境版本，优化了尺寸和速度 -->
< script src=“https://cdn.jsdelivr.net/npm/vue”>< /script>

手动下载

< !-- 开发环境版本，包含了有帮助的命令行警告 -->
< script src=“dist/vue.js”>< /script>
< !-- 生产环境版本，优化了尺寸和速度 -->
< script src=“dist/vue.min.js”>< /script>

入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>入门案例</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h3>{{msg}}</h3>
		</div>	
	</body>
	<script type="text/javascript">
		//作用将Vue实例挂载到具体的边界,那么这个边界就会被vue这个渐进式的框架所管理
		//注意:边界不能有兄弟标签,边界一定是跟标签
		new Vue({
			el:'#app',
			data:{
				msg:'hello vue!!!'
			}
		})
		
	</script>
</html>

在这里插入图片描述

事件（v-on事件绑定）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue事件</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h3>{{msg}}</h3>
			<input type="text" v-model="msg" />
			<button v-on:click="xx">vue的事件按钮</button>
			<button @click="xx">vue的事件按钮简写</button>
			<!-- v-on代表的是Vue指令，:后面代表的是参数 -->
		</div>	
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			//es6之前的写法
// 			data:{
// 				msg:'hello vue!!!'
// 			},
// 			data:function(){
// 				return {
// 					msg:'hello vue2!!!'
// 				}
// 			},
			data(){
				return {
					msg:'hello vue!!!'
				}
			},
			methods:{
				xx(){
					console.log('xx方法被调用');
					this.msg = 'hhhhhhh';
				}
			}
		})
		
	</script>
</html>

在这里插入图片描述
点击事件按钮之后

双向数据绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue双向数据绑定</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h3>{{msg}}</h3>
			<input type="text" v-model="msg" />
			<h3>{{msg}}</h3>
			<input type="text" v-model="msg" />
			<h3>{{msg}}</h3>
		</div>	
	</body>
	<script type="text/javascript">
		//作用将Vue实例挂载到具体的边界,那么这个边界就会被vue这个渐进式的框架所管理
		//注意:边界不能有兄弟标签,边界一定是跟标签
		new Vue({
			el:'#app',
			data:{
				msg:'hello vue!!!'
			},
			created(){
				this.msg= 'xxx';
			}
		})
		
	</script>
</html>