vue.js 入门

简单一句话来描述:vue.js是一个前端框架。

官方文档:https://cn.vuejs.org/v2/guide/index.html

虽然,我以前也会改一些前端样式,但主要是基于HTML和CSS,HTML主要控制页面的结构,CSS主要来控制样式。涉及到JavaScript就比较小白了。

我花了一个下午照着官方文档做练习,当然是只创建一个xxx_demo.html文件,在<script></script> 标签对之间写 Vue.js语法。这不算错,但在工程化的今天,这么学得猴年马月啊!完全不是一个老司机的姿势。

Vue项目构建

1、安装node.js

官方网站:https://nodejs.org/en/

下载和安装过程我这里就省略了。

2、安装全局的vue

D:\js
λ npm install -g vue-cli

注:

(1)我全程是在cmder工具下操作,这是Windows命令提示符(cmd)的增强版。

(2)npm 是node.js的一个包管理工具,当你安装好node.js后,就可以在任意位置下使用npm命令了。

3、输入“vue”命令检查是否安装成功

λ vue

  Usage: vue <command> [options]

  Options:

    -V, --version  output the version number
    -h, --help     output usage information

  Commands:

    init        generate a new project from a template
    list        list available official templates
    build       prototype a new project
    help [cmd]  display help for [cmd]

4、通过 webpack创建vue项目

λ vue init webpack my-project

? Project name my-project
? Project description this is my first vue project
? Author huzhiheng <fnngj@126.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

   vue-cli · Generated "my-project".

   To get started:

     cd my-project
     npm install
     npm run dev

   Documentation can be found at https://vuejs-templates.github.io/webpack

webpack是一款模块加载器兼打包工具,你只要知道通过webpack可以创建一个工程化的vue.js项目就可以了。

在创建vue.js项目的过程中,需要根据提示选择yes/no。参考我上面的选择就可以了。

5、安装依赖

D:\js
λ cd  my-projectD:\js\my-project
λ npm install

想知道你的项目都依赖了哪些模块,可以查看my-project/目录下的package.json文件。

6、启动vue服务

D:\js\my-project
λ npm run dev
...
> Listening at http://localhost:8080

默认会占用本机的8080端口号,并且会使用默认的浏览器打开:

Vue项目架构

从一个.vue文件到页面:

vue.js的一个组件:

vue.js简单代码分:

打开my-project/src/components/Hello.vue文件。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      <br>
      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: ‘hello‘,
  data () {
    return {
      msg: ‘Welcome to Your Vue.js App‘,    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

这里的实例代码现象好符合上面那张图,一个vue.js文件由HTML、JavaScript和CSS三部分组成。

Hello Vue! 

接下来添添加一条“‘Hello Vue!”

Hello.vue文件中找到HTML部分添加:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1>{{ message }}</h1>
<h2>Essential Links</h2>
……

找到Script部分,添加:

<script>
export default {
  name: ‘hello‘,
  data () {
    return {
      msg: ‘Welcome to Your Vue.js App‘,
      message: ‘Hello vue.js !‘
    }
  }
}
</script>

查看页面:

时间: 2024-10-08 17:58:33

vue.js 入门的相关文章

Vue.js 入门之路

最近在学习 Vue ,简单的介绍一下Vue.js,它是一款流行的 JavaScript 前端框架,旨在更好地组织与简化 Web 开发,Vue 是面向数据的编程,也就是 MVVM 模式.想了解的更多就去Vue.js官网. Vue.js 入门 很多大牛都说学习一门编程最好的方式就是阅读官方文档,这是不可否认的.问题是像我这种新人阅读那种干巴巴的文档确实有点无聊又吃力,附带效果:头皮发麻.恰好在网上找到了一些我觉得很实用的教程,在这里分享出来,希望能帮助和我一样的新手尽快的入门.在学习 Vue.js 

Vue.js 入门指南之“前传”(含sublime text 3 配置)

题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴级别”的前端开发人员,大牛请绕过. 1,下载安装Node.js 去 Node.js 官网下载一个Windows环节的安装包 node-v6.2.0-x64.rar 文件,一路安装下去即可.官网访问很慢,可以试试中文网 http://nodejs.cn/ 2,配置Vue环境 一开始看<基于Webpac

Vue.js入门

之前一直用的是jQuery,jQuery手动操作DOM导致性能不够好,因为DOM修改导致的页面重绘.重新排版!重新排版是用户阻塞的操作,同时,如果频繁重排,CPU使用率也会猛涨! Vue.js是数据驱动的,它通过一些特殊的HTML语法,将DOM和数据绑定起来.一旦你创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM也会相应地更新. 一个简单的例子: 一个页面需要通过异步请求获取数据然后展示在页面上,用jQuery方法处理是: $(function(){ var $jsontip = $(

Vue.js 入门指南之“前传”

题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴级别”的前端开发人员,大牛请绕过. 1,下载安装Node.js 去 Node.js 官网下载一个Windows环节的安装包 node-v6.2.0-x64.rar 文件,一路安装下去即可.官网访问很慢,可以试试中文网 http://nodejs.cn/ 2,配置Vue环境 一开始看<基于Webpac

一个Java程序猿眼中的前后端分离以及Vue.js入门

松哥的书里边,其实有涉及到 Vue,但是并没有详细说过,原因很简单,Vue 的资料都是中文的,把 Vue.js 官网的资料从头到尾浏览一遍该懂的基本就懂了,个人感觉这个是最好的 Vue.js 学习资料 ,因此在我的书里边就没有多说.但是最近总结小伙伴遇到的问题,感觉很多人对前后端分离开发还是两眼一抹黑,所以今天松哥想和大家聊一下前后端分离以及 Vue.js 的一点事,算是一个简单的入门科普吧. 前后端不分 后端模板:Jsp.FreeMarker.Velocity 前端模板:Thymeleaf 前

vue.js 入门案例

作者:故事我忘了¢个人微信公众号:程序猿的月光宝盒 1 vue.js 研究 1.1 vue.js 介绍 1.1.1.vue.js是什么? Vue (读音 /vju?/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计 为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与现代化的工具链以及各种 支持类库结合使用时, Vue 也完全能够为复杂的单页应用提供驱动. 渐进式框架:Progressi

Vue.JS入门学习随笔

PS:先说说学习Vue的缘由吧,学习完了React之后,突然发现又出了一款叫做vue的框架,而且据说可以引领又一波新框架的潮流,我容易吗我!!! Vue.js(读音 /vju?/, 类似于view)是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单

Vue.js入门。十个指令。4种常用方法

在进入Vue之前我们还是先了解一下使用Vue的面向对象的三种创建方式吧 类和对象是 面向编程中最重要的两个概念,一定要理清 类 : 是一个抽象概念(不是实际存在),(属性,行为) 对象 : 是实际存在的,是对象的实例化,看过几个例子你就会明白. 在ES6之前:1.内置的构造函数:2.自定义的构造函数:3.字面量 . 1.内置的构造函数: 2.自定义的构造函数: 3.字面量 . 创建Vue实例 首先要确保你的项目引入了Vue.js,需要用他的框架就必须要引用! 创建一个vue实例非常简单 data

萌新--关于vue.js入门及环境搭建

十几天闭关修炼,恶补了html跟css以及JavaScript相应的基础知识,恰巧有个群友准备做开源项目,愿意带着我做,但是要求我必须懂vue.js,所以开始恶补vue.js相关的东西. 在淘宝上买了相关视频,前两章简介听得懵懵懂懂的,能够勉强理解.到第三章,开始有案例之后,整个人就懵了,为啥老师的一个程序文件夹那么多东西,我就一个可怜兮兮的html??等等,老师说这node.js是什么? 不是另外一个框架吗?webpack又是啥?... 一连串懵逼之后,终于发现,视频不适合我.开始找其他的途径