1-1 Installation Tools
It must first of its profits, while using Vue, recommended to install on the browser Vue Devtools . You can better debug Vue applications.
vue can directly reference the latest version <script src="https://cdn.jsdelivr.net/npm/vue"></script>
can be downloaded to the local vue.js
#### 1-2hello world
of international conventions first to a hello world source
<div id="app">{{message}}</div>
var app = new Vue({
el: '#app',
data:{
message:'hello Vue!'
}
})
Examples of objects comprising three parts
- Examples of objects vue: new Vue
- el: element needs to be acquired element is always the root of the container element html
- data: for storing data, an object is, various data can be stored inside
#### 1-3 binding (v-bind)
the text except as interpolation hello world, we can also be such binding element characteristics Source
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span>
</div>
var app2 = new Vue({
el:'#app-2',
data:{
message: '页面加载于' + new Date().toLocaleString()
}
})
#### 1-4 cycle conditions (v-if v-for)
source
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
In the console input app3.seen = false
before displaying the message will disappear, and this shows that we not only can bind data to text or DOM feature can also be bound to the DOM structure
Source
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
In the console, enter the app4.todos.push({ text: 'new item' })
table and finally add a.
#### 1-5 event binding (v-on) and two-way data binding (v-model)
source
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
In reverseMessage method, we updated the status of the application, but did not touch DOM-- all DOM manipulation by Vue to deal with, our code can only be concerned with logic level
Vue also offers a v-model instruction, it can easily form a two-way binding between input and application state. Source
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})