一小时复习

vue.js是一个JavaScriptmvvm库，是以数据驱动和组件化的思想构建的，相比angular.js，vue.js提供了更加简洁，更加容易理解的api,如果习惯了jquery操作dom。

学习vue.js，抛开手动操作dom的思维，因为vue.js是数据驱动的，你无需手动操作dom。

MVVM模式（Model-View-ViewModel）

view model是一个vue.js实例。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<div id="app">

{{message}}

</div>

</body>

<script src="js/vue.js"></script>

<script>

// 这是我们的model

var exampleData = {

  message: 'Hello World!'

}

new Vue({

el: '#app',

data: exampleData

})

</script>

</html>

实现了双向绑定

v-model指令在表单元素上创建双向数据绑定

<div id="app">

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

<input type="text" v-model="message"/>

</div>

常用指令

v-if指令-根据表达式的真假来删除和插入元素

v-show指令-始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性

v-else指令

v-for指令

<div id="app">

<table>

<thead>

<tr>

<th></th>

<th></th>

<th></th>

<tr>

</thead>

<tbody>

<tr v-for="item in items">

<td>{{ item.id }}</td>

</tr>

</tbody>

</table>

v-bind指令

<li v-for="n in pageCount">

<a href="javascript:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : '' ">{{ n+1 }}</a>

</li>

v-on指令

v-on指令用于给监听DOM事件

@click="deletePerson($index)"

@click="createPerson"

<div class="form-group">

<label>Sex:</label>

<select v-model="newPerson.sex">

<option value="Male">Male</option>

<option value="Female">Female</option>

</select>

</div>

请点赞！因为你的鼓励是我写作的最大动力！

吹逼交流群：711613774

（13）打鸡儿教你Vue.js的更多相关文章

  1. （10）打鸡儿教你Vue.js

    事件处理器 <div id="app"> <button v-on:click="counter += 1">增加 1</butt ...

  2. （2）打鸡儿教你Vue.js

    var obj = {} Object.defineProperty(obj, 'msg', { // 设置 obj.msg = "1" 时set方法会被系统调用 参数分别是设置后 ...

  3. （29）打鸡儿教你Vue.js

    web阅读器开发 epub格式的解析原理 Vue.js+epub.js实现一个简单的阅读器 实现阅读器的基础功能 字号选择,背景颜色 有上一页,下一页的功能 设置字号,切换主题,进度按钮 电子书目录 ...

  4. （26）打鸡儿教你Vue.js

    weex框架的使用 1.weex开发入门 2.weex开发环境搭建 3.掌握部分weex组件模块 4.了解一些vue基本常见语法 5.制作一个接近原生应用体验的app weex介绍 安装开发环境 We ...

  5. （22）打鸡儿教你Vue.js

    vue.js 单页面,多页面 Vue cli工具 复杂单页面应用Vue cli工具 交互设计,逻辑设计,接口设计 代码实现,线上测试 git clone,git int 创建分支,推送分支,合并分支 ...

  6. （21）打鸡儿教你Vue.js

    组件化思想: 组件化实现功能模块的复用 高执行效率 开发单页面复杂应用 组件状态管理(vuex) 多组件的混合使用 vue-router 代码规范 vue-router <template> ...

  7. （19）打鸡儿教你Vue.js

    了解vue2.x的核心技术 建立前端组件化的思想 常用的vue语法 vue-router,vuex,vue-cli 使用vue-cli工具 Vue框架常用知识点 vue核心技术 集成Vue 重点看,重 ...

  8. （18）打鸡儿教你Vue.js

    介绍一下怎么安装Vue.js vue.js Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性. Vue.js是一个渐进的,可逐步采用的Jav ...

  9. （17）打鸡儿教你Vue.js

    vue-router <a class="list-group-item" v-link="{ path: '/home'}">Home</a ...

随机推荐

  1. Spring Cloud Alibaba学习笔记（18） - Spring Cloud Gateway 内置的过滤器工厂

    参考:https://cloud.spring.io/spring-cloud-static/spring-cloud-gateway/2.1.0.RELEASE/single/spring-clou ...

  2. 2.2_Database Interface：ODBC基本概念

    一.无ODBC时代 一般来讲不同的数据库厂商都有自己的数据库开发包,这些开发包支持两种模式的数据库开发; 1.预编译的嵌入模式(例如Oracle的ProC,SQL Server的ESQL) 2.API ...

  3. js实现用户输入日期算出是今年的第几天

    const rs = require("readline-sync"); // 根据用户输入的年月日输出第几天 // 欢迎 console.log("欢迎来到查询系统&q ...

  4. SpringMVC、SpringFox和Swagger整合项目实例

    目标 在做项目的时候,有时候需要提供其它平台(如业务平台)相关的HTTP接口,业务平台则通过开放的HTTP接口获取相关的内容,并完成自身业务~ 提供对外开放HTTP API接口,比较常用的是采用Spr ...

  5. Jenkins配置Publish Over SSH讲解说明

    原创 Jenkins配置Publish Over SSH讲解说明 2018-08-22 11:59:30 M.Blog 阅读数 3764更多 分类专栏: Jenkins   版权声明:本文为博主原创文 ...

  6. buffer和cache区别？

    写入数据到内存里,这个数据的内存空间称为缓冲区(buffer) 从内存读取数据,这个存储数据的内存空间称为缓存区(cache) 由于大部分网站以读取为主,写入为辅,所以并发写入一般不是问题.

  7. IDEA中导入Maven模块

    IDEA中导入Maven模块方式有二种: 1)批量添加,不可添加文件夹 2)单个添加,可添加任意文件

  8. Android笔记（五十四） Android四大组件之一——ContentProvider（一）

    ContentProvider提供数据 在Android中,他的每个应用都是相互独立的,各自运行在自己的Dalvik虚拟机中,但现实使用中常常需要在多个应用之间进行数据交换,例如发短信需要获取联系人中 ...

  9. c# IEnumerable集合

  10. 【HICP Gauss】数据库 升级迁移维护-2

    DM-Data Manager 集群管理web工具 数据库升级 1.检查版本 依次升级.升级前全备数据 2.磁盘空间不小于表预留空间 3. 确保数据库对包有一定权限 4.升级后正常启停 python ...