非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"

}

    }

});

非nodejs方式的vue.js的使用的更多相关文章

组件切换方式（Vue.js）
这里,我用一个注册登录两组件的切换实例来演示: 切换方式一 <!DOCTYPE html> <html lang="zh-CN"> <head> ...
vue.js插入dom节点的方式
html代码: <div id="app"></div> js代码: var MyComponent = Vue.extend({ template: '& ...
vue.js环境安装
1.到官网(http://nodejs.cn/download/)下载Node.JS运行环境并安装(由于现在的Node中自带npm包管理器,所以就不需要额外下载npm了) 2.如果是新手,那么建议以引 ...
Vue.js+vue-element搭建属于自己的后台管理模板：什么是Vue.js?（一）
Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js是什么?(一) 前言本教程主要讲解关于前端Vue.js框架相关技术知识,通过学习一步一步学会搭建属于自己的后台管理模板,并 ...
Vue.js入门指南（一）
前言 JRedu 之前用过一段时间的AnglarJS 1.X,在低版本的AngularJS中,脏值检查在变量增多的情况下会影响程序的响应速度.后期的2.X和更高版本在脏值检查等问题上做了优化, ...
.Net Core+Vue.js+ElementUI 实现前后端分离
.Net Core+Vue.js+ElementUI 实现前后端分离 Tags: Vue 架构前端采用:Vue.js.Element-UI.axios 后端采用:.Net Core Mvc 本项目是 ...
Vue.js高效前端开发 • 【初识Vue.js】
全部章节 >>>> 文章目录一.Vue概述 1.Web前端框架介绍 2.MVC和MVVM 3.Vue介绍 4.安装Vue 二.Vue使用 1.第一个Vue应用 2.Vue的双 ...
基于 Vue.js 之 iView UI 框架非工程化实践记要
像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引用一下,不需要就删除.故观念使然,尽管 Nuget 和 Maven ...
【Vue课堂】Vue.js 父子组件之间通信的十种方式
这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...

随机推荐

xml中“ < > ”转义为“ < > ”问题处理
曾经也碰到过类似问题,解决方法是在发送或者解析报文前执行上面的方法将内容转义一下,现在我用dom4j组装如下的报文(报文体中内容传输时加密处理),大致介绍一下上面方法的使用,具体看代码. import ...
C-pthread_cond_wait 详解
pthread_cond_wait() 用于阻塞当前线程,等待别的线程使用 pthread_cond_signal() 或 pthread_cond_broadcast 来唤醒它. pthread_c ...
架构-虚拟路由器冗余协议【原理篇】VRRP详解
转自:http://zhaoyuqiang.blog.51cto.com/6328846/1166840/ 为什么要使用VRRP技术我们知道,为了实现不同子网之间的设备通信,需要配置路由.目前常用的 ...
(转)IntelliJ IDEA java项目导入jar包，打jar包
以下为转载原文:https://www.cnblogs.com/yulia/p/6824058.html 一.导入 1.java项目在没有导入该jar包之前,如图: 2.点击 File -> ...
java计算时间差, 日期差小结
转自:https://blog.csdn.net/sy793314598/article/details/79544796 1.java 7中的日历类Calendar Calendar类使用其静态的g ...
java struts2入门学习实例－－使用struts2快速实现上传
一.文件上传快速入门 1).关于上传表单三要素 >>尽量以POST请求方式上传,因为GET支持文件大小是有限制的. >>必须要加上enctype="multipart ...
PCRE函数简介和使用示例【转】
PCRE函数简介和使用示例标签: 正则表达式listbuffercompilationnullperl 原文地址:http://blog.csdn.net/sulliy/article/detail ...
【Android】Android屏幕状态操作
目录结构: contents structure [+] 如何监听屏幕锁屏如何实现手机屏幕在锁屏后继续运行最近笔者在做一个功能,就是实现Android程序在锁屏后可以继续运行,笔者在网上查了一些资 ...
【C语言】练习5-8
题目来源:<The C programming language>中的习题P92 练习5-8: 一个日期转换的问题,把某月某日这种日期表示形式转换为某年中第几天的表示形式,反之亦然.例 ...
process credentials(二)
一.前言为什么要写一个关于进程如何创建的文档?其实用do_fork作为关键字进行索引,你会发现网上的相关文档数以万计.作为一个内核工程师,对进程以及进程相关的内容当然是非常感兴趣,但是网上的资料并不 ...