一小时复习

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. win7远程服务器发生身份验证错误，要求的函数不受支持

    远程服务器发生身份验证错误,要求的函数不受支持,远程登录服务器以前都是正常的,今天登录远程桌面就一直是这样的错误.记录一下解决方法. 方法一:卸载补丁KB41037181.打开控制面板,找到“程序和功 ...

  2. JNA的应用

    一.了解JNA之前,我们先了解一下JNA的前身JNI(Java Native Interface):通过使用 Java本地接口书写程序,可以确保代码在不同的平台上方便移植. [1]  从Java1.1 ...

  3. Python之TensorFlow的（案例）验证码识别-6

    一.这里的案例相对比较简单,主要就是通过学习验证码的识别来认识深度学习中我们一般在工作中,需要处理的东西会存在哪些东西. 二.因为我没有数据集,没有关系,这里自己写了一个数据集,来做测试,为了方便我把 ...

  4. flutter apk 打包

    https://blog.csdn.net/weixin_33738578/article/details/87998565 http://www.cnblogs.com/sangwl/p/10400 ...

  5. 73.移动端Web界面滚动性能优化 Passive event listeners

    题,滚动时候不仅滚动了希望滚动的部分,整体的页面也跟随者上下滚动,整个页面非常卡顿. 这两个页面都用了touch事件 控制台打印如下警告: [Intervention] Unable to preve ...

  6. 浅谈React编程思想

    React是Facebook推出的面向视图层开发的一个框架,用于解决大型应用,包括如何很好地管理DOM结构,是构建大型,快速Web app的首选方式. React使用JavaScript来构建用户界面 ...

  7. Jwt Token 令牌

    /* 采用JWT的生成TOKEN,及APP登录Token的生成和解析 */ public class JwtTokenUtil { /** * token秘钥 */ public static fin ...

  8. iPad所有平板型号屏幕尺寸

    1.iPad所有平板型号屏幕尺寸 尺寸 iPad型号 物理点 像素点 倍数 7.9 iPad Mini 768x1024 768x1024 1 7.9 iPad Mini 2 iPad Mini 3 ...

  9. arm9的中断

    GPIO 习惯了stm32的GPIO,发现高端处理器arm在这方面反而简单了. ARM9控制GPIO只有三种寄存器. GPxCON:配置引脚功能,GPACON用一位控制一个GPIO,分别是0为输出引脚 ...

  10. C#编译相关知识

    C#代码编译成MSIL代码. 当用户编译一个.NET程序时,编译器将源代码翻译成一组可以有效地转换为本机代码且独立于CPU的指令.当执行这些指令时,实时(JIT)编译器将它们转化为CPU特定的代码.由 ...