• (3)打鸡儿教你Vue.js


    vue.js是一套构建用户界面的渐进式框架
    vue关注视图层,采用自底向上增量开发的设计

    <div id="app">
     <p>{{ message }}</p>
    </div>
    

    vue.js安装
    下载 vue.min.js 并用

    image.png

    npm install vue
    
    cd my-project
    npm install
    npm run dev
    
    # 全局安装 vue-cli
    $ cnpm install --global vue-cli
    # 创建一个基于 webpack 模板的新项目
    $ vue init webpack my-project
    # 这里需要进行一些配置,默认回车即可
    This will install Vue 2.x version of the template.
    
    For Vue 1.x use: vue init webpack#1.0 my-project
    
    # 全局安装 vue-cli
    $ cnpm install --global vue-cli
    # 创建一个基于 webpack 模板的新项目
    $ vue init webpack my-project
    # 这里需要进行一些配置,默认回车即可
    
    $ cd my-project
    $ cnpm install
    $ cnpm run dev
     DONE  Compiled successfully in 4388ms
    
    > Listening at http://localhost:8080
    

    目录结构:
    image

    build 项目构建(webpack)相关代码
    config 配置目录
    node_modules npm 加载的项目依赖模块
    static 静态资源目录
    test 初始测试目录
    package.json 项目配置文件

    image.png

    通过实例化Vue实现:

    var vm = new Vue({
    // 选项
    })
    
    {{ }} 用于输出对象属性和函数返回值
    

    image.png

    var vm = new Vue({
        el: '#vue_det',
        data: data
    })
     
    document.write(vm.$data === data) // true
    document.write("<br>") 
    document.write(vm.$el === document.getElementById('vue_det')) // true
    

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

    官方微信公众号

    吹逼交流群:711613774

    吹逼交流群

  • 相关阅读:
    UVA 254 Towers of Hanoi
    UVA 701 The Archeologists' Dilemma
    UVA 185 Roman Numerals
    UVA 10994 Simple Addition
    UVA 10570 Meeting with Aliens
    UVA 306 Cipher
    UVA 10160 Servicing Stations
    UVA 317 Hexagon
    UVA 10123 No Tipping
    UVA 696 How Many Knights
  • 原文地址:https://www.cnblogs.com/dashucoding/p/11140201.html
Copyright © 2020-2023  润新知