初识 vue（一）

最新推荐文章于 2024-08-30 20:29:15 发布

北街风

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量217

点赞数

分类专栏： Vue 文章标签： vue.js javascript html

diaolove

本文链接：https://blog.csdn.net/qq_45047809/article/details/120329239

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

2、Vue初始化过程中（new Vue(options)）都做了什么？

3、对MVVM的理解？

4、vue 和 react 区别

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue有很多特点和Web开发中常见的高级功能

解耦视图和数据
可复用的组件
前端路由技术
状态管理
虚拟DOM

一、安装

相关连接：安装 — Vue.js (vuejs.org)

1、安装Node.js 环境
Node.,js是一个基于Chrom e V8引擎的JavaScript运行环境，它可以让JavaScrpt运行在服务器端。接下来我们就对Node.s的下载和安装进行详细讲解。
(1)打开Node.js官方网站，找到Node.js下载地址
从图1-6中可以看出，Node.js有两个版本。LTS(Long Tem Support是提供长期支持的版本，只进行微小的Bug修复且版本稳定，因此有很多用户在使用;Curent是当前发布的最新版本，增加了一些新特性，有利于进行新技术的开发使用。这里选择LTS版本进行下载即可。

下载后双击进行安装，然后查看安装成功否。

方式一︰直接CDN引入
你可以选择引入开发环境版本还是生产环境版本

<! --开发环境版本，包含了有帮助的命令行警告-->
<script src="https : / /cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


<script src="https: // cdn.jsdelivr.net/npm/vue"></script>

方式二∶下载和引入
开发环境

https: //vuejs.org/js/vue.js

生产环境

https: //vuejs.org/js/vue.min.js

方式三:NPM安装
后续通过webpack和CLI的使用，我们使用该方式。

选择方式一体验一下，创建一个.html文件

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>vue</title>
	</head>

	<body>
		<div id="app">{{message}}</div>
		<div>{{message}}</div>
		<h1>{{message}}</h1> 
 <!--不显示，这样子写的好处就是数据与代码分离，更改数据不影响界面-->
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	
		<script>
			//let(变量) /const（常量）
			//编程范式：声明式编程
			const app = new Vue({
				el: '#app', //用于挂载要管理的元素
				data: { //定义数据
					message: '你好啊！小世界！'
				}
			})

			//元素js的做法  编程范式:(命令式编程)

			//1.创建div元素,设置id属性

			// 2.定义一个变量叫message

			//3.将message变量放在前面的div元素中显示
			
			//4.修改message的数据:今天天气不错！

		</script>
	</body>

</html>

什么是响应式：当数据发生改变时，界面会跟随改变。

小练习二：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue</title>
	</head>

	<body>
		<div id="app">
			<ul>
				<li v-for="item in movies">{{item}}</li>
			</ul>
			{{movies}}
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#app', //用于挂载要管理的元素
				data: { //定义数据
					message: '你好啊！',
					movies:['甄嬛传','如懿传','陆贞传奇','哪吒','狼者']
				}
			})
		</script>
	</body>

</html>

成功遍历数组元素。

练习三：记数器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue</title>
	</head>

	<body>
		<div id="app">
			<h2>当前计数：{{counter}}</h2>
			<button @click="increment">+</button>
			<button @click="decrement">-</button>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
		<script>
			let app = new Vue({
				el: '#app', //用于挂载要管理的元素
				data: { //定义数据
					counter: 0
				},
				methods:{
					increment(){
						this.counter++
					},
				decrement()	{
					this.counter--
				}
			}
		})
		</script>
	</body>

</html>

我们又要使用新的指令和属性了

新的属性：methods ，该属性用于在 Vue 对象中定义方法。

新的指令：@click, 该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法(方法通常是methods中定义的方法)

二、Vue中的MVVM

MVVM - 中文维基百科【维基百科中文版网站】 (gaogevip.com)

MVVM主要包含三部分，分别是Model ,view和ViewModel。Model指的是数据部分，主要负责业务数据；View指的是视图部分，即DOM元素，负责视图的处理。ViewModel是连接视图与数据的数据模型，负责监听Model或者View修改。

在MVVM中，数据（Model)和视图（View）是不能直接通信的，视图模型（ViewModel)就相当于一个观察者，监视着双方的动作，并及时通知进行相应的操作。当Model发生变化的时候，ViewModel能够监听到这种变化是，ViewModel监听到变化后，通知Model进行修改，实现了视图与模型的互相解耦。

三、Vue的优势

目前市场三大前端主流框架分别是Angular、React和Vue。Vue之所以被开发者青睐，主要是秉承了Angular和React框架两者的优势，并且Vuedaima 简介、上手容易，在市场上也得到大量应用。

1、轻量级

2、数据绑定

3、指令

指令主要包括内置指令和自定义指令，以“v-”开头，作用于HTML元素。指令提供了一些特殊的特性，将指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为。例如：v-bind动态绑定指令、v-if条件渲染指令、v-for列表渲染指令等。

4、插件

四、webpack打包工具

五、浏览器和vue-devtools扩展

vue-devtooks是一款基于Chrom e浏览器的扩展，用于调试Vue应用,只需下载官方压缩包，配置Chrom e浏览器的扩展程序即可使用。下面我们简单介绍一下安装流程。
(1)下载vue-dev tools-5.1.1.zp压缩包到本地。
(2）将压缩包进行解压，然后在命令行中切换到解压好的vue-devtooks-5.1.1目录，输入以下命令进行依赖安装:
npm instal
(3)构建vue-dev tools工具插件，执行命令如下:

npm run build
(4）将插件添加至chtome浏览器。单击浏览器地址栏右边的“:”按钮，在弹出的菜单中选择“更多工具”→“扩展程序”，
单击“加载已解压的扩展程序”按钮，此时会弹出选择框，需要用户选择扩展程序目录。找到vue-devtos-5.1.1/helkschiome目录，将其添加到扩展程序中。

(5）配置完成后，可以看到当前vue-devtooks工具的信息，并在Chiom e浏览器窗口的右上角会显示Vue的标识

六、创建Vue实例传入的options

这个 options 中可以包含哪些选项呢？

详细解析：

七、面试题扩展：

主要应用该博主的内容：酒醉提笔思故人

1、Vue的优点

轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb ；
简单易学：国人开发，中文文档，不存在语言障碍，易于理解和学习；
双向数据绑定：保留了 angular 的特点，在数据操作方面更为简单；
组件化：保留了 react 的优点，实现了 html 的封装和重用，在构建单页面应用方面有着独特的优势；
视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；
虚拟DOM：dom 操作是非常耗费性能的，不再使用原生的 dom 操作节点，极大解放 dom 操作，但具体操作的还是 dom 不过是换了另一种方式；
运行速度更快：相比较于 react 而言，同样是操作虚拟 dom ，就性能而言， vue 存在很大的优势。

2、Vue初始化过程中（new Vue(options)）都做了什么？

处理组件配置项；初始化根组件时进行了选项合并操作，将全局配置合并到根组件的局部配置上；初始化每个子组件时做了一些性能优化，将组件配置对象上的一些深层次属性放到 vm.$options 选项中，以提高代码的执行效率；
初始化组件实例的关系属性，比如 p a r e n t 、 parent、parent、children、r o o t 、 root、root、refs 等
处理自定义事件
调用 beforeCreate 钩子函数
初始化组件的 inject 配置项，得到 ret[key] = val 形式的配置对象，然后对该配置对象进行响应式处理，并代理每个 key 到 vm 实例上
数据响应式，处理 props、methods、data、computed、watch 等选项
解析组件配置项上的 provide 对象，将其挂载到 vm._provided 属性上
调用 created 钩子函数
如果发现配置项上有 el 选项，则自动调用 $mount 方法，也就是说有了 el 选项，就不需要再手动调用 $mount 方法，反之，没提供 el 选项则必须调用 $mount

接下来则进入挂载阶段

// core/instance/init.js
export function initMixin (Vue: Class<Component>) {
  Vue.prototype._init = function (options?: Object) {
      const vm: Component = this
      vm._uid = uid++
      
      // 如果是Vue的实例，则不需要被observe
      vm._isVue = true
      
      if (options && options._isComponent) {
        // optimize internal component instantiation
        // since dynamic options merging is pretty slow, and none of the
        // internal component options needs special treatment.
        initInternalComponent(vm, options)
      } else {
        vm.$options = mergeOptions(
          resolveConstructorOptions(vm.constructor),
          options || {},
          vm
        )
      }
      
      if (process.env.NODE_ENV !== 'production') {
        initProxy(vm)
      } else {
        vm._renderProxy = vm
      }

      vm._self = vm

      initLifecycle(vm)
      initEvents(vm)
      callHook(vm, 'beforeCreate')
      initInjections(vm) // resolve injections before data/props

      initState(vm)
      initProvide(vm) // resolve provide after data/props
      callHook(vm, 'created')
      
      if (vm.$options.el) {
        vm.$mount(vm.$options.el)
      }
  }
}

3、对MVVM的理解？

MVVM 由 Model、View、ViewModel 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来；ViewModel 是一个同步View 和 Model的对象。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的，因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

4、vue 和 react 区别

相同：

1、都使用vdom；
2、都提供了响应式和组件化的视图组件；
3、核心都在UI层（比如路由，状态管理，数据请求交给其他库）；
4、都是单向数据流；
5、轻量级

不同：

1、vue 基于 html 的模板语法，react 是 jsx 语法，可以 html 和 js 混写；
2、状态管理 vue 是 data，react 是 state 但是不能直接修改 state，需要 setState 方法；
3、vue 使用 solt 插槽进行嵌套传递，react 使用 props.children 传递；
4、vue 使用指令渲染，react 逻辑运算符；
5、父子组件传值，vue 使用 props 和 $emit，react 使用 props 和子组件触发父组件的方法，父组件通过setState修改；
6、路由，vue 路由组件都会渲染到 router-view 里面，react 是全局组件的方式，子组件作为 children 传递到父组件；
7、vue 实现双向绑定，react 没有；
8、vue 父组件更新子组件不会动，react 父更新子必更新，需要手动设置；

目前就更新到这，以后有新内容会继续完善补充，谢谢观看，有什么不足的地方希望你能提点一二，我会一点点改进~ღ( ´･ᴗ･` )比心

北街风

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
初识 vue（一）

Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。Vue有很多特点和Web开发中常见的高级功能解耦视图和数据可复用的组件前端路由技术状态管理虚拟DOM一、安装相关连接：安装 — Vue.js (vu...
复制链接

扫一扫