（1）打鸡儿教你Vue.js
当今世界不会Vue.js，前端必定路难走
一个JavaScript MVVM库
以数据驱动和组件化的思想构建的
Vue.js是数据驱动
HTML/CSS/JavaScript/ES6/HTTP协议/Vue/微信小程序/Node/Express/MySQL/ 面向对象/设计模式
CSS3新特性
word-wrap：break-word;
text-shadow: 5px 5px 5px #ff0000
box-shadow: 10px 10px 5px #888888
border-radius: 50%;
border-image: url(border.png) 30 30 round
元素和伪元素：1
类选择器、属性选择器或伪类：10
id选择符：100
内联样式：1000
!important声明的样式优先级最高
清除浮动的几种方式
添加空div，使用clear: both;
父元素使用overflow: hidden;
父元素使用overflow: auto;
父级定义高度
父级div定义伪类:after和zoom
<style>
.clearfloat {
*zoom: 1;
}
.clearfloat:after {
content: "";
height: 0;
display: block;
clear: both;
visibility: hidden;
}
</style>
margin: 0 auto;
left: 0;
right: 0;
#triangle {
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid greenyellow;
}
display：none; 不显示对应的元素
visibility：hidden; 隐藏对应元素
position：absolute/fixed; 优先级最高
float不起作用，display值需要调整
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--这是我们的View-->
<div id="app">
{{ message }}
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 这是我们的Model
var exampleData = {
message: 'Hello World!'
}
// 创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model
new Vue({
el: '#app',
data: exampleData
})
</script>
</html>
定义View
定义Model
创建一个Vue实例或"ViewModel"
定义MVVM
定义Model
定义View
ViewModel
MVVM模式本身是实现了双向绑定的
<div id="app">
<p>{{ message }}</p>
<input type="text" v-model="message"/>
</div>
M: Model 数据模型
V：View 视图
C：Controller 控制器
M：model数据模型
V：view视图
VM：ViewModel 视图模型
安装：npm i -S vue
<div id="app">{{ msg }}</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
// el：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标
el: '#app',
// Vue 实例的数据对象，用于给 View 提供数据
data: {
msg: 'Hello Vue'
}
})
</script>
<!-- 使用 vue -->
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue'
}
})
</script>
请点赞！因为你的鼓励是我写作的最大动力！
吹逼交流群：711613774
（1）打鸡儿教你Vue.js的更多相关文章
- （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 ...
- （15）打鸡儿教你Vue.js
组件化vue.js 组件单向绑定 组件双向绑定 组件单次绑定 创建组件构造器 注册组件 使用组件 Vue.extend() Vue.component() 使用组件 <div id=" ...
- （13）打鸡儿教你Vue.js
一小时复习 vue.js是一个JavaScriptmvvm库,是以数据驱动和组件化的思想构建的,相比angular.js,vue.js提供了更加简洁,更加容易理解的api,如果习惯了jquery操作d ...
- （12）打鸡儿教你Vue.js
组件 语法格式如下: Vue.component(tagName, options) <tagName></tagName> <div id="app" ...
随机推荐
- SQL高级教程
一.top子句 top子句用于规定要返回的记录的数目 并非所有数据库系统都支持top子句 # sqlserver SELECT TOP number|percent column_name(s) FR ...
- nginx 禁止浏览器缓存
如果我们使用Nginx作为静态资源服务器,那么可以使用expires进行缓存控制. location /{ expires 1s; } 如果Get页面未做任何修改,服务器就是对客户端返回304 Not ...
- Java8新特性 - Java内置的四大核心函数式接口
Java内置的四大核心函数式接口 Consumer:消费型接口 对类型为T的对象应用操作,包含方法:void accept(T t) public class TestLambda02 { publi ...
- hdu1171 灵活的运用背包问题咯。。。 还有！！！！ 合理的计算数组的范围！！ wa了好多次！
Problem Description Nowadays, we all know that Computer College is the biggest department in HDU. Bu ...
- win10环境下，让所有程序都以管理员身份运行的办法
记录下,备查! 打开gpedit.msc组策略编辑. 左侧依次找到:计算机配置->Window设置->安全设置->本地策略->安全选项 然后再右侧找到:用户账户控制:以管理员批 ...
- C#,WinForm文本框录入内容判断
|| e.KeyChar > ) && (e.KeyChar != ) && (e.KeyChar != ) && (e.KeyChar != ) ...
- 如何将SolidWorks文件另存为.obj文件及如何打开.obj格式文件
原网站:http://fans.solidworks.com.cn/forum.php?mod=viewthread&tid=40238) OBJ文件是Alias Wavefront公司为它的 ...
- python渗透库大集合
l Scapy:一款强大的交互式数据报分析工具,可用作发送.嗅探.解析和伪造网络数据包. l pypcap.Pcapy和pylibpcap:配合libpcap一起使用的数据包捕获模块 l libdne ...
- Django中ORM多对多表的操作
自己创建第三张表建立多对多关系 表的创建 # 老师表和学生表可以是一个多对多的关系,建表时可以手动建立第三张表建立关联 class Student(models.Model): name = mode ...
- 前端之：传统的DOM是如何渲染的?
a.纯后端渲染:页面发送请求,后端服务器中将数据拼成完整DOM树,并转换成一个字节流作为HTTP Response的body返回给浏览器.优点在于 返回的HTTP Response是包含着全部页面内容 ...