(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" ...
随机推荐
- BUG:WSL 的 ssh server 无法启动
BUG 使用 sudo service ssh start 启动 ssh 服务,提示: * Restarting OpenBSD Secure Shell server sshd Could not ...
- wannafly 挑战赛10 小H和密码
题意:中文题就不解释了 题解: dp[i][j]表示前i 个轮盘 和一个字符串前j 个字符的匹配情况 ,具体的状态转移解释见代码 #include <cstdio> #include &l ...
- PIE二次开发——大气校正
窗体设计: 代码: private void button_src_Click(object sender, EventArgs e) { OpenFileDialog openFile = new ...
- java线程的五种状态
五种状态 开始状态(new) 就绪状态(runnable) 运行状态(running) 阻塞状态(blocked) 结束状态(dead) 状态变化 1.线程刚创建时,是new状态 2.线程调用了sta ...
- iOS - 如何适配iOS10(插曲)
升级了系统10.12beta xcode8 出现一大推问题 ,连上架APP都成了问题.只能先解决这些问题,再研究3D引擎了. 2016年9月7日,苹果发布iOS 10.2016年9月14日,全新的操 ...
- VUE 元素拖拽、移动
元素拖拽 作者:一粒尘土 时间:2019-10-30 使用范围:两个元素位置交换,移动元素到指定位置 涉及函数 属性 解释 draggable 是否允许元素进行拖拽 dragstart 拖拽开始触发的 ...
- vue中将时间戳转换为YYYY-MM-dd hh:mm格式时间的组件
首先我们可以使用vue中的过滤方法将数据变成另一个格式 // html <span class="rate-time">{{rating.rateTime | form ...
- Linux软件包(源码包和二进制包)及其区别和特点
Linux 下的软件包众多,而且几乎都是经 GPL 授权的,也就是说这些软件都免费,振奋人心吧?而且更棒的是,这些软件几乎都提供源代码(开源的),只要你愿意,就可以修改程序源代码,以符合个人的需求和习 ...
- c# 调试过程
- windows虚拟机性能调整
在通过KVM安装WindowsXP/2003/7/2008操作系统后,由于默认的磁盘驱动(IDE)性能与网卡驱动(RTL8139100M)的性能都极其低下,需要调整,通过加载Redhatvirtio驱 ...