Hello Vue: Vue快速入门教程
Vue快速入门教程，此教程包括使用Kendo UI for Vue的组件。但愿经过此教程可以成为你学习vue的一个很好的起点。这其中还包含一个可扩展的事例，若是你感兴趣能够深刻学习下去。css
本教程针对的是第一次使用Vue资源管理器。我将向您展现如何使用Vue建立一个简单的示例，而后我将添加一些交互性和UI组件，最后添加更多功能和Kendo UI组件。虽然本教程演示很是基础，但它概述了使用Vue添加特性和功能的全部关键元素。扩展演示代码并交换更复杂的组件很是容易。个人例子，如Vue自己，是可扩展的。html
ps: 框架的名称在技术上是“Vue.js”，有些地方甚至会修改版本号以得到“Vue.js 2”，但大多数人只是在经常使用中使用“Vue”。本教程侧重于语言，并未涵盖更重要的Vue-cli等高级主题，但应该在之后会有介绍。vue
让咱们开始吧!jquery
Hello, world!
首先，让咱们先来了解一下开始使用Vue是多么容易。咱们将从流行的“hello，world”应用程序的Vue实现开始。git
<!DOCTYPE html>
<html lang="en">
<head>
<title>Clash</title>
<!-- the star of the show - the Vue library! -->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
// when life is settled, load up the fun stuff
document.addEventListener('DOMContentLoaded', function () {
new Vue({
el: '#sg1',
// define data - initial display text
data: {
m1: "You got to let me know"
}
})
})
</script>
</head>
<body>
<!-- text -->
<div id="sg1">
<p>{{ m1 }}</p>
</div>
</body>
</html>
咱们作了什么
首先，在文档<head>中，咱们给它标题。可是写标题是一个不应被遗忘的好习惯。github
接下来，咱们从CDN加载Vue库。当你开始使用时，你可能会切换到npm（这是Vue的[推荐安装方法]（https://vuejs.org/v2/guide/in...）），但CDN是最简单和最便携的方式。ajax
首先，让咱们跳到文档<body>。在这里，咱们有一个<div id =“sg1”>的元素。npm
<div id="sg1">
<p>{{ m1 }}</p>
</div>
Vue的核心是可以使用简单的模板语法以声明方式将数据呈现给DOM。数组
跳回到文档<head>，咱们看到一些代码在经过设置事件监听器加载DOM时触发。若是你来自jQuery世界，这就像$（document）.ready（）`,但在这里没有jQuery。babel
接下来，咱们有咱们的Vue代码，这里所作的就是设置“m1”的内容：
new Vue({
el: '#sg1',
// define data - initial display text
data: {
m1: "You got to let me know"
}
})
咱们从这里开始使用Vue（）函数建立一个新的Vue实例。有了这个，咱们传递它配置。在这里，咱们只在数据部分设置m1的初始值。 （稍后会详细介绍。）咱们还告诉它咱们想要使用哪一个元素，el：'＃sg1'相似于document.getElementById（'＃sg1'）。
当咱们运行它时，咱们获得：
这很简单，但不是颇有用。可是，它确实让咱们了解如何设置Vue应用程序。到目前为止，它看起来并无太大的不一样。可是这里发生了一些有趣的事情，咱们尚未看到。咱们将探讨下一个例子中的内容。
增长交互性
接下来，咱们添加一个按钮。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Clash</title>
<!-- the star of the show - the Vue library! -->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
// some data we'll use
var action = [ "Go", "Stay"];
var result = [ "It will be double", "There will be trouble" ];
// when life is settled, load up the fun stuff
document.addEventListener('DOMContentLoaded', function () {
new Vue({
el: '#sg1',
// define data - initial display text and set the text on the button
data: {
m1: "You got to let me know",
btext: action[0]
},
// define the methods - alternate between the two values
methods: {
staygo: function () {
var sel = ( this.btext == action[0] ) ? sel = 1 : sel = 0;
this.m1 = result[sel];
this.btext = action[sel];
}
}
})
})
</script>
</head>
<body>
<!-- text and the button -->
<div id="sg1">
<p>{{ m1 }}</p>
<p><button v-on:click="staygo">{{ btext }}</button></p>
</div>
</body>
</html>
在标记中，咱们添加了按钮。这是一个基本按钮，咱们经过附加调用staygo（）的侦听器定义了一个单击事件的动做，而且咱们为按钮文本设置了一个名为“btext”的占位符。
回到代码中，咱们在配置中添加了一个方法属性。在其中，咱们定义了staygo（）以匹配按钮中的那个。这是它变得有趣的地方。
methods: {
staygo: function () {
var sel = ( this.btext == action[0] ) ? sel = 1 : sel = 0;
this.m1 = result[sel];
this.btext = action[sel];
}
}
咱们还在数据区域添加了文本，为按钮提供了初始标签。在该方法中，咱们基本上看到按钮上的内容，而后在两行文本中的一行和两个按钮标签之一之间切换。
data: {
m1: "You got to let me know",
btext: action[0]
}
这里发生的有趣的事情是咱们如今已经连接了数据和DOM，咱们的应用程序是被动的。当咱们改变m1的值时，显示的文本被改变，当咱们改变btext的值时，按钮文本被改变。没有什么须要作的了。这也发生在咱们的第一个例子中，但咱们没有看到，由于咱们只是将文本留下了初始值。
咱们看到文字“You got to let me know”，按钮标有“go”。正如任何经典朋克的粉丝都知道的那样，若是你去“There will be trouble”而且文字也会为此改变。同时，决定留下来，咱们惟一的选择是“stay"”，咱们将按钮上的标签更改成“stay"”。
若是您如今单击“stay”，则文本将更改成“It will be double”。
你能够来回点击，而后决定你的文本显示。
添加Kendo UI组件
为了简单起见，我在这里使用了一个基本的下拉组件，但若是你想添加一个网格或图表或其余更复杂的组件，那么这个过程就大体相同了。此外，它有点长，因此我将列出下面每一个部分的添加内容，并在GitHub上列出完整的代码。
首先，咱们在标题中添加了一个部分，以引入Kendo UI样式，基本库和此组件的库：
<!-- load Kendo UI stylesheets --> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common.min.css"/> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.default.min.css"/> <!-- load Kendo UI libraries --> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script> <!-- load Kendo UI for Vue --> <script src="https://unpkg.com/@progress/kendo-dropdowns-vue-wrapper/dist/cdn/kendo-dropdowns-vue-wrapper.min.js"></script>
这包括组件的一些样式，咱们依赖的一些库，以及咱们将使用的实际组件的库。
咱们还在<body>部分添加了一个<div>元素。在这里，您会看到一些新文本以及<kendo-dropdownlist>元素：
<!-- second text and the DropDownList component -->
<div id="sg2" class="vue-app">
<p>{{ m2 }}</p>
<h4>Singer:</h4>
<kendo-dropdownlist :data-source="singerOptions"
:data-text-field="'text'"
:data-value-field="'value'"
@change="onChange">
</kendo-dropdownlist>
</div>
在这里，您能够看到咱们已经指定了实际标签的数据源（文本项数组），调用文本字段的内容，调用返回的值，最后咱们告诉它如何处理具体行动。在这种状况下，它是@change，它在选择被更改时触发（不只仅是选中，而是实际更改成其余选择）而且咱们已经定义了onChange（）。您能够触发许多其余事件，还能够设置大量其余参数来控制DropDownList组件的行为。有关这方面的更多信息，请查看DropDownList组件的文档。
如今，回到脚本，咱们为这个新部分添加了新代码：
new Vue({
el: "#sg2",
// data is the lyric line and the two options for the DropDownList component
data: {
m2: problem[0],
singerOptions: [
{ text: option[0], value: '0' },
{ text: option[1], value: '1' }
]
},
// and the method here just updates the text based on the singer selection
methods: {
onChange: function(e) {
this.m2 = problem[e.sender.value()];
}
}
})
咱们添加了两（2）个数据项：一个用于文本，“m2”，第二个是实际由DropDownList组件使用的数组。最后，咱们有一个方法，在DropDownList组件中更改选择时调用，该方法根据选择设置文本“m2”，与e.sender.value（）一块儿传递。
咱们的应用如今看起来像这样：
咱们仍然有原始的“hello，world”文本和按钮，但如今咱们也看到了新的词和下拉列表。若是咱们点击下拉菜单，咱们会获得两个选择：“Mick”或“Joe and Joe”。
在下拉菜单中选择不一样的选项，上面的文本也将相应的发生变化。
下一步
如今你已经看到了开始使用Vue是多么容易，下一步是什么？
在这个小例子以后你能够找到各类各样的方向。可是在这里你有一个实际的工做示例，交互性和全部链接的Kendo UI组件。若是您以前没有使用过Vue，那么这能够超越基本的“hello，world”示例，这些示例是须要确保你具有全部设置和工做的基础知识。从一个复杂的例子开始，历来没有什么帮助，由于当它不起做用时你一般不知道为何，这就是为何“你好，世界”的例子如此受欢迎。
那么接下来你能够学习些什么了？