cnpm 下载包的速度更快一些. 地址:http://npm.taobao.org/ 安装cnpm: npm install -g cnpm --registry=https://registry.npm.taobao.org vue2.0版本创建项目 1.进入目录 2.npm init   (使用 npm init 指令创建项目描述文件 package.json) 3.npm i webpack vue vue-loader Vue CLI   vue 3.0版本安装 Vue CLI 的包名称…

在珠峰参加培训好年了,笔记原是记在本子上,现在也经不需要看了,搬家不想带上书和本了,所以把笔记整理下,存在博客中,也顺便复习一下 安装vue.js 因为方便打包和环境依赖,所以建意npm  init  -y 第一个示例: <script src ="./node_modules/vue/dist/vue.js" ></script> <div id="app"> {{msg==='hello'?1:0}} </div>…

一份不错的vue.js基础笔记!!!! 第一章 Vue.js是什么? Vue(法语)同view(英语) Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项目整合. 1.1 Vue.js的目的 Vue.js的产生核心是为了解决如下三个问题: 解决数据绑定的问题: Vue.js框架生产的主要目的是为了开发大兴单页面应用(SPA:Single Page Application) Angular.js中对PC端支持的比…

一.v-bind 缩写 <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> <!-- 完整语法 --> <button v-bind:disabled="someDynamicCondition">Button</button> <!-- 缩写…

用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某个路由后,才去加载对应的组件,这样就会更加高效,实现代码如下: import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ { path: '/', component: resolve => requi…

固定路径(原始html) index.html如下,其中,引号""里面就是图片的路径地址 ```<img src="./assets/1.png"> ``` 单个可变路径 index.html如下 ```<div id="app"> <img v-bind:src="imgSrc"> </div> ``` 对应地,app里面要有src, ``` var app = new Vue…

pc环境:windows 10, OS:win32, Arch:x64 1.升级node.js到最新 ⑴.别人成功的方法: . 第一步 npm -g install n //此处可以加上 --force . 第二步 n stable //更新至最新稳定版本 附带常用命令 n //会列出所有安装的版本供你切换 n latest //安装最新版本 n stable //安装最新稳定版 n lts //安装最新长期支持版本 n rm [版本号] //删除某一版本 n -h //帮助命令 ⑵.我运行的结…

事件: 事件冒泡行为: 1.@click="show($event)" show:function (ev) { ev.cancelBubble=true; } 2.@click.stop="show()" 事件捕获行为: <div v-on:click.capture="doThis">...</div> 连用:<a v-on:click.stop.prevent="doThat"><…

<!-- 多层for循环 --> <ul> <li v-for="(ite,key) in list2"> {{key}}-------{{ite.case}} <ul> <ol v-for="(vo,key) in ite.list">{{key}}------------{{vo.title}}</ol> </ul> </li> </ul> <!--…

打开vsCode的调试控制台里面的终端 然后输入下面代码 npm install express-generator -g 1 创建一个命名为 myapp 的应用. express myapp 你就可以看到生成的目录了,接着我们安装 安装所有依赖包: cd 是到刚刚生产的目录中 cd myapp npm install 1 2 然后输入启动它把 npm start…

想入门工具是必须的,这一章将向大家带来vue.js相关的程序安装步骤. ①首先你需要有一个NVM(一个非常好用的Node版本管理器): 1.NVM下载地址:https://github.com/coreybutler/nvm-windows/releases 下载nvm-setup.zip即可 2.安装过程(除了第二个需要手动选个安装目录其他的直接下一步就ok): 3.此时你需要检查环境变量是否自动配置: 打开控制面板(也可以通过Win键+R+输入control+enter),之后点击“系统和安…

1.前端开发模式的发展过程 (1)静态页面 最初的网页以HTML为主,是纯静态的网页.网页是只读的,信息流只能从服务端到客户端单向流通.开发人员也只关心页面的样式和内容即可. (2)异步刷新,操作DOM 1995年,网景工程师Brendan Eich 花了10天时间设计了JavaScript语言.随着JavaScript的诞生,我们可以操作页面的DOM元素及样式,页面有了一些动态的效果,但是依然是以静态为主. ajax盛行: 2005年开始,ajax逐渐被前端开发人员所重视,因为不用刷新页面就可…

NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,本文只介绍如何通过NPM进行安装Vue.js NodeJS官方网站:http://nodejs.cn/download/ 通过官网下载并安装NodeJS即可在cmd执行npm指令 淘宝npm镜像:由于默认使用的是国外的镜像,这会有时候导致下载vue时网速过慢或连接超时,推荐使用淘宝镜像cnpm指令安装,执行以下代码即可. npm install -g cnpm --registry=https://regist…

最近学习vue.js,下面是笔记: 说明:因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,如果npm的服务器在中国就好了,所以我们乐于分享的淘宝团队干了这事.来自官网:"这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步." 官方网址:http://npm.taobao.org 安装:命令提示符执行npm install cnpm -g --registry=https://registry.…

目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterator 声明.解构.展开.类型断言 泛型 泛型约束 交叉类型.联合类型 索引类型 映射类型 类型兼容 类型保护.推断 模块和命名空间 装饰器 类装饰器: 函数装饰器: 属性装饰器: 参数装饰器: vue.js 学习笔记3--TypeScript 工具 npm install -g typescript…

显而易见的,之前的02_toDoList存在着一个很致命的缺陷.那就是它的数据只存在于浏览器端,一但用户关闭或重新载入页面,他之前加入到程序中的数据就会全部丢失,一切又恢复到程序的初始状态.要想解决这个问题,就需要 Web 应用的前端在适当的时间将获得的输入数据存储到后端服务器上,然后在需要时再从服务器上获取这些数据.这部分笔记将记录如何利用 Vue.js 框架来完成 Web 应用程序的前端与后端之间的交互.这一次,我同样会通过构建一个"留言本"应用来贯穿整个学习过程. 首先需要在co…

正如上一篇笔记中所说,直接使用 ES6 标准提供的模块规范来编写 Vue 组件在很多情况下可能并不是最佳实践.主要原因有两个,首先是市面上还有许多并没有对 ES6 标准提供完全支持的 Web 浏览器,这样做可能会导致某些用户无法使用应用程序.其次,即使将来所有的 Web 浏览器都完全支持了 ES6 标准规范,直接在 JavaScript 原生的字符串对象中编写 HTML 模版的做法也会让我们的编程工具无法对其进行高亮显示与语法检查,这不仅会让编程体验大打折扣,也会增加编码的出错概率.为了解决这个…

Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Spread / Rest 操作符 6.二进制和八进制字面量 7.对象和数组解构 8.对象超类 9.for...of 和 for...in 10.ES6中的类 1.基本认识vue MVVM 模式 View 层 Model 层 ViewModel 层 Vue实例的options vue实例的生命周期 2.…

Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTML代码中引入两个js文件,并且类型需要设置为module import指令用于导入模块中的内容.比如main.is的代码 导出方法: var name = '小明'; var age = 18; var flag = true; function sum(num1, num2) { return n…

以前我们用Jquery进行dom的操作,虽然熟悉后开发效率很高,但是如果多个控件的相互操作多的情况下,还是会乱.相比之下,Vue的使用更加清晰,通过虚拟dom将数据绑定,而且组件化和路由的帮助下,让整个网页符合SPA(Single Page Application)的潮流趋势.如果你懂的Angular.js,那么Vue.js就是囊中之物. <div id="app"> <p>{{ message }}</p> <input v-model=&q…

vue中vue-router的使用:…

最近在读新书<vue.js权威指南>,一边读,一边把笔记整理下来,方便自己以后温故知新,也希望能把自己的读书心得分享给大家. [第1章:遇见vue.js] vue.js是什么? vue.js不是一个框架-它只聚焦视图层,是一个用来构建数据驱动的Web界面的库.Vue.js通过简单的API来提供高校的数据绑定和灵活的组件系统 vue.js的特性 轻量级:体积非常小,而且不依赖其他基础库 数据绑定:对于一些富交互,状态机类似的前端UI界面,数据绑定非常简单,方便 指令:类似与AJ,可以使用v-*的…

Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架——只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用. 在配置环境之前呢,有些基础的东西还是要和大家普及一下的.如果你已经对Vue.js有所了解,那请点击 配置步骤  跳转到配置环境的阅读,否则,请耐心看完看完. 首先,介绍一下Vue.js的概念,他是干啥的呢?一定要配置vue的运行环境吗? 如上述Vue.js不是个全能的框架,因为他的…

本篇目录: 1.1 Vue.js 是什么 1.2 如何使用Vue.js 本章主要介绍与Vue.js有关的一些概念与技术,并帮助你了解它们背后相关的工作原理. 通过对本章的学习,即使从未接触过Vue.js,你也可以运用这些知识点快速构建出一个Vue.js应用. 1.1 Vue.js 是什么 Vue.js的官方文档中是这样介绍它的: 简单小巧的.渐进式JavaScript框架,是以应付任何规模的应用. 简单小巧是指Vue.js压缩后大小仅有20KB. 所谓渐进式(Progressive),就是你可以…

1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Router支持3种路由模式: ◊ hash:使用URL hash值作为路由 ◊ history:依赖HTML5 History API和服务器配置 ◊ abstract:支持所有JavaScript运行环境,如node服务器端.如果发现没有浏览器的API,路由就会强制进入该模式. vue-router提供…

1. 环境准备 Vue是一套用于构建用户界面的渐进式框架,设计为可以自底向上逐层应用.Vue 的核心库只关注视图层. 安装Node.js,下载:https://nodejs.org/ 查看安装: $ node -v npm包管理器,集成在node中. 查看npm版本: $ npm -v npm是国外资源,资源网络存在部分限制因素. 安装国内镜像cnpm: $ npm install -g cnpm --registry=https://registry.npm.taobao.org 2. 安装v…

一.开发环境 vue推荐开发环境: Node.js: JavaScript运行环境(runtime),不同系统直接运行各种编程语言 npm: Nodejs下的包管理器. webpack: 它主要的用途是通过 CommonJS 的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包. vue-cli: 用户生成Vue工程模板 二.环境搭建 安装node.js: 1. 从node.js官网下载并安装node,安装过程很简单. 2. npm 版本需要大于 3.0,如果低于此版本需要升…

教程总结笔记: 学习网站:http://www.runoob.com/nodejs/nodejs-install-setup.html Node.js 中文网及安装文件下载: http://nodejs.cn/download/ 安装完成后,cmd --->  path 看到此后,安装成功 查看node版本 node -v 查看npm版本 顺便安装下淘宝镜像: npm install -g cnpm --registry=http://registry.npm.taobao.org 浏览器打开n…

https://www.cnblogs.com/goldlong/p/8027997.html 首先理清nodejs和npm的关系: node.js是javascript的一种运行环境,是对Google V8引擎进行的封装.是一个服务器端的javascript的解释器. 包含关系,nodejs中含有npm,比如说你安装好nodejs,你打开cmd输入npm -v会发现出啊线npm的版本号,说明npm已经安装好. 引用大神的总结: 其实npm是nodejs的包管理器(package manager…

本篇将简单介绍一下Vue.js,并在Node.js环境下搭建一个简单的Demo. 一.简介 我个人理解,Vue.js是一套前端视图层的框架,它只关心视图展示和数据绑定,它的一些语法与Angular 1非常相似,如果有Angular 1相关的使用经验,上手会非常快. 相比较其他的React.Angular 2等MVVM框架,它更加的轻量,效率也更高,也能更好的与其他库集成. 它拥有以下几个出色的特性: 数据双向绑定 指令 模板 组件 当前最新的版本为2.1.4.后续也会在这个版本下演示Demo.…