当今世界不会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的更多相关文章

    1. （29）打鸡儿教你Vue.js

      web阅读器开发 epub格式的解析原理 Vue.js+epub.js实现一个简单的阅读器 实现阅读器的基础功能 字号选择,背景颜色 有上一页,下一页的功能 设置字号,切换主题,进度按钮 电子书目录 ...

    2. （26）打鸡儿教你Vue.js

      weex框架的使用 1.weex开发入门 2.weex开发环境搭建 3.掌握部分weex组件模块 4.了解一些vue基本常见语法 5.制作一个接近原生应用体验的app weex介绍 安装开发环境 We ...

    3. （22）打鸡儿教你Vue.js

      vue.js 单页面,多页面 Vue cli工具 复杂单页面应用Vue cli工具 交互设计,逻辑设计,接口设计 代码实现,线上测试 git clone,git int 创建分支,推送分支,合并分支 ...

    4. （21）打鸡儿教你Vue.js

      组件化思想: 组件化实现功能模块的复用 高执行效率 开发单页面复杂应用 组件状态管理(vuex) 多组件的混合使用 vue-router 代码规范 vue-router <template> ...

    5. （19）打鸡儿教你Vue.js

      了解vue2.x的核心技术 建立前端组件化的思想 常用的vue语法 vue-router,vuex,vue-cli 使用vue-cli工具 Vue框架常用知识点 vue核心技术 集成Vue 重点看,重 ...

    6. （18）打鸡儿教你Vue.js

      介绍一下怎么安装Vue.js vue.js Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性. Vue.js是一个渐进的,可逐步采用的Jav ...

    7. （17）打鸡儿教你Vue.js

      vue-router <a class="list-group-item" v-link="{ path: '/home'}">Home</a ...

    8. （15）打鸡儿教你Vue.js

      组件化vue.js 组件单向绑定 组件双向绑定 组件单次绑定 创建组件构造器 注册组件 使用组件 Vue.extend() Vue.component() 使用组件 <div id=" ...

    9. （13）打鸡儿教你Vue.js

      一小时复习 vue.js是一个JavaScriptmvvm库,是以数据驱动和组件化的思想构建的,相比angular.js,vue.js提供了更加简洁,更加容易理解的api,如果习惯了jquery操作d ...

    10. （12）打鸡儿教你Vue.js

      组件 语法格式如下: Vue.component(tagName, options) <tagName></tagName> <div id="app" ...

    随机推荐

    1. Linux 内核错误码

      #define    EPERM         1    /* Operation not permitted */#define    ENOENT        2    /* No such ...

    2. Linux权限管理：setUID、setGID 和 Sticky BIT

      1.setUID.setGID 和 Sticky BIT 的功能详解 setuid 功能: 1.只有可执行的二进制文件程序才能设定 SUID 权限(前提) 2.命令执行者要对该程序有执行(x)权限(必 ...

    3. springmvc+mybatis的增删改查入门

      先到官网了解mybatis的语法:https://mybatis.org/mybatis-3/zh/sqlmap-xml.html 前端用了thymeleaf和vue.js,效果图和demo地址:ht ...

    4. 【转载】 C#中使用Sum方法对List集合进行求和操作

      在C#的List操作中,有时候我们需要对List集合对象的某个属性进行求和操作,此时可以使用Lambda表达式中的Sum方法来快速实现此求和操作,使用Sum方法可使代码简洁易读,并且省去写for循环或 ...

    5. 基于socket.io客户端与服务端的相互通讯

      socket.io是对websocket的封装,用于客户端与服务端的相互通讯.官网:https://socket.io/. 下面是socket.io的用法: 1.由于使用express开的本地服务,先 ...

    6. ASP.NET使用window.event.keycode来获取按下的键盘值！

      window.event.keycode-获取按下的键盘值 这里只列出了一些较常用的键盘值更加详细的键盘值请访问此人博客:https://www.cnblogs.com/z-sm/p/3597592. ...

    7. Oracle前期工具【1】

      目录: 1.oracle下载安装[Oracle11g] 2.Oracle客户端工具下载安装 [sqldeveloper.exe] 3.cmd进入Oracle命令界面操作 4.客户端图形化命令操作 or ...

    8. K8S 1.12大特性最快最深度解析：Kubernetes CSI Snapshot（下）

      ​Kubernetes CSI Snapshot(下篇) 目标目前在Kuberentes中,卷插件仅支持配置空的存储卷.随着新的存储功能(包括卷快照和卷克隆)的提出,因此需要支持配置卷时数据填充以.例 ...

    9. 数组中的reduce

      reduce方法第一次对我的感觉是很鸡肋,但是深入了解,才发现其中的奥妙,是个非常强大且实用的方法 var arr = [1,2,3,4,5,6,7]; var sum = arr.reduce( ( ...

    10. P2661 信息传递[最小环+边带权并查集]

      题目来源:洛谷 题目描述 有 n 个同学(编号为 1 到 n )正在玩一个信息传递的游戏.在游戏里每人都有一个固定的信息传递对象,其中,编号为 i 的同学的信息传递对象是编号为 Ti​ 的同学. 游戏 ...