Python培训-Vue是什么?如何将Vue.js添加到项目中?

发布时间:2021-11-01 09:58:48 人气:101 作者:admin

Python培训-Vue是什么?如何将Vue.js添加到项目中?

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

Python培训-Vue是什么?如何将Vue.js添加到项目中?

  vue.js是目前前端web开发最流行的工具库,由尤雨溪在2014年2月发布的。

  Vue.js设计的初衷就包括可以被渐进式地采用。这意味着它可以根据需求以多种方式集成到一个项目中。

  将Vue.js添加到项目中主要有四种方式:

  1、在页面上以CDN包的形式导入。

  2、下载JavaScript文件并自行托管。

  3、使用npm安装它。

  4、使用官方的CLI来构建一个项目,它为现代前端工作流程提供了功能齐备的构建设置 (例如,热重载、保存时的提示等等)。

  基本使用

  Vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统。我们不再和HTML直接交互了。一个Vue应用会将其挂载到一个DOM元素上(对于这个例子是#app) 然后对其进行完全控制。那个HTML是我们的入口,但其余都会发生在新创建的Vue实例内部。

  {{ msg }}

  MVVM是Model-View-ViewModel的缩写,它是一种基于前端开发的架构模式。

  Model指代的就是vue对象的data属性里面的数据。这里的数据要显示到页面中。

  View指代的就是vue中数据要显示的HTML页面,在vue中,也称之为“视图模板”。

  ViewModel指代的是vue.js中我们编写代码时的vm对象了,它是vue.js的核心,负责连接View和Model,保证视图和数据的一致性,所以前面代码中,data里面的数据被显示中p标签中就是vm对象自动完成的。

  组件的data选项是一个函数。Vue在创建新组件实例的过程中调用此函数。它应该返回一个对象,然后Vue 会通过响应性系统将其包裹起来,并以$data的形式存储在组件实例中。为方便起见,该对象的任何顶级 property也直接通过组件实例暴露出来。

  console.log(vm) // 全局vue对象

  console.log(vm.$data); // vm对象要显示到页面中的数据

  console.log(vm.$data.msg); // 访问data里面的数据

  console.log(vm.msg); // 这个 name就是data里面声明的数据,也可以使用 vm.变量名显示其他数据,name只是举例.

  以上内容为大家介绍了Vue是什么以及如何将Vue.js添加到项目中,希望对大家有所帮助,如果想要了解更多Python相关知识,请关注多测师。https://www.e70w.com/

返回列表
在线客服
联系方式

热线电话

17727591462

上班时间

周一到周五

二维码
线