(1)打鸡儿教你Vue.js

原创
2019/06/24 14:31
阅读数 0

当今世界不会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>
    

    image.png

    image.png


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

    官方微信公众号

    吹逼交流群:711613774

    吹逼交流群

本文同步分享在 博客“程序员哆啦A梦”(CSDN)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部