版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdkyxy2013/article/details/91490079
本博客记录了小编在学习Vue过程中的体会与感悟,简单来说就是小编的学习笔记,学习地址主要为Vue的官网,官网地址为:《Vue官方文档》。相关学习笔记会记录在我的博客专栏《前端Vue》中,欢迎大家关注~
1、声明式渲染
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
})
输出为:
Hello World!
除了文本插值,我们还可以像下面这样来绑定元素特性:
<div id="app-2">
<span v-bind:title="message">
显示绑定的信息!
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
此时输出的结果,将鼠标放置于span标签的文字上,会显示页面的加载时间信息。
2、条件与循环
下面例子控制显示一个元素:
<div id="app-3">
<p v-if="seen">Look at me</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
当seen=false时,Look at me就会消失。
v-for可以绑定一个数组的数据来渲染一个列表:
<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: 'xzw' },
{ text: 'gdk' },
{ text: 'yxy' }
]
}
})
结果为:
3、处理用户输入
可以使用v-on添加一个事件监听器,以达到用户和应用进行交互的目的。
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
点击“逆转消息”的按钮,可以实现信息的逆转。
Vue还提供了v-model指令,它能轻松实现表单输入和应用状态之间的双向绑定。
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
当该表输入框中的内容,p标签中的内容会一起改变
4、组件化应用构建
使用v-bind指令将待办项传到循环输出的每个组件中:
<div id="app-7">
<ol>
<!--
现在我们为每个 todo-item 提供 todo 对象
todo 对象是变量,即其内容可以是动态的。
我们也需要为每个组件提供一个“key”,稍后再
作详细解释。
-->
<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: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: 'aaa' },
{ id: 1, text: 'bbb' },
{ id: 2, text: 'ccc' }
]
}
})
输出结果为: