• 非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"
    }
        }
    
    });
  • 相关阅读:
    Android 系统日期时间的获取
    Android What is Application
    Android 所有颜色代码
    Android onNewIntent
    Android Activity管理类
    Android 应用启动渐变效果
    算法的的代价及其度量
    算法的设计与分析
    算法的描述
    数据结构与算法(python版)教程
  • 原文地址:https://www.cnblogs.com/hongmaju/p/6716023.html
Copyright © 2020-2023  润新知