首页天道酬勤idea怎么启动vue项目,vue 启动

idea怎么启动vue项目,vue 启动

张世龙 05-12 04:39 61次浏览

vue执行启动命令

本系列介绍性文章介绍了Web设计人员如何使用Vue有好处。 在本教程中,您将学习如何启动和运行Vue,然后回答可能出现的早期问题。

只有JavaScript可以向项目中添加Vue Vue。 这意味着可以通过在HTML文档中包含脚本标记来加载。 Vue站点建议使用cdn,例如https://CDN.jsdelivr.net/npm/vue类,以确保获得最新版本。 也可以使用其他特定版本的链接,如3https://cdnjs.cloud flare.com/Ajax/libs/vue/2.4.0/vue.js。

script src=' https://cdn.jsdelivr.net/NPM/vue ' type=' application/JavaScript '/script 3358 www.Sina.com/(如果需要)

在理解标签和模板并创建Vue“实例”时,可以使用配置对象的el选项将实例连接到DOM。 el选项必须是元素或CSS选择器字符串。 元素中也可以包含模板代码。 因此,页面HTML可能包括:

divid=' app ' h1 { { title } }/h1p { { content } }/p/div然后,JavaScript将提供以下信息:

varapp=newvue(El:'#app ),data: ) title:'threatlevelmidnight ),content: 'AGENT MICHAEL SCARN,rugggggt relaxes at his desk,feet up,reviewingacasefile.hisgunrestsnexttohisfbibadge,whichglintsintheoffice’sbuzzzingflorescentligrentligcentligtligtige he’sloosenedhistieandundonesomeofthebuttons,revealinghis Vue用Vue渲染步骤的结果替换div的内部内容。

Vue在后台做什么验证了Vue可以分离视图和数据。 虽然视图本身可以运行一些逻辑,但可以避免以下可能导致代码故障和状态错误的模式:

在DOM中存储/读取数据时,使用直接DOM操作和更改(而不是模板渲染)更新DOM的使用方式,并以不一致的方式评估状态。 结果,如果DOM显示无法达到预期的状态,这将如何工作?

使用Vue,可以使用data选项设置信息。 当检测到传递到对象内部的密钥-值对更改且数据发生更改时,将重新绘制依赖于该数据段的内容。

这实质上意味着data对象是React的。 如果使用JavaScript内置数据处理方法,则通过更改启动Vue的渲染引擎将起作用。

例如,如果数据对象是这样设置的:

varVM=newvue(El:(#app ),data: ) items:(} ); 使用此模板代码:

divid=' app ' divv-for=' iteminitems ' { { item.text } }/div/div然后添加以下各项:

VM.items=[ { text : ' diversity day ' },{text: 'Beach Trip'}]此模板将自动重新渲染并重复设置的项目。

React重要警告由于可以在Vue中监视data对象(对象资源管理器和设置器)的JavaScript功能,添加新密钥或删除现有密钥不会提供信息,因此添加或删除密钥时不会重新渲染因此,在上面的相同示例中,如果初始数据对象为空,则items: []不存在。

varVM=newvue(El:(#app ),data: ) )对vm.items进行更改不会触发重新渲染。 从Vue文档中:

“Vue不能将新根级别的React属性动态添加到创建的实例中。 还应注意,使用语法array[index]='new value '将项目添加到数组时,不会触发重新渲染。 相反,必须使用splice或Vue的Vue.set方法。 这是这份文件的

范围。 查看Vue文档中的注意事项列表。

与jQuery和其他库一起工作

Vue与jQuery,Underscore或任何其他流行JavaScript实用程序库不冲突。 但是,对于尝试将Vue与其他JavaScript 框架(如React)一起使用,您应该三思而行。

除了Vue之外,您可能不一定需要 jQuery,但是您可能希望在应用程序的其他未由Vue呈现的区域中使用它。

Vue还提供了与其他库集成的“挂钩”,例如执行动画。

使用Babel或其他翻译器

Vue不需要Babel来提高您的生产力。 但是,Babel将允许您使用JavaScript的一些最前沿的规范功能,例如模板字符串和更复杂的数组操作技术。

Vue不需要任何特殊的构建系统,这使习惯于编写少量JavaScript的面向设计的开发人员可以轻松访问Vue,同时仍具有足够的功能以集成到更复杂的构建系统和完整的单页应用程序中。

在同一页面上多次使用Vue

您不仅可以在同一页面上拥有多个Vue实例,而且甚至可以在同一页面上引用同一基础数据对象。 例如,在我们之前的数据列表示例中,如果我们JavaScript如下所示:

var sharedObject = { items: []}let vm = new Vue({el: "#app",data: sharedObject})vm.items = [{text: "Diversity Day"}, {text: "Beach Trip"}]

使用该模板的结果与我们之前的示例相同:

<div id="app"> <div v-for="item in items">{{item.text}}</div></div>

但是,我们还可以添加Vue的第二个实例,该实例引用相同的基础数据表示形式,如下所示:

var vm2 = new Vue({ el: "#app2",data: sharedObject})

然后,我们可以显示例如列表中的项目数:

<div id="app2"> <div>{{items.length}}</div></div>

当然,这可能不是所需的行为。 您可能想要创建两个不绑定到相同基础对象的组件,并且这些组件可以正常工作。

如果要创建两个以同一基础对象开头的单独实例,则可以使用Object.assign方法创建同一对象的新副本。

let vm2 = new Vue({ el: "#app2",data: Object.assign({}, sharedObject)}) 结论

对于希望使用易于使用的轻量级框架,但又希望将来需要更强大的框架的开发人员来说,Vue是一个绝佳选择。 Vue将根据您的需求扩展。 了解如何在各种场景下使用Vue(并了解表面下发生的事情)将为您提供一个非常强大的工具集,从一开始就可以使您高效地工作。

在下一个教程中,我们将通过查看Vue干净代码的一些示例,介绍Vue提供的更多独特价值。 到时候那里见!

无论您是经验丰富的编码人员还是希望使用新的前端开发技术的网站设计师,都可以通过我们完整的Vue.js教程指南学习Vue.js。

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-get-up-and-running-with-vue--cms-29642

vue 运行启动命令

vmware p2v linux,虚拟机centos7怎么连接网络