基本的な文法学習のVue
のコンポーネントのVueを
Vueの-CLIの使用
1、反応プログラミングVue2.0バージョン使用して実装
ドムの直接操作との違いを理解するために図2に示すように、Vueのプログラミングパラダイムを
Vueの共通の基本的な文法3、。
、4 Vueのtodolistの機能を使用して調製し
、成分の例5を、何のVueである
6、Vue- CLI足場ツール使用
7が、ファイルコンポーネント、グローバルスタイルや地元のスタイルを
Vueのインスタンスを作成する方法：
直に
生産リリースを開発
CDNの形式を使用します
<body>
<div id="root">hello world {{msg}}</div>
<script>
new Vue({
el: '#root',
data: {
msg: 'hello world'
}
})
</script>
</body>
マウントポイント、テンプレート、例
Vueのインスタンスは、ポイントをマウントします：
<div id="root">hello world {{msg}}</div>
Vueのインスタンスデータ、イベント、メソッド：
補間式：
<body>
<div id="root">
<h1>{{number}}</h1>
<h1 v-text="number"></h1>
<h1 v-html="number"></h1>
<div v-on:click="helloClick">{{content}}</div>
<div @click="helloClick">{{content}}</div>
</div>
<script>
new Vue({
el: '#root',
data: {
msg: 'world',
number: 123,
content: 'hello'
},
methods: {
helloClick: function() {
alert(123)
this.content = 'world'
}
}
})
</script>
</body>
反応し、角度、Vueのハイブリッド
プロパティをバインドし、双方向のデータバインディング：
<input v-model="content"/>
<div>{{content}}</div>
そして、リスナーのプロパティの計算
<div id="root">
<input v-model="firstName">
<input v-model="lastName"/>
<div> {{firstName}} {{lastName}} </div>
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
<script>
new Vue({
el: '#root',
data: {
firstName: '',
lastName: '',
count: 0
},
computed: {
fullName: function() {
return this.firstName + ' ' + this.lastName
}
},
watch: {
firstName: function() {
this.count ++
},
lastName: function() {
this.count ++
},
fullName: function() {
this.count ++
}
})
</script>
V-場合、V-ショー、V-用
V-ショーは再作成を破壊しない、非表示になります
キー値は、効率を高めるために添加することができます
<ul>
<li v-for="item of list" :key="item">{{item}}</li>
</ul>
<li v-for="(item, index) of list" :key="index">{{item}}</li>
V-場合の制御有無
V-ショーかどうかは、表示を制御します
todolistの機能の開発：
<body>
<div id="root">
<div>
<input v-model="inputValue" />
<button @click="handleSubmit">提交</button>
</div>
<ul>
<li v-for="(item, index) of list" :key="index">
{{item}}
</li>
</ul>
</div>
<script>
new Vue({
el: '#root',
data: {
inputValue: 'hello'
list: []
},
methods: {
handleSubmit: function() {
this.list.push(this.inputValue)
this.inputValue = ''
}
}
})
</script>
template模板
<ul>
<todo-item v-for="(item, index) of list" :key="index" :content="item"></todo-item>
</ul>
<script>
// 定义组件 全局组件
Vue.component('todo-item', {
props: ['content'],
template: '<li>{{content}}</li>'
})
// 局部组件
var TodoItem = {
template: '<li>item</li>'
}
new Vue({
el； ‘#root’,
components: {
'todo-item': TodoItem
},
data: {
inputValue: '',
list: []
},
</script>
[画像の外側リンク障害（IMG-aYpEjoQ1-1562216687021を）ダンプ（https://upload-images.jianshu.io/upload_images/11158618-0611be5748ad2700.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240）]
そして、コンポーネントインスタンス間の関係：
Vue.component('todo-item', {
props: ['content'],
template: '<li @click="handleClick">{{content}}</li>',
methods: {
handleClick: function() {
alert('clicked')
}
}
})
機能を削除しtodolistの：
親指ください！あなたの励ましは、私の文章の最大の力ですので！
送風力交換基：711613774