声明式渲染
<h2>示例1：声明式渲染h2>
<div id="app">
{{ message }}
div>
复制代码
var app = new Vue({
el: "#app",
data: {
message: 'hello Vue!'
}
})
复制代码
属性绑定
<h2>示例2：属性绑定h2>
<div id="app2">
<span v-bind:title='message'>鼠标悬停几秒钟查看自处动态绑定的提示信息！span>
div>
复制代码
var app2 = new Vue({
el: "#app2",
data: {
message: '页面加载于' + new Date().toLocaleString()
}
})
复制代码
条件
<h2>示例3：条件h2>
<div id="app3">
<p v-if='seen'>现在你看到我了p>
div>
复制代码
var app3 = new Vue({
el: '#app3',
data: {
seen: true
}
})
复制代码
循环
<h2>示例4：循环h2>
<div id="app4">
<ol>
<li v-for="todo in todos">{{ todo.text }}li>
ol>
div>
复制代码
var app4 = new Vue({
el: '#app4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})
复制代码
处理用户输入1
<h2>示例5：处理用户输入1h2>
<div id="app5">
<p>{{ message }}p>
<button v-on:click="reverseMessage">逆转消息button>
div>
复制代码
var app5 = new Vue({
el: '#app5',
data: {
message: 'hello,Vue'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
复制代码
处理用户输入2
<h2>示例6：处理用户输入2h2>
<div id="app6">
<p>{{ message }}p>
<input v-model="message">
div>
复制代码
var app6 = new Vue({
el: '#app6',
data: {
message: 'Hello,Vue'
}
})
复制代码
组件化构建应用
<h2>示例7：组件化构建应用h2>
<div id="app7">
<ol>
<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: `{{ todo.text }}`
})
var app7 = new Vue({
el: '#app7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
})
复制代码
