（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>// 这是我们的Modelvar exampleData = {message: 'Hello World!'}// 创建一个 Vue 实例或 "ViewModel"// 它连接 View 与 Modelnew 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

转载于:https://www.cnblogs.com/dashucoding/p/11140203.html

（1）打鸡儿教你Vue.js相关推荐

（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 ...
（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 重点看,重 ...
（15）打鸡儿教你Vue.js
组件化vue.js 组件单向绑定组件双向绑定组件单次绑定创建组件构造器注册组件使用组件 Vue.extend() Vue.component() 使用组件 <div id=" ...
（13）打鸡儿教你Vue.js
一小时复习 vue.js是一个JavaScriptmvvm库,是以数据驱动和组件化的思想构建的,相比angular.js,vue.js提供了更加简洁,更加容易理解的api,如果习惯了jquery操作d ...

（1）打鸡儿教你Vue.js

请点赞！因为你的鼓励是我写作的最大动力！

（1）打鸡儿教你Vue.js相关推荐

最新文章

热门文章