浅谈vue.js

  在使用vue.js前,首先得安装vue.js。

  对于vue.js的安装,有以下几种方法:

  1、通过官网下载:

  Vue.js 官网下载地址:http://vuejs.org/guide/installation.html

  2、使用CDN方法:

  以下推荐国外比较稳定的两个 CDN,个人建议下载到本地。

  BootCDN(国内) : https://cdn.bootcss.com/vue/2.2.2/vue.min.js

  unpkghttps://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。

  cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js   

  3、使用NPM方法:

  要使用npm方法,首先得安装npm,由于新版的nodejs已经集成了npm,所以npm也一并安装好了。

  node.js安装地址:https://nodejs.org/en/download/

  安装完node.js后,npm就已经安装成功了。由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令 cnpm,这里就不在赘述了,详细请参考:使用淘宝 NPM 镜像

  npm 版本需要大于 3.0,如果低于此版本需要升级它:  

  # 查看版本
     npm -v

  #升级 npm
    cnpm install npm -g

  如果在用 Vue.js 构建大型应用时推荐使用 NPM 安装:

  # 最新稳定版
  cnpm install vue

  这里附上一个小案例:

  

 

  注意:

  JavaScript 代码需要放在尾部(指定的HTML元素之后),否则会无效。这是因为浏览器在解析的时候是从前往后的,如果js代码放在head中,那么此时body中的内容根本就获取不到,自然也就不起作用了。

时间: 2024-12-27 16:05:47

浅谈vue.js的相关文章

浅谈Vue响应式(数组变异方法)

很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用对方法.虽然在官方文档中已经给出了方法,但是在下实在好奇的紧,想要解锁更多姿势的话,那就必须先要深入女神的心,于是乎才有了去探索Vue响应式原理的想法.(如果你愿意一层一层地剥开我的心.你会发现,你会讶异-- 沉迷于鬼哭狼嚎 无法自拔QAQ). 前排提示,Vue的响应式原理主要是使用了ES5的Obj

包学会之浅入浅出Vue.js:升学篇

上一篇<包学会之浅入浅出Vue.js:开学篇>中,我们初步了解单页面组件这个概念,现在通过一个项目,来进一步解析组件的应用吧,Go~ 需求背景 组件库是做UI和前端日常需求中经常用到的,把一个按钮,导航,列表之类的元素封装起来,方便日常使用,调用方法只需直接写上<qui-button></qui-button>或者<qui-nav></qui-nav>这样的代码就可以,是不是很方便呢,接下来我们将要完成以下页面: 这是我们组件库的首页,包含三个子

包学会之浅入浅出Vue.js:结业篇

在第一篇<包学会之浅入浅出Vue.js:开学篇>和上一篇<包学会之浅入浅出Vue.js:升学篇>的学习中,我们首先了解了Vue环境的搭建以及两个重要思想--路由和组件的学习,通过组件库中的按钮组件和导航组件,相信大家也开始了解相应的知识点,接下来我们会详细分析下如何完成由多个组件组成一个复用组件的开发流程. 下面先看看我们的需求 列表组件quiList.vue 本节我们主要要完成这样一个列表功能,每一行的列表是一个组件,列表内可能出现按钮组件或者箭头组件,点击按钮组件可以自定义事件

【Vue】浅谈Vue不同场景下组件间的数据交流

浅谈Vue不同场景下组件间的数据“交流” Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完文档许多遍后,写起代码还是不免感到有许多困惑,因为我们不知道其中一些知识点的运用场景.这就是我写这篇文章的目的,探讨不同场景下组件间的数据“交流”的Vue实现 父子组件间的数据交流 父子组件间的数据交流可分为两种: 1.父组件传递数据给子组件 2.子组件传递数据给父组件 父组件传递数据给子组件——pro

【火的不行的前端你必须知道】一、浅谈node.js

引子: 现在都2017年了,在这个前端盛行的年头,在不懂一些前端流行的技术就落伍了,恰好公司H5端项目也是让这个方向去替换. 技术选型: 这里主要是简单说一下,后面会分章节详细分析 1.react: 目前最流行的前端框架之一 2.nowa: webpack系列的一个web工具,打包,编译等 3.react-keeper: 一种路由框架 4.ES6,这个不用介绍了吧(眯眼笑) 5.antd-mobile:阿里蚂蚁出的一个前端框架,面对大部分素材够用了 6.no-flux;状态管理的一种组件  这些

Vue 浅谈前端js框架vue

Vue Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vue1.0悄悄 的问世了,它的优雅,轻便也吸引了一部分用户,开始收到关注,16年中旬,VUE2.0问世,这个时候vue不管从性能上,还是从成本上都隐隐超过了react,火的一塌糊涂,这个时候,angular 开发团队也开发了angular2.0版本,并且更名为angular,吸收了react.vue的

包学会之浅入浅出 Vue.js:开学篇

2016年,乃至接下来整个2017年,如果你要问前端技术框架什么最火,那无疑就是前端三巨头:React.Angular.Vue.没错,什么jQuery,seaJs,gulp等都逐渐脱离了热点.面试的时候不吹上一点新技术,好像自己就不是搞前端的似的.当然,希望大家都是抱着好学的心来开始一门学艺的,不管怎样,求求你,请接着看下去吧~ 本系列文将会通过很多一目了然的例子和一个实战项目--组件库,来帮助大家学习Vue,一步一步来,毕竟这篇文章还有接下来的[升学篇]和[结业篇]呢. 什么是Vue.js 不

包学会之浅入浅出Vue.js:开学篇

2016年,乃至接下来整个2017年,如果你要问前端技术框架什么最火,那无疑就是前端三巨头:React.Angular.Vue.没错,什么jQuery,seaJs,gulp等都逐渐脱离了热点.面试的时候不吹上一点新技术,好像自己就不是搞前端的似的.当然,希望大家都是抱着好学的心来开始一门学艺的,不管怎样,求求你,请接着看下去吧~ 本系列文将会通过很多一目了然的例子和一个实战项目--组件库,来帮助大家学习Vue,一步一步来,毕竟这篇文章还有接下来的[升学篇]和[结业篇]呢. 什么是Vue.js 不

浅谈Vue模板的那些事儿

接触过vue的童鞋都知道,组件的模板一般都是在template选项内定义的,如 1 Vue.component('child-component', { 2 3 template: '<h3>我是闰土大叔</h3>' 4 5 }) 这个用法都是老生常谈了,今天来聊聊Vue的内联模板.看过vue文档的同学都知道,Vue提供了一个内联模板的功能,在使用组件时,给组件标签使用inline-template特性,组件就会把它的内容当做模板,而不是把它当成内容分发,这样做的好处是,让模板更灵