Vue.js学习笔记01

最新推荐文章于 2023-12-13 14:26:48 发布

Doraemon*

最新推荐文章于 2023-12-13 14:26:48 发布

阅读量400

点赞数

分类专栏：计算机文章标签： java vue javascript react

本文链接：https://blog.csdn.net/qq_39071853/article/details/109046796

版权

计算机专栏收录该内容

36 篇文章 0 订阅

订阅专栏

Vue

在这里插入图片描述

Vue的核心库只关注视图层，方便与第三方库或已有项目整合。
视图：HTML+CSS+JS ------>刷新后台的数据给用户看

一、前端核心分析

1.Vue概述

Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，由开发商由雨溪发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如: vue-router: 跳转，vue-resource: 通信，vuex:管理)或既有项目整合

2.前端三要素

HTML(结构)：超文本标记语言（Hyper Text Markup Language）,决定网页的结构和内容
CSS（表现）：层叠样式表（Cascading Style sheet）,设定网页的表现样式
JavaScript（行为）：是一种弱类型脚本语言，其源代码不需经过编译，而是由浏览器解释运行，用于控制网页的行为

3.JavaScript框架

jQuery:大家熟知的JavaScript框架，优点是简化了DOM操作，缺点是DOM操作太频繁，影响前端性能；在前端眼里使用它仅仅是为了兼容IE6、7、8；
Angular：Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到前端并增加了模块化开发的理念，与微软合作，采用TypeScript语法开发；对后台程序员友好，对前端程序员不太友好；最大的缺点是版本迭代不合理（如：1代->2代，除了名字，基本就是两个东西；目前已推出Angular6）；
React：Facebook出品，一款高性能的JS前端框架；特点是提出了新概念[虚拟DOM]用于减少真是DOM操作，在内存中模拟DOM操作，有效的提升了前端渲染效率；缺点是使用复杂，因为需要额外学习一门[JSX]语言；
Vue：一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular（模块化）和React（虚拟DOM）的优点；
Axios:前端通信框架；因为Vue的边界很明确，就是为了处理DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互；当然也可以直接选择使用jQuery提供的AJAX通信功能；

前端三大框架：Angular、React、Vue

二、第一个Vue程序

1.什么是MVVM

MVVM (Model-View-ViewModel) 是一种软件架构设计模式，由微软WPF (用于替代WinForm，以前就是用这个技术开发桌面应用程序的)和Silverlight (类似于Java Applet,简单点说就是在浏览器上运行的WPF)的架构师Ken Cooper和Ted Peters 开发，是一种简化用户界面的事件驱动编程方式。由John Gossman (同样也是WPF和Silverlight的架构师)于2005年在他的博客上发表。

MVVM 源自于经典的MVC (ModI-View-Controller) 模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用，其作用如下:

该层向上与视图层进行双向数据绑定
向下与Model层通过接口请求进行数据交互

在这里插入图片描述

2.为什么要使用MVVM

MVVM模式和MVC模式一样，主要目的是分离视图(View)和模型(Model),有几大好处：

低耦合:视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的
View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可复用:你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
独立开发:开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。
可测试:界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

在这里插入图片描述

Model : 模型层，在这里表示JavaScript对象
View : 视图层,在这里表示DOM (HTML操作的元素)
ViewModel : 连接视图和数据的中间件，Vue.js就是MVVM中的- ViewModel层的实现者在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者
ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新
ViewModel 能够监听到视图的变化，并能够通知数据发生改变

结论：Vue.js 就是一个MVVM的实现者，他的核心就是实现了DOM监听与数据绑定

3.React中虚拟DOM的基本概念

1.什么是react中的虚拟DOM：是框架中的概念，是程序员用js对象来模拟页面上的DOM和DOM 的嵌套

2.为什么要实现虚拟DOM：为了实现页面中DOM元素的高效更新

3.DOM和虚拟DOM的区别：

DOM：浏览器中提供的概念，用js对象表示页面上的元素，并提供操作议元素的API
虚拟DOM：手动用js对象来模拟DOM元素和嵌套关系

三、Vue基本语法

1. `v-bind`

现在数据和DOM已经被建立了关联，所有的东西都是响应式的。我们在控制台操作对象的属性，界面可以实时更新。

我们可以使用v-bind来绑定元素属性！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
    <span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
</div>
</body>

<!--导入js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "hello,vue"
        }
    })
</script>
</html>

2. `v-if v-else`

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>

<!--view层 模板-->
<div id="app">
   <h1 v-if="type==='A'">A</h1>
   <h1 v-else-if="type==='B'">B</h1>
   <h1 v-else>C</h1>
</div>
</body>

<!--导入js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
   var vm = new Vue({
       el: "#app",
       data: {
           type: "A"
       }
   })
</script>
</html>

3. `v-for`

<!DOCTYPE html>

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
		 <li v-for="item in items">	
			姓名:{{item.name}},年龄:{{item.age}}
			</li>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
	 <script> vm = new Vue({
		 el:"#app",
		 data:{
			 items:[
				 {name:"qin",age:19},
				 {name:"zhangsan",age:20},
				 {name:"lisi",age:21}
			 ]
		 }
	 })
 </script>
</script>

</html>

4. `v-on 事件绑定`

!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--view层 模板-->
<div id="app">
    <button v-on:click="sayHi">Click Me</button>
</div>
</body>

<!--导入js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "你点我干嘛？"
        },
        methods: {
            //方法必须绑定在Vue的Methods对象中，v-on:事件
            sayHi: (function (event) {
                alert(this.message)
            })
        }
    })
</script>
</html>

5. Vue常用七大属性

el属性

用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。
data属性

用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。
template属性

用来设置模板，会替换页面元素，包括占位符。
methods属性

放置页面中的业务逻辑，js方法一般都放置在methods中
render属性

创建真正的Virtual Dom
computed属性

用来计算
Vue.js 计算属性，计算属性在处理一些复杂逻辑时是很有用的
watch属性

Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化
watch:function(new,old){} 监听data中数据的变化两个参数，一个返回新值，一个返回旧值。

以上就是vue常用的7个属性，当然vue的属性可不知这些，开发需要的话可以在官网查阅剩余属性。

Doraemon*

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
Vue.js学习笔记01

VueVue的核心库只关注视图层，方便与第三方库或已有项目整合。视图：HTML+CSS+JS ------>刷新后台的数据给用户看一、前端核心分析1.Vue概述Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，由开发商由雨溪发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如: vue-router: 跳转，vue-resource: 通信，vuex:管理)或既有项
复制链接

扫一扫