前言

最近做了一些小项目,小组里写前端的确实有点拉胯,于是自己动手写前端,因为大一学过web前端基础,所以对HTML,CSS还有印象,就直接对JS下手了,学了两天把JS大致搞明白了,顺便对JQuery和Ajax都学了下,然后对之前的项目稍微改进了一下,自信心爆棚直接上框架Vue

Vue简介



(说真的我觉得这个logo是真好看)

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架;Vue 只关注视图层, 采用自底向上增量开发的设计;的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。简而言之,言而简之就是,Vue只关注视图层,在视图层上只关心数据,不用操作Dom节点就可以更新视图了(开发人员听了流下了感动的泪水),对后端学前端的程序员来说无疑是天大的福音!!!

Vue入坑

1.初始化Vue

说来简单,使用Vue只需要引入Vue.js

定义一个盒子: <div id="box"></div>

new一个Vue对象:var vm = new Vue({el: "#box"})

就可以在box中尽情的使用Vue了

2.插值

文本

数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值:

<p>{{ message }}</p>

html

使用 v-html 指令用于输出 html 代码:

<div v-html="message"></div>

属性

HTML 属性中的值使用 v-bind 指令

<div v-bind:class="{'use?'clas':''}> use为true使用clas样式,

v-bind:class 可简写为 :class

表达式

Vue.js 都提供了完全的 JavaScript 表达式支持

{{5+5}},{{handle()}},{{'ok'?'yes':'no'}}

指令

指令是带有 v- 前缀的特殊属性

<p v-if="seen">seen</p> v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素

<li v-for="item in items"></li> v-for指令基于一个数组渲染一个列表,它和JavaScript的遍历语法相似

<input v-model="message"> v-model指令来实现双向数据绑定,在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值

参数

参数在指令后以冒号指明

<a v-bind:href="url">hello world</a> 在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定

修饰符

修饰符是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定

<div id="center" @click.stop> 这里.stop就是修饰符,阻止冒泡

Vue入坑日记: day - 01的更多相关文章

  1. oracle入坑日记<六>自增列创建和清除(含序列和触发器的基础用法)

    0   前言 用过 SQLserver 和 MySQL 的自增列(auto_increment),然而 Oracle 在建表设置列时却没有自增列. 查阅资料后发现 Oracle 的自增列需要手动编写. ...

  2. oracle入坑日记<四>表空间

    1   表空间是什么 1.1.数据表看做的货品,表空间就是存放货品的仓库.SQLserver 用户可以把表空间看做 SQLserver 中的数据库. 1.2.引用[日记二]的总结来解释表空间. 一个数 ...

  3. oracle入坑日记<三>用户详解(角色理解)

    1   用户是什么 1.1.权限管理是Oracle的精华,不同用户登录到同一数据库中,可能看到不同数量的表,拥有不同的权限.Oracle 的权限分为系统权限和数据对象权限,共一百多种.如果把Oracl ...

  4. oracle入坑日记<二>认识oracle(含sqlplus基础使用)

    1.SID(数据库实例) 1.1. oracle安装的时候有一项叫[全局数据库名]的填写项,这个就是oracle的SID也是数据库的唯一标识符: 1.2.一个oracle数据库有且只有一个SID(一般 ...

  5. oracle入坑日记<一> 安装

    学习日记系列(前辈/大神勿喷) 一.下载 下载地址:http://www.oracle.com/technetwork/cn/database/enterprise-edition/downloads ...

  6. oracle入坑日记<五>数据表

    1   数据表 1.1.数据表是存放数据字段信息的地方:在Oracle,数据表拥有者单位是用户,同时数据表属于表空间.如: 登录my_user用户在orcl表空间下创建的表就是 my_user用户在o ...

  7. Vue入坑教程(二)——项目结构详情介绍

    之前已经介绍了关于Vue的脚手架vue-cli的安装,以及一些文件目录介绍.具体可以查看<vue 入坑教程(一)--搭建vue-cli脚手架> 下面简单说一下具体的文件介绍 (一) pac ...

  8. Vue入坑第一篇

    写在前面的话:文章是个人学习过程中的总结,为方便以后回头在学习.文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. 一.前言 本篇作为vue入门的一 ...

  9. cozmo 入坑日记及开发环境搭建

    前几日,朋友在群里发了一个机器人的小视频,视频里机器人可以对话,可以推箱子,开心以后会哈哈大笑,非常有趣. 详细了解里一下,这是个叫 cozmo 的智能机器人,可以配合 SDK 用 python 编程 ...

随机推荐

  1. java的三大特性----封装、集成、多态

    当我们被问到你对java的封装.继承.多态是什么看法的时候,你会想到什么? 想到的会不会是封装就是将类的成员属性用privet修饰一下,达到私有化的目的,只暴露方法,从而达到成员变量私有化的目的. 而 ...

  2. 10、mysql的调优

    mysql的调优 调优的最终目的:节省系统资源.提高响应速度下面从6个维度对mysql进行优化. 第一步:对服务器的参数进行调优 通过show profile命令分析,如果sql语句在执行过程中等待时 ...

  3. 云原生入门 第五章:kubernetes学习实践

    1. 简介 在本章中,我们将学习不同的Kubernetes对象,它们的用途以及如何与它们交互. 在设置集群或使用现有集群之后,我们可以开始部署一些工作负载.Kubernetes中最小的计算单元不是一个 ...

  4. ArcMap操作随记(7)

    1.栅格分辨率调整 [重采样] 2.点集数据对插值模型精度检验 test数据→[子集要素](地统计分析)→train→[插值]→[多值提取至点]→[字段计算器](Abs([value]-[spline ...

  5. centos 在线安装 docker

    镜像下载.域名解析.时间同步请点击 阿里巴巴开源镜像站 在新主机上首次安装Docker Engine之前,需要设置Docker存储库.之后,您可以从存储库安装和更新Docker. 设置存储库 安装yu ...

  6. kernel热补丁

    kernel正在运行的函数,如何实现地址替换的,高并发情况下,如何打热补丁

  7. [SPDK/NVMe存储技术分析]013 - libibverbs API应用案例分析

    本文是对论文Dissecting a Small InfiniBand Application Using the Verbs API所做的中英文对照翻译 Dissecting a Small Inf ...

  8. docker学习笔记(4)- 应用数据管理(容器外)

    简介 docker storage driver支持了image分层存储和容器可写层的存储管理,使用挂载主机目录的方式可以将数据存储在主机的文件系统上或内存中. 之前学习过镜像的分层存储,以Docke ...

  9. ESP8266 NodeMCU引脚说明,CH340和CP2102两款

    开发ESP8266 NodeMCU GPIO功能时,虽然知道ESP8266 NodeMCU丝印引脚编号如下图所示(CP2102款),但是和实际对应的GPIO编号完全不一样.   CP2102款 引脚说 ...

  10. C# 将CSV转为Excel

    CSV(Comma Separated Values)文件是一种纯文本文件,包含用逗号分隔的数据,常用于将数据从一个应用程序导入或导出到另一个应用程序.通过将CSV文件转为EXCEL,可执行更多关于数 ...