(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" ...
随机推荐
- 设计模式--装饰者模式(io流中使用的模式)
重点: 1.动态扩展对象,替换之前需要继承才能实现的功能. 2.具体工作的,仍然是被包装的对象,(有点锦上添花的意思,顾名思义仅仅起到装饰的作用,主体不变). 对比继承: 1.减少类的数量. 如果使用 ...
- GXOI/GZOI2019部分题解
D1T1:与或和 对每位处理,问题变成所有内部不包含0/1的矩阵的个数,单调栈维护即可. #include<cstdio> #include<algorithm> #inclu ...
- 自定义标签之inclusion_tag
1.在当前app下创建templatetags文件夹 2.在templatetags文件夹下面创建自定义的mytag.py文件 3.在mytag.py文件中的代码 from django.templa ...
- idea中异常处理快捷键
键盘按下 alt+Enter 一般选择try/catch这一个
- WebService 的发布和调用
WebService 四种发布方式总结 :https://blog.csdn.net/zl834205311/article/details/51612207 调用webService的几种方式 ht ...
- Lumen5.6使用JWT【最新教程】,亲身失败百次的总结
一.前言 如果需要使用 Passport,可以参考在下之前的教程: 'Lumen5.4配置OAuth2.0[强迫症,就是要用最新版本的Lumen]' . 由于原作者文档的简洁性,同时 Lumen 下的 ...
- HTML5 使用localstorage 本地存储
HTML 本地存储介绍 最早的 Cookies 自然是大家都知道,问题主要就是太小,大概也就 4KB 的样子,而且 IE6 只支持每个域名20个cookies,太少了.优势就是大家都支持,而且支持得还 ...
- Python——getpass(密码不显示)
为了用户输入密码时,不被其他人员看到,可以使用getpass模块来将密码以不显示的形式来表达. import getpass pwd = getpass.getpass() #在PyCharm中,运行 ...
- CEIWEI CommTone串口调试精灵7.1 串口调试 串口工具
CEIWEI CommTone串口调试精灵 是一款功能强大的串行端口通信调试软件,内嵌超过100种标准的CRC校验功能,并支校验结果高低位字节前导转换:支持批量协议调试,并支持文件.16进制.UN ...
- 14 Windows编程——SetWindowLong
使用默认窗口处理函数,源码 #include<Windows.h> #include<Windowsx.h> LRESULT CALLBACK WindProc(HWND hw ...