すでにHTML、CSSおよびJavaScriptに関する知識を知っていると仮定します。
3.1開始
.htmlのファイルを作成し、それまでのVueを導入しました：
<スクリプトSRC = "
https://cdn.jsdelivr.net/npm/vue/dist/vue.js
"> </ SCRIPT>
3.2宣言レンダリング
Vue.jsコア：
<DIV ID = "アプリ">
{{メッセージ}}
</ div>
したアプリ=新しいヴュー（{
「#app」
データ：{
メッセージ： 'こんにちはVueの！'
}
}）
バインディング要素：
<DIV ID = "APP-2">
<スパンV-バインド：タイトル= "メッセージ">
ここでの動的バインディングメッセージを表示するには、数秒間ホバー！
</ span>の
</ div>
=新しいVueのを（{APP2ました
'＃アプリ-2'、
データ：{
メッセージ： 'ページロード' +新しいDate（）のtoLocaleString（）。
}
}）
条件およびサイクル3.3
スイッチング素子の表示制御です。
<DIV ID = "APP-3">
<=は "見た" P場合は、V->今、あなたは私を見る</ P>
</ div>
VaRのAPP3 =新しいビュー（{
'＃アプリ-3'、
データ：{
見：真
}
}）
項目のリストをレンダリングするために、V-のための指示データ配列バインドすることができます。
<DIV ID = "APP-4">
<OL>
<LIのV-用= "TODOでドス">
{{}} todo.text
</ LI>
</ OL>
</ div>
=新しいVueのを（{APP4ました
'＃アプリ-4'、
データ：{
すべての[
{テキスト： 'ラーニングHTML'}、
{テキスト： '学習CSS'}、
{テキスト： '学習のJavaScript'}
]
}
}）
3.4は、ユーザー入力を処理します
V-上の命令でイベントリスナーを追加します：
<DIV ID = "APP-5">
<P> {{メッセージ}} </ P>
<ボタンVオン：= "reverseMessage" をクリック>リバースメッセージ</ボタン>
</ div>
=新しいVueのを（{APP5ました
'＃アプリ-5'、
データ：{
メッセージ： 'こんにちはVue.js！'
}、
方法：{
reverseMessage：関数（）{
this.message = this.message.split（ ''）。（逆）。ジョイン（ ''）
}
}
}）
双方向入力及びvモデル指示アプリケーション状態間の結合を形成します。
<DIV ID = "APP-6">
<P> {{メッセージ}} </ P>
<入力Vモデル=「メッセージ」>
</ div>
VaRのAPP6 =新しいビュー（{
'＃アプリ-6'、
データ：{
メッセージ： 'こんにちはVueの！'
}
}）
3.5建設アセンブリのアプリケーション
システムの構成要素は、私たちは一般的に、小さな独立した再利用可能なコンポーネントを使用する大規模なアプリケーションを構築することができます：
Vueの中でコンポーネントを登録：
// TODOの項目と呼ばれる新しいコンポーネントを定義します
Vue.component（ 'TODO項目'、{
テンプレート： '<李>これは</ LI>に-Do項目です'
}）
別のコンポーネントのテンプレートを構築するためにそれを使用します。
<OL>
<！ - TODO項目コンポーネントのインスタンスを作成します - >
<TODO項目> </ TODO項目>
</ OL>
それは小道具を受け入れることができるように、コンポーネントの定義を修正：
Vue.component（ 'TODO項目'、{
// TODO項目のコンポーネントは、現在受け入れ
//カスタム属性と同様に、「小道具」。
// TODOという名前のこの小道具。
小道具：[ 'すべて']、
テンプレート： '<LI> {{todo.text}} </ LI>'
}）
各成分送信アイテムの出力V-結合今後の命令サイクルを使用して：
<DIV ID = "APP-7">
<OL>
<!--
现在我们为每个 todo-item 提供 todo 对象
todo 对象是变量，即其内容可以是动态的。
我们也需要为每个组件提供一个“key”，稍后再
作详细解释。
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它' }
]
}
})
组件的应用模板：
<div id="app">
<app-nav></app-nav>
<app-view>
<app-sidebar></app-sidebar>
<app-content></app-content>
</app-view>
</div>
完整代码：
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="
https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转消息</button>
</div>
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
<div id="app-7">
<ol>
<!-- 创建一个 todo-item 组件的实例 -->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 HTML' },
{ text: '学习 CSS ' },
{ text: '学习 JavaScript' }
]
}
})
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它' }
]
}
})
</script>
</body>
</html>
：ビデオチュートリアル見てようこそhttps://ke.qq.com/course/432961?tuin=36914f34を疑問に、QQチャットディスカッショングループ665714453を追加してください場合は、。