vue.js前端开发技术读书笔记一：vue入门

最新推荐文章于 2024-07-25 11:52:08 发布

尾迹双冒号

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量871

点赞数 2

分类专栏： # 读书 # web前端文章标签： html vue.js

本文链接：https://blog.csdn.net/weixin_51188461/article/details/121670800

版权

web前端同时被 2 个专栏收录

12 篇文章 2 订阅

订阅专栏

读书

6 篇文章 0 订阅

订阅专栏

文章目录

一.vue入门
1.什么是vue及vue特点？
2.vue在前端开发中的优势？
3.vue的下载及如何引入并应用？
4.实例化vue对象，数据和方法？
5.数据如何挂载到DOM页面？
6.vue中的MVVM模式？
7.vue开发工具

为了方便打字，所有Vue统一为小写vue

一.vue入门

请添加图片描述
❤️❤️❤️什么是vue及vue特点？vue在前端开发中的优势？vue的下载及如何引入并应用？实例化vue对象，数据和方法？数据如何挂载到DOM页面？vue中的MVVM模式？

1.什么是vue及vue特点？

1）什么是vue？完整的网页：【DOM组合+嵌套(–>最基本的视图结构)】+【css样式的修饰】+【使用JavaScript接受用户的交互请求】+【通过事件机制来响应用户交互操作】而形成的。最基本的视图结构称为视图层，一些网页元素很多，使用传统开发方式，处理不易，而vue核心库关注的部分就是视图层的部分。虽然jQuery使用简洁的语法和跨平台的兼容性，但随着产品升级，修改页面结构，代码可能变得臃肿且无从下手，无法满足产品需求，而vue.js解决了这些问题
2）vue特点？1.轻量级的框架2.双向数据绑定3.指令4.组件化5.客户端路由6.状态管理（单向数据流）

2.vue在前端开发中的优势？

3）优势：1.vue.js可以进行组件化开发，使代码编写量大大减少，读者更易于理解。2.vue.js最突出的优势在于可对数据进行双向绑定3.使用vue.js编写出来界面效果本身就是响应式，使网页在各种设备上都能显示出非常好看的效果4.vue使用路由不会刷新页面【vue必须在ES5版本以上环境使用】

3.vue的下载及如何引入并应用？

4）vue下载：官网
vue引用：
[使用script标签]<script src="文件路径/vue.js"></script>
[使用#CDN]<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>

4.实例化vue对象，数据和方法？

5)vue实例化：在使用vue.js都是通过构造函数vue（）创建一个vue的根实例，每一个new Vue()都是一个vue构造函数实例，这个过程叫函数实例化。
举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
	<!--app是根容器-->
		<div id="app">
			<div>{{ name }}</div><!--若此句放在div外面就不能渲染数据-->
			<!--整个div标签里的是一个模板语法，在{{}}里的property是一个
			模板变量，或模板表达式-->
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js">
		//引入Vue.js文件
		</script>
		<!--创建vue实例，调用vue的构造方法，在构造方法中el对应div标签
		的id选择器，name是data对象里的一个属性，并且和div标签里的
		{{name}}对应
		-->
	<script>
	//实例化vue
	//每个vue.js都是通过构造函数vue创建一个vue的根实例启动的
	//实例化vue需要传入一个选项对象
	//选项对象包括挂载元素（el）,数据data,方法methods，模板，生命周期，
	//钩子函数等选项
		new Vue({
			el: '#app',
			data:{
				name:'vue实例化！',
			}
		})
		</script>
		<!--最后使用浏览器运行本程序，界面渲染的是data对象里
		的name属性的值-->
	</body>
</html>

6）vue数据和方法：实例化vue对象需要在data中定义数据，data可以是一个JavaScript对象。methods 中定义方法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app">
			<h1>{{ say() }}</h1>
			<h1>{{ name }}</h1>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
	<script>
		new Vue({
			el: '#app',
			data:{
				name:'这是vue实例化！',
			},
		
		methods:{
			say:function(){
				return:"这是方法"+this.name
			}
			
		}
		})
		</script>
	</body>
</html>

效果图：
在这里插入图片描述

5.数据如何挂载到DOM页面？

7）如何将数据挂载到DOM页面？


```html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<div id="app_2">
			
			<p>{{ name }}</p>
			<button onclick="app.name = 'helloworld!';">更新！</button>
		</div>
		
	<script>
		var app = new Vue({
			el: '#app_2',
			data: {
				name:'zheshihelloworld'
			},
		
		
			created: function() {console.log('name is:'+this.name)},
			//mounted: function() {console.log("已挂载到DOM页面上")},
			//updated: function() {console.log("已更新DOM！");}
			
		
		})
		</script>
	</body>
</html>

在这里插入图片描述

vue可以直接插值，如<p>moli{{ name }}</p>依然可以正常渲染出数据！
在这里插入图片描述

6.vue中的MVVM模式？

8.vue中的MVVM模式：MVVM（Model-Viem-ViemModel）它是一种基于前端开发的架构模式，其核心是对view和viewModel的双向数据绑定，这使得一方更新时可自动传递到另一方，即所谓的数据双向绑定。ViewModel是Vue.js的核心，它是一个vue的实例。
在这里插入图片描述
如图，当view中DOM元素与Model中数据绑定成功后，view model中DOMlisteners工具会帮我们检测DOM元素变化，若有变化，Model中数据也进行同样变化，反之，data bindings工具帮我们更新view层中DOM元素。
演示MVVM模式

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		
		<div id="app_2">
			
			<p>{{ name }}</p>
			<input type="text" v-model="name"/>
		</div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>	
	<script>
		var exampleData = {
			name: 'helloworld'
		}
		 new Vue({
			el: '#app_2',
			data: exampleData
		
		
			//created: function() {console.log('name is:'+this.name)},
			//mounted: function() {console.log("已挂载到DOM页面上")},
			//updated: function() {console.log("已更新DOM！");}
			
		
		})
		</script>
	</body>
</html>

效果图：
在这里插入图片描述

7.vue开发工具

【vue开发工具有：1、Vue CLI；2、Vue Press；3、Vuex；4、Nuxt；5、Vuetify；6、Quasar；7、Storybook；8、Visual Studio Code；9、WebStorm等等。】

尾迹双冒号

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue.js前端开发技术读书笔记一：vue入门

文章目录一.vue入门1.什么是vue及vue特点？2.vue在前端开发中的优势？3.vue的下载及如何引入并应用？4.实例化vue对象，数据和方法？5.数据如何挂载到DOM页面？6.vue中的MVVM模式？7.vue开发工具为了方便打字，所有Vue统一为小写vue一.vue入门❤️❤️❤️什么是vue及vue特点？vue在前端开发中的优势？vue的下载及如何引入并应用？实例化vue对象，数据和方法？数据如何挂载到DOM页面？vue中的MVVM模式？1.什么是vue及vue特点？1）什么是vue
复制链接

扫一扫