入門
自分自身の学習のVueこの一連の記録処理。
Vueの公式はのために推奨されません直接、初心者vue-cli
これらの日が基づいているフロントので、公式ドキュメントを学習します。
ステップ
新しい作成し
html
たファイルを。HTMLでvue.js依存性をご紹介します。
<head> <meta charset="utf-8"> <title>firstvue</title> <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 生产环境版本,优化了尺寸和速度 --> <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> --> </head>
今、あなたは公式の輝かしい例を学ぶことができます。
例
宣言型のレンダリング
DOM確立とデータ協会、JSのデータの値を変更し、DOMが変更されます。
こんにちは見ます
<div id="app"> {{ message }} </div>
JSコード:
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
V-バインドコマンド1にある:数秒間マウスは、プロンプトがあるでしょう。
<div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息! </span> </div>
JSコード:
var app2 = new Vue({ el: '#app-2', data: { message: '页面加载于 ' + new Date().toLocaleString() } })
条件循環
制御要素は使用して表示され
v-if
、見られた値を表示するかどうかを判断します。<div id="app-3"> <p v-if="seen">现在你看到我了</p> </div>
JSコード:
var app3 = new Vue({ el: "#app-3", data: { seen: true } })
リサイクル
v-for
、コンソールのタイプapp4.todos.push({text: 'push text'})
、リスト項目を追加します<div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div>
JSコード:
var app4 = new Vue({ el: "#app-4", data: { todos: [ { text: '学习Vue' }, { text: '整个项目' }, { text: '完成毕设' } ] } })
プロセスのユーザ入力
v-on
イベントリスナーを追加するためのコマンド
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转消息</button>
</div>
JSコード:
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function(){
this.message = this.message.split('').reverse().join('')
}
}
})
v-model
入力および申込書の状態の間の結合を簡単に。
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
JSコード:
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
コンポーネントベースのアプリケーションビルダー
それは、抽象化である私たちは、小さな独立し、一般的に使用することができますので、システムの構成要素は、他の重要な概念のVueで再利用可能な大規模なアプリケーションを構築するためのコンポーネントを。
<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>
JSコード:
Vue.component('todo-item', {
// todo-item 组件现在接受一个
// "prop",类似与一个自定义特性。
// 这个prop 名为todo。
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>
ソースのダウンロード
https://www.lanzous.com/b00t79wkd
密码:Vue01
コメント
エル:divのIDに対応します
データ:データストレージ
方法:保管方法
命令は特別な特性のVue、プリフィックス命令によって提供される
v-
。↩