zoukankan      html  css  js  c++  java
  • 非nodejs方式的vue.js的使用

    1、node环境

    详细见我之前的文章,node的安装

    2、git环境

    git bash命令窗,支持bash命令,cmd不支持bash命令

    3、cnpm安装

    cnpm是针对国内使用npm网络慢的而使用的

    在cmd中输入:

    npm install -g cnpm --registry=https://registry.npm.taobao.org
    如果node的版本比较低,会执行不成功。需要升级node的版本,直接下载最新的node覆盖安装

    4、下载vue.min.js和vue-resource.min.js

    这是使用cnpm的方式

    打开git bash,输入:cnpm install vue

           输入:cnpm install vue-resource

    将下载到的vue.min.js和vue-resource.min.js放到项目中

    5、截图说明

    将title的值在data中绑定为hello vue,然后执行cartView方法,将title值修改为Vue hello

    6、index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
    
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
    <h2>{{title}}</h2>
    
    </div>
    <script src="js/lib/vue.min.js"></script>
    <script src="js/lib/vue-resource.min.js"></script>
    <script src="js/cart.js"></script>
    </body>
    </html>

    7、cart.js

    /**
     * Created by kk on 2017/4/16.
     */
    var vm =new Vue({
        el:"#app",
        data:{
            title:"hello vue"
        },
        filters:{
    
        },
        mounted:function () {
            //类似于jquery中的ready方法
            this.cartView();
        },
        methods:{
            cartView:function () {
        this.title="Vue hello"
    }
        }
    
    });
  • 相关阅读:
    第3次实践作业
    第2次实践作业
    第09组 团队Git现场编程实战
    第二次结对编程作业
    团队项目-需求分析报告
    团队项目-选题报告
    第一次结对编程作业
    第一次个人编程作业
    第一次博客作业
    课程设计第十四天
  • 原文地址:https://www.cnblogs.com/hongmaju/p/6716023.html
Copyright © 2011-2022 走看看