当今世界不会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
ViewModelMVVM模式本身是实现了双向绑定的
<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