（13）打鸡儿教你Vue.js
一小时复习
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的更多相关文章
- （10）打鸡儿教你Vue.js
事件处理器 <div id="app"> <button v-on:click="counter += 1">增加 1</butt ...
- （2）打鸡儿教你Vue.js
var obj = {} Object.defineProperty(obj, 'msg', { // 设置 obj.msg = "1" 时set方法会被系统调用 参数分别是设置后 ...
- （29）打鸡儿教你Vue.js
web阅读器开发 epub格式的解析原理 Vue.js+epub.js实现一个简单的阅读器 实现阅读器的基础功能 字号选择,背景颜色 有上一页,下一页的功能 设置字号,切换主题,进度按钮 电子书目录 ...
- （26）打鸡儿教你Vue.js
weex框架的使用 1.weex开发入门 2.weex开发环境搭建 3.掌握部分weex组件模块 4.了解一些vue基本常见语法 5.制作一个接近原生应用体验的app weex介绍 安装开发环境 We ...
- （22）打鸡儿教你Vue.js
vue.js 单页面,多页面 Vue cli工具 复杂单页面应用Vue cli工具 交互设计,逻辑设计,接口设计 代码实现,线上测试 git clone,git int 创建分支,推送分支,合并分支 ...
- （21）打鸡儿教你Vue.js
组件化思想: 组件化实现功能模块的复用 高执行效率 开发单页面复杂应用 组件状态管理(vuex) 多组件的混合使用 vue-router 代码规范 vue-router <template> ...
- （19）打鸡儿教你Vue.js
了解vue2.x的核心技术 建立前端组件化的思想 常用的vue语法 vue-router,vuex,vue-cli 使用vue-cli工具 Vue框架常用知识点 vue核心技术 集成Vue 重点看,重 ...
- （18）打鸡儿教你Vue.js
介绍一下怎么安装Vue.js vue.js Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性. Vue.js是一个渐进的,可逐步采用的Jav ...
- （17）打鸡儿教你Vue.js
vue-router <a class="list-group-item" v-link="{ path: '/home'}">Home</a ...
随机推荐
- 通过 AppSwitch 禁用 WPF 内置的触摸让 WPF 程序可以处理 Windows 触摸消息
原文:通过 AppSwitch 禁用 WPF 内置的触摸让 WPF 程序可以处理 Windows 触摸消息 WPF 框架自己实现了一套触摸机制,但同一窗口只能支持一套触摸机制,于是这会禁用系统的触摸消 ...
- 试用一款网荐的 iOS 快速布局UI库
NerdyUI github: https://github.com/nerdycat/NerdyUI Cupcake (Swift 版本) github: https://github.com/ ...
- 聊聊 ES6 中的箭头函数
首先来两点: 当只有一个参数的时候,那么 () 可以省略 当只有一个 return 的时候,那么 {} 可以省略 当函数体内只有一条语句的时候,那么 {} 也可以省略 下面来几个简单的例子来对比 ES ...
- （在客户端）https抓包解密
(一)原理分析 https的数据包是用对称秘钥(https协议协商出来的随机数)加密后的密文. 对称秘钥在传输线路上是密文的(被非对称加密过),但是在client.server端是明文的(因为要用于加 ...
- phpmyadmin教程
phpmyadmin教程 管理页进入phpmyadmin 打开C:\wamp\apps\phpmyadmin3.5.1下的配置文件:config.inc 修改密码创建与修改数据库.数据表 字段类型 I ...
- 资源管理与调度系统-YARN资源隔离及以YARN为核心的生态系统
资源管理与调度系统-YARN资源隔离及以YARN为核心的生态系统 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.什么是资源隔离 资源隔离是指为不同任务提供可独立使用的计算资源以 ...
- 自定义jsr-269注解处理器 Error:服务配置文件不正确,或构造处理程序对象javax.annotation.processing.Processor: Provider not found
出现的原因 自定义处理器还没有被编译就被调用,所以报 not found在根据配置寻找自定义的注解处理器时,自定义处理器还未被编译12解决方式 maven项目可以配置编译插件,在编译项目之前先编译处理 ...
- 乔布斯在位时,库克实质上已经在做CEO的工作了：3星|《蒂姆·库克传》
“ 一些人认为艾夫是接替乔布斯的热门人选,他对苹果的原晃和产品来说至关重要,但他本人对管理企业却毫无兴趣.艾夫想继统做设计.在苹果,他拥有所有设计师都梦寐以求的工作环境——无限的资源和自由创作的空间. ...
- 一种使用gitlab的CI/CD功能实现Nginx配置更新的方法
至于nginx的docker制作,前面已介绍过. 现在使用gitlab在线编辑的方式,可实现Nginx的自定义配置并更新. .gitlab-ci.yml内容如下: variables: project ...
- A Beginner’s Guide to Webpack 4 and Module Bundling
原文: https://www.sitepoint.com/beginners-guide-webpack-module-bundling/ ----------------------------- ...