Vue.js学习笔记
本学习笔记是跟随Vue.js官方文档进行学习的笔记。夯实一下基础。
Vue.js是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
安装
vuejs在nodejs下只需要一个全局安装命令
npm install -g @vue/cli
这里就不对nodejs的安装与node_global和node_modules的配置进行过多赘述了,网上的教程十分详细,只需要确保npm可用即可,如果感觉速度不理想可以选择安装cnpm(淘宝镜像)
起步学习
声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
这样子就会渲染出来Hello Vue!的界面
如何理解vue文件的构成
<template>
···
</template>
<script>
export default {
data(){
},
}
</script>
<style>
···
</style>
其实我们不难发现,其中三个组件组成了一个vue文件,而这三个组件分别是
<template></template>
里面我们可以理解成就是html的内容,是来用于组成页面组件的,但与html
不同的是,我们只能有一个div组件,并且div组件将其他组件包含其中。如果出现多个组件并列放在template中是不正确的,我们需要使用<div></div>
将他们包裹起来
<script></script>
这里就像是我们通俗理解的javascript,存放数据和函数处理的地方
<style></style>
style包裹的,就是我们通俗理解的css,用来渲染页面样式的
条件与循环的书写
条件:
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
条件渲染通过组件中的v-if
来进行判断,true则渲染,false则不渲染
循环:
有的时候,我们会根据接口信息来循环渲染一个组件,例如一个展示数据的表格,由于接口的数据个数是不定的,我们不可能实现写好一定数量行数的表格,因此我们就需要通过循环来实现这一需求。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: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})
最终渲染的效果就是:
处理用户输入
为了让用户与应用交互,可以在v-on
至零添加一个事件监听器。有以下的几个事件
1. onClick
2. onEnter
3. onOut
4. onSubmit
5. onKeyup
v-on
在某些时候可以使用简写@
符号
这里需要学习一下