1、Vue第一个实例：Hello Vue.js! el指向html元素
<！DOCTYPE html>
<html>
<head>
<meta charset =“utf-8”>
<title> Hello Vue.js!</ title>
<script src =“https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js”> </ script>
</ head>
<body>
<div id =“app”>
<P> {{message}} </ P>
</ div>
<script>
new Vue（{
el：'＃app'，
data：{
message：'Hello Vue.js！'
}
}）
</ script>
</ body>
</ html>
2、Vue第二个实例：双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>双向数据绑定</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<input v-model="message">
<!--用户更新了view,MVVM框架自动更新model的状态-->
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Fighting yao!'
}
})
</script>
</body>
</html>
3、Vue第三个实例：渲染列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>渲染列表</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
todos: [{
text: 'Learn JavaScript'
}, {
text: 'Learn Vue.js'
}, {
text: 'Build Something Awesome'
}]
}
})
</script>
</body>
</html>
结果：
4、Vue第四个实例：处理用户输入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>处理用户输入</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>
{{message}}
</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function() {
this.message = this.message.split('').reverse().join()
}
}
})
</script>
</body>
</html>
结果：
5、Vue第四个实例：添加一些待办事项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>改变待办事项</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>
<div id="app">
<input v-model="newTodo" v-on:keyup.enter="addTodo">
<ul>
<li v-for="todo in todos">
<span>
{{todo.text}}
</span>
<button v-on:click="removeTodo($index)">X</button>
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
newTodo: '',
todos: [{
text: 'Add some todos'
}]
},
methods: {
addTodo: function() {
var text = this.newTodo.trim()
if (text) {
this.todos.push({
text: text
})
this.newTodo = ''
}
}
}
})
</script>
</body>
</html>
结果：
334
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
