一小时复习

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. WPF 程序如何跨窗口/跨进程设置控件焦点

    原文:WPF 程序如何跨窗口/跨进程设置控件焦点 WPF 程序提供了 Focus 方法和 TraversalRequest 来在 WPF 焦点范围内转移焦点.但如果 WPF 窗口中嵌入了其他框架的 U ...

  2. 无法将文件xxx复制到xxx文件xxx正由另一进程使用，因此该进程无法访问此文件

    对于VS2017,可以这样处理,开始——>运行——>tskill msbuild,然后重新生成即可.

  3. spring 通过启动命令配置文件路径

    公司使用dubbo开发,提供了很多的服务,每个服务中一些配置都是一样的,比如注册中心地址,公共码表库等一下配置,这样在部署每一个程序的时候,修改每一个服务的配置增加很多的工作量.且领导不想对程序有大的 ...

  4. 【转载】 C#使用string.IsNullOrWhiteSpace方法判断字符串是否为非空字符

    在C#编程过程中,很多时候需要判断传入过来的字符串是否为Null或者空字符或者空白字符,此时就可以使用到string.IsNullOrWhiteSpace方法来判断,如果字符串为null或者空字符Em ...

  5. 爬虫之PyQuery的base了解

    爬虫之PyQuery的base了解 pyquery库是jQuery的Python实现,能够以jQuery的语法来操作解析 HTML 文档,易用性和解析速度都很好,和它差不多的还有BeautifulSo ...

  6. 解决Vivado XSDK在Ubuntu系统上自带UART Terminal Crash问题

    在Ubuntu 18.04 LTS系统上使用某些版本的Vivado XSDK的Eclipse IDE中自带的串口Terminal会有Crash的问题.Xilinx的XSDK的Terminal插件是用的 ...

  7. UCOSIII信号量

    信号量通常分为两种 二进制信号量 计数型信号量 二进制信号量 二进制信号量只能取0和1两个值 计数型信号量 计数型信号量的范围由OS_SEM_CTR决定.OS_SEM_CTR可以为8位,16位和32位 ...

  8. pod健康检查(liveness probe存活探针&&readiness probe 可读性探针)

    在Kubernetes集群当中,我们可以通过配置liveness probe(存活探针)和readiness probe(可读性探针)来影响容器的生存周期.参考文档:https://kubernete ...

  9. 【技术分享】linux各种一句话反弹shell总结——攻击者指定服务端，受害者主机（无公网IP）主动连接攻击者的服务端程序（CC server），开启一个shell交互，就叫反弹shell。

    反弹shell背景: 想要搞清楚这个问题,首先要搞清楚什么是反弹,为什么要反弹.假设我们攻击了一台机器,打开了该机器的一个端口,攻击者在自己的机器去连接目标机器(目标ip:目标机器端口),这是比较常规 ...

  10. Vuex基础 -01 -实现简易计数器 -支持 加数/ 减数/ 奇数再加/ 异步加法(setTimeout 1000ms) -单组件演示语法

    Vuex 的结构图 工程组织 Vuex的核心管理程序 store.js /* vuex的核心管理程序 */ import Vue from 'vue' import Vuex from 'vuex' ...