Vue基本功能
表单绑定
-
用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定
- 它会根据控件类型自动选取正确的方法来更新元素
- 通过 JavaScript 在组件的 data 选项中声明初始值
-
文本
-
多行文本
-
model 指令的作用是将 input 元素 value 属性的值和创建的 Vue 对象中 value 的值 进行绑定
- Vue 将这个值绑定后，在 input 中引起的 value 值变化就会实时反映到关联的 Vue 对象，所以引用的 {{ value }} 也会跟着变化
body当中使用v-model
<div id="app">
<input type="text" v-model="value" />
<div>value的值是：{{ value }}</div>
</div>
- vue对象data属性指定元素
<script>
var app = new Vue({
el: '#app',
data: function(){
return {value: ""}
}
})
</script>
事件绑定
- body中使用v-on指令
<div id="app">
...
<input type="button" value="发送" v-on:click="send" />
</div>
- VUE对象中增加methods
var app = new Vue({
...
methods:{
send: function(){
alert("发送成功!")
this.value = ''
}
}
})
计算属性
-
对于任何复杂逻辑，你都应当使用计算属性
-
Vue 还可以根据绑定的数据做计算，然后引用计算的结果
- 假设想实时统计输入的字数，可以在 Vue 对象里加上对 value 长度的计算值
-
计算属性申明到 computed 对象里，这个对象的键是计算的结果，值是计算函数，这里计算了 value 的长度
- 可以使用 this.count 引用计算结果，也可以在关联的模板中直接引用，和绑定的数据value的用法非常类似
div标签指定绑定变量
<div id="app">
...
<div>字数：{{ count }}</div>
</div>
- 实现computed对象，增加count属性
var app = new Vue({
...
computed:{ //计算属性
count: function(){
return this.value.length
}
}
})
样式绑定
- vue还可以动态地帮为元素绑定样式（class 属性）
- 实现： input 中没有任何值输入，即 value 的值为空时，input 的边框为红色以提醒用户没有内容
- 首先写一个简单的样式，样式通常写到 head 标签里，用 style 包裹
- 然后将这个 empty 用于 input 的 class 属性，浏览器就会渲染对应的样式
- vue会根据 empty 后的表达式 !count 的真假来判断 class 的值是否为 empty，如果为真（即 count = 0 的情况），则 class 的值为 empty，否则为空
- 实现： input 中没有任何值输入，即 value 的值为空时，input 的边框为红色以提醒用户没有内容
- head中添加style
<head>
...
<style>
.empty {
border-color: red;
}
</style>
</head>
- 使用v-bind绑定样式
<input type="text" v-bind:class="{empty: !count}" v-model="value" />
功能01：methods增加判断
methods:{
send: function(){
if(!this.count){
alert("请输入内容！")
return
}
...
}
},
功能02：条件渲染
- v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染
<h1 v-if="awesome">Vue is awesome!</h1>
- v-else
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>
v-else-if，顾名思义，充当 v-if 的“else-if 块”
-
用 key 管理可复用的元素
-
这两个元素是完全独立的，不要复用它们
-
这两个元素是完全独立的，不要复用它们
条件渲染
<div id="app">
...
<div v-if="count">value的值是：{{ value }}</div>
</div>
count非零的时候为真
项目实战
显示TODOS
- 创建vue对象，指定data对象
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
var app = new Vue({
el: '#todo-app',
data: function(){
return {
todos:[
{id:0, title:'学习vue'},
{id:1, title:'工作汇报'},
]
}
}
})
</script>
- 修改li标签，使用v-for指令
<ul>
<li v-for="todo in todos" :key='todo.id'>
<span>{{ todo.title }}</span>
...
</li>
添加TODO
- 实现 addTodo 方法
- 方法声明在 Vue 对象的 methods 属性里
- 生成一个新的 todo 对象，然后将其添加到 todos 列表里（使用push 方法把一个元素加入到数组的末尾），然后将用户的输入值清空
- 注意 newTodoTitle 和输入框的 value 值是双向绑定的，任何一个值改变，相应的值都会跟着变
- 生成一个新的 todo 对象，然后将其添加到 todos 列表里（使用push 方法把一个元素加入到数组的末尾），然后将用户的输入值清空
- 方法声明在 Vue 对象的 methods 属性里
- input输入
- 双向绑定，获取用户输入
- 绑定回车事件，调用函数
<input type="text" placeholder="添加 todo" v-model="newTodoTitle"
@keyup.enter="addTodo"/>
- vue对象，添加methods
<script>
let id = 0
var app = new Vue({
...
data: function(){
return {
todos:[],
newTodoTitle:'',
}
},
methods:{
addTodo:function(){
this.todos.push({id: id++, title: this.newTodoTitle})
this.newTodoTitle = ''
}
}
})
功能03
methods:{
addTodo:function(){
if (this.newTodoTitle === ''){
return
}
...
功能04
- 增加样式
...
<style>
...
.empty {
border-color: red;
}
...
- 修改用户输入input
<div id="todo-app">
<div>
...
<input type="text" v-bind:class="{empty: emptyCheck}"
placeholder="添加 todo" v-model="newTodoTitle"
@keyup.enter="addTodo"/>
<span v-if="emptyCheck" class="selected">请输入内容！</span>
...
- Vue对象，增加emptyCheck计算属性，checkEmpty
<script>
let id = 0
var app = new Vue({
el: '#todo-app',
data: function(){
return {
...
checkEmpty: false,
...
methods:{
addTodo:function(){
if (this.newTodoTitle === ''){
this.checkEmpty = true;
return
}
...
this.checkEmpty = false;
}
},
computed:{ //计算属性
emptyCheck: function(){
return this.newTodoTitle.length === 0 && this.checkEmpty
}
}
...
