[01][创新实训记录]Vue学习笔记(夯实基础)

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在某些时候可以使用简写@符号
这里需要学习一下

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值