vue 运行启动命令_如何使用Vue启动和运行

vue 运行启动命令

在本系列的介绍性帖子中，我们谈到了Web设计师如何使用Vue可以受益。 在本教程中，我们将学习如何启动和运行Vue，同时回答您可能遇到的一些初始问题。

如何在项目中添加Vue

Vue只是JavaScript，这意味着您可以通过在HTML文档中包含脚本标签来加载它。 Vue的网站建议使用诸如https://cdn.jsdelivr.net/npm/vue类的CDN，以确保获得最新版本。 您还可以使用其他特定于版本的链接，例如https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js 。

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

注意 ：如果要创建生产应用程序，建议您使用像yarn这样的程序包控制器来管理所有依赖项，并将其部署到CDN驱动的位置。 如果您想将Vue内置到JavaScript包中（例如使用Webpack之类的东西），那么这尤其重要。

了解标记和模板

创建Vue“实例”时，可以使用配置对象中的el选项将实例连接到DOM。 el选项应该是元素或CSS选择器字符串。 该元素也可以包含模板代码。 因此，在页面HTML中，可能会有类似以下内容：

<div id="app">
  <h1>{{title}}</h1>
  <p>{{content}}</p>
</div>

然后在您JavaScript中，您将获得以下内容：

var app = new Vue({
  el: "#app",
  data: {
    title: "Threat Level Midnight",
    content: "AGENT MICHAEL SCARN, ruggedly handsome without even trying, relaxes at his desk, feet up, reviewing a case file. His gunrests next to his FBI badge, which glints in the office’sbuzzing florescent light. Dressed in a suit, he’s loosened his tie and undone some of the buttons, revealing his hairy chest."
  },

})

同样，请注意， "#app"字符串是指HTML中的div。 Vue将用Vue渲染步骤的结果替换该div的内部内容。

Vue在后台做什么

我们已经确定Vue允许我们将视图与数据分开。 可以在视图本身中执行一些逻辑，但是我们能够避免以下导致代码不良或状态不正确的模式：

• 在DOM中存储/读取数据
• 使用直接DOM操作和修改而不是模板渲染来更新DOM
• 使用过程方法以不连贯的方式评估状态，这通常会导致DOM表示与预期状态不匹配

那么这是如何工作的呢？

Vue允许您在data选项中设置信息。 将观察到传递给该对象内部的任何键值对的更改，并且在数据更改时将重新呈现依赖于该数据段的任何内容。

这实质上意味着data对象是React性的 。 如果您使用JavaScript的内置数据操作方法，则更改将触发Vue的渲染引擎发挥作用。

例如，如果您的数据对象是这样设置的：

var vm = new Vue({
  el: "#app",
  data: {
    items: []
  }
});

使用此模板代码：

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

然后添加一些项目，如下所示：

vm.items = [{text: "Diversity Day"}, {text: "Beach Trip"}]

该模板将自动重新渲染，迭代（循环）所设置的项目。

React性的重要警告

由于允许Vue监视data对象（对象获取器和设置器）JavaScript功能在添加新键或删除现有键时不提供信息，因此添加和删除键不会触发任何重新渲染。 因此，在上面的同一示例中，如果初始数据对象为空（不存在items: [] ）：

var vm = new Vue({
    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 运行启动命令