VueJS2.0学习教程 - 1 - 双向绑定|V-指令
2017-10-13 本文已影响36人
李颖轩_LiYingxuan
为了方便记忆和学习，整理了一下之前学习VueJS的要点，并通过在中的代码注释来阐述知识点。
知识点叙述在代码最下方。
需要自行下载VueJS和bootstrap.css文件，并修改文件名或修改代码中引用的名称和路径：
vue-2.4.4.js 下载开发版本
bootstarp-3.3.7-flatly.min.css 下载flatly皮肤的bootstarp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Tutorial Lesson - 01</title>
<link rel="stylesheet" href="css/bootstarp-3.3.7-flatly.min.css"> <!-- 引入bootstrap - CSS前端框架，这里用了bootswatch.com的皮肤 -->
</head>
<body>
<!-- Bootstrap的部分不用关注，只是基础样式 -->
<div class="navbar navbar-default navbar-static-top"></div>
<div class="container" id="app"> <!-- 这里的ID是用来提供Vue操作的 -->
<div class="row">
<!-- 数据双向绑定演示 -->
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">数据双向绑定</div>
<div class="panel-body">
<h4>{{message}}</h4>
<input type="text" class="form-control" v-model="message"> <!-- v-model绑定的数据改变时，上面的数据也会同步 -->
</div>
</div>
</div>
<!-- 数组数据输出演示 -->
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">数组循环输出</div>
<div class="panel-body">
<h4>My Todos</h4>
<!-- 显示数组数据 -->
<ul class="list-group">
<li class="list-group-item" v-for="todo in todos">{{todo.title}}</li>
</ul>
</div>
</div>
</div>
<!-- 数组数据操作和动态显示，事件的监听和绑定等 -->
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">数组增加、删除；事件监听、绑定、修饰符</div>
<div class="panel-body">
<h4>My Todos {{todoCount}}</h4>
<!-- 显示数组数据 -->
<ul class="list-group">
<!-- 把index输出，是为了提供删除使用 -->
<li class="list-group-item" v-for="(todo,index) in todos">
{{todo.title}}
<button class="btn btn-warning btn-xs pull-right" v-on:click="delTodo(index)">Delete</button>
</li>
</ul>
<!-- 增加数组数据 -->
<form v-on:submit.prevent="addTodo(newTodo)"> <!-- 事件绑定；prevent是用来阻止form的默认提交行为 -->
<div class="from-group">
<input type="text" v-model="newTodo.title" class="form-control" placeholder="Add a new todo">
</div>
<div class="from-group">
<button class="btn btn-success" type="submit">Add Todo</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="js/vue-2.4.4.js"></script> <!-- 引入Vue - 渐进式JavaScript前端框架 -->
<script>
new Vue({
el: '#app', // 决定VueJS起作用的区域
data: { // 基础数据和变量
message: '数据双向绑定演示，请在改变输入框中的文字。',
todos: [
{id: 1, title: '1. Learn VueJS'},
{id: 2, title: '2. Coding'}
],
newTodo: {id: null, title: ''}
},
computed: { // 页面中需要处理之后展示的数据，统一放这里
todoCount() {
return this.todos.length
}
},
methods: { // 逻辑方法
// 注意：这里使用了ES6的语法，如果IDE报错，请设置一下
// WebStorm设置方法：Preferences > Languages & Frameworks > JavaScript > ECMAScript 6
addTodo(newTodo) {
this.todos.push(newTodo)
this.newTodo = {id: null, title: ''}
},
delTodo(index) {
this.todos.splice(index, 1)
}
}
})
</script>
<script>
/**************************************************************************
* 【第一课时知识点】
*
* JS区域知识点：
* new Vue el 指定VueJS作用域
* data 数据和变量
* computed 放置需要处理之后再展示的数据
* methods js方法
*
* HTML区域知识点：
* {{}} 双括号直接输入数据
* v-model 数据绑定
* v-for 数据循环
* v-on 事件绑定指令
* v-on:click v-on:submit 监听的事件
* v-on:submit.prevent 其中.prevent是修饰符，用于告诉对触发的事件调用
*************************************************************************/
</script>
</body>
</html>
效果图：
lesson01.png
End.
