邂逅vue

最新推荐文章于 2024-09-06 22:20:29 发布

心动ヾ

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量120

点赞数 1

分类专栏： VUE 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/guoguo0717/article/details/124922700

版权

VUE 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

邂逅vue

简单认识Vuejs
◼Vue (读音 /vjuː/，类似于 view)，不要读错。
◼Vue是一个渐进式的框架，什么是渐进式的呢？
◼渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。
◼或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。
◼比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。
◼Vue有很多特点和Web开发中常见的高级功能
◼解耦视图和数据
◼可复用的组件
◼前端路由技术
◼状态管理
◼虚拟DOM
◼这些特点，你不需要一个个去记住，我们在后面的学习和开发中都会慢慢体会到的，一些技术点我也会在后面进行
讲解。
◼学习Vuejs的前提？
◼从零学习Vue开发，并不需要你具备其他类似于Angular、React，甚至是jQuery的经验。
◼但是你需要具备一定的HTML、CSS、JavaScript基础。

Vue.js安装

◼使用一个框架，我们第一步要做什么呢？安装下载它
◼ 安装Vue的方式有很多：
◼方式一：直接CDN引入
◼你可以选择引入开发环境版本还是生产环境版本
◼ 方式二：下载和引入
◼ 方式三：NPM安装
◼ 后续通过webpack和CLI的使用，我们使用该方式。

在这里插入图片描述

Hello Vuejs

◼ 我们来做我们的第一个Vue程序，体验一下Vue的响应式
◼ 代码做了什么事情？
◼ 我们来阅读JavaScript代码，会发现创建了一个Vue对象。
◼ 创建Vue对象的时候，传入了一些options：{}
◼ {}中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元
素上，很明显，我们这里是挂载到了id为app的元素上
◼ {}中包含了data属性：该属性中通常会存储一些数据
◼ 这些数据可以是我们直接定义出来的，比如像上面这样。
◼ 也可能是来自网络，从服务器加载的。
◼ 浏览器执行代码的流程：
◼ 执行到10~13行代码显然出对应的HTML
◼ 执行第16行代码创建Vue对象，并且对原HTML进行解析和修改。
◼ 并且，目前我们的代码是可以做到响应式的。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>hello word</title>
	</head>
	<body>
		<div id="app">file:///E:/VUE/hello.html
			<h1>{{msg}}</h1>
		</div>
	</body>
	<script src="vue.js"></script>
	<script>
	const app = new Vue({
		el:"#app",
		data:{
			msg: "hello Vue.js"
		}
	})
	</script>
</html>

在这里插入图片描述

Vue列表显示
◼ 现在，我们来展示一个更加复杂的数据：数据列表。
◼ 比如我们现在从服务器请求过来一个列表
◼ 希望展示到HTML中。
◼ HTML代码中，使用v-for指令
◼ 该指令我们后面会详细讲解，这里先学会使用。
◼ 是不是变得So Easy，我们再也不需要在JavaScript代码中完成
DOM的拼接相关操作了
◼ 而且，更重要的是，它还是响应式的。
◼ 也就是说，当我们数组中的数据发生改变时，界面会自
动改变。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>邂逅vue</title>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="item in movies">
					{{item}}
				</li>
			</ul>
		</div>
	</body>
	<script src="vue.js"></script>
	<script>
	const app = new Vue({
		el:"#app",
		data:{
			movies:['cf','qq','dnf']
		}
	})
	</script>
</html>

在这里插入图片描述
计数器

◼ 现在，我们来实现一个小的计数器
◼ 点击 + 计数器+1
◼ 点击 - 计数器 -1 ◼ 这里，我们又要使用新的指令和属性了
◼ 新的属性：methods，该属性用于在Vue对象中定义方
法（函数）。
◼ 新的指令：@click, 该指令用于监听某个元素的点击事
件，并且需要指定当发生点击时，执行的方法(方法通
常是methods中定义的方法) ◼ 你可能会疑惑？
◼ 这些@click是什么东西？
◼ Vue对象中又是定义el/data/methods，到底都有哪些
东西可以定义，以及它们的作用是什么？

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2>当前计数：{{counter}}</h2>
			<button @click="increment">+</button>
			<button @click="decrement">-</button>
		</div>
	</body>
	<script src="vue.js"></script>
	<script>
	const app = new Vue({
		el:"#app",
		data:{
			counter :0
		},
		methods:{
			increment(){
				this.counter++
			},
			decrement(){
				this.counter--
			}
		}
	})
	</script>
</html>

在这里插入图片描述
Vue中的MVVM

◼ View层：视图层
➢ 在我们前端开发中，通常就是DOM层。
➢ 主要的作用是给用户展示各种信息。
◼ Model层：数据层
➢ 数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。
➢ 在我们计数器的案例中，就是后面抽取出来的data，当然，里面的数据可能没有这么简
单。
◼ ViewModel层：视图模型层
➢ 视图模型层是View和Model沟通的桥梁。
➢ 一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中 ➢ 另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、
touch等)时，可以监听到，并在需要的情况下改变对应的Data。

在这里插入图片描述
计数器的MVVM
◼ 计数器的MVVM
◼ 我们的计数器中就有严格的MVVM思想
◼ View依然是我们的DOM
◼ Model就是我们我们抽离出来的data
◼ ViewModel就是我们创建的Vue对象实例
◼ 它们之间如何工作呢？
◼ 首先ViewModel通过Data Binding让obj中的数据实时的在DOM中显示。
◼ 其次ViewModel通过DOM Listener来监听DOM事件，并且通过methods中的操作，来改变data中的数据。

创建Vue实例传入的options
◼你会发现，我们在创建Vue实例的时候，传入了一个对象options。 ◼这个options中可以包含哪些选项呢？
◼详细解析： https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE
◼目前掌握这些选项：
◼el: ◼类型：string | HTMLElement
◼作用：决定之后Vue实例会管理哪一个DOM。 ◼data:
◼类型：Object | Function （组件当中data必须是一个函数）
◼作用：Vue实例对应的数据对象。
◼methods:
◼类型：{ [key: string]: Function }
◼作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。

心动ヾ

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
邂逅vue

邂逅vue简单认识Vuejs◼Vue (读音 /vjuː/，类似于 view)，不要读错。◼Vue是一个渐进式的框架，什么是渐进式的呢？◼渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。◼或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。◼比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。◼Vue有很多特点和Web开发中常见的高级功能◼解耦视图和数据◼可复用的组件◼前端路由技术◼状态管理◼虚拟DOM◼
复制链接

扫一扫

专栏目录