[Vue.js 1] 入门基础知识与开发

最近接触的几个项目框架全部用到了Vue.js技术,没办法只能对vuejs进行深入学习,不过可喜的是Vue.js学习路线非常快,上手也是非常快的,所以对于前端开发也是主流的开发框架了。不过其中的js部分我还得抽时间去专门地学习,否则自己的前端知识非常不扎实。

下面预计还有几篇关于Vue,大多是页面渲染,部署运维等其他知识了,当然了,有时间还是以项目为主(Vue.js项目大多以微信小程序为主,到时候可以直接上手一波了)

目录

  • 概述
  • 原生的Vue.js
    • 极速入门
    • TODO-list项目
  • Webpack+Vue.js开发
    • NVM,NPM,Node
    • Webpack
    • 开发环境的搭建
    • Webpack下的Vue.js项目结构
  • Webpack+Vue.js入门
    • 创建一个页面
    • Vue.js的ECMScript

概述

随着网络的流行,很多的Wap(H5)应用也随之出现了,如微店、微站各个App中包含的H5页面。然而传统的技术特点:单击某个按钮或者提交表单Webpack会整体刷新,同时js/css请求往往很多(经常过百)。
所以越来越多的App采用SPA架构,如果项目要用在H5上面,那么一定要使用单页应用框架,例如Angular,React,Vue.js都是很好的框架。
主要的Web应用分为两类:传统的Web页面和单页应用(Single Page App)
传统的Web页面每次单击一个链接都会引起页面的整个刷新
以CSDN为例:每次页面打开,页面中的.js,.css,图片文件等资源会加载一遍,可以看到左下角一共加载了237个请求,耗时0.545s.
[Vue.js 1] 入门基础知识与开发_第1张图片
一般的Web页面的例子,从第一行到最后一行,都要加载my.js,my.css外部资源。

<head>
	<script src = "my.js" >script>
	<style src = "my.css" >style>
<head>

单页应用精髓就是点击任何链接不会引起页面的整体刷新,只会通过Js替换页面的局部内容。
说到这里就不得不谈 Ajax(js的异步处理),由js发起一个Http异步处理,用户可以一边上下滚动页面一边等待这个请求来返回数据。

Vue.js 是一个MVVM(Model - View - ModelView) 的SPA框架。
官方文档地址: Vue官方文档
简单来说,学会了Vue.js 就学会了微信小程序和阿里巴巴的Weex。

用到Vue.js的项目:
滴滴出行,饿了么,Gitlab,新浪微博等

原生的Vue.js

所谓原生,就是独立的Vue.js ,不与Webpack等框架结合使用。

极速入门

本人使用Webstorm进行开发:
Vue.js安装非常简单,只要引入一个第三方的JS包即可。

 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>

下面来看一个简单的例子:
在头部引入Vue.js包。在body引入了一个div,可以认为所有的页面展示都是在div下面的,当我们做任何点击的时候整个页面不会刷新。
var 就是创建一个Vue对象

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
    <title>测试Vuetitle>
head>
<body>
    <div id='app'>
        {{ show_my_text }}
    div>
    <script>
        var app = new Vue({
        //指定所有的代码操作,对于div id= ‘app’来操作的
            e1 : 'app',
         // data表示Vue.js管理的变量赋值
            data : {
                show_my_text : 'Vuejs is the best one!'
            }
        })
    script>
body>
html>

TODO-list项目

这个例子就是SPA的应用:
需求:1.可以列出待办事项,2.新建待办事项 3.可以把待办变成已办完。
这里的技术细节比较复杂,涉及到了组件,监听器,过滤器等。

DOCTYPE html>
<html>
<head>
  <title>TodoMVCtitle>

  <script src="https://unpkg.com/vue@2">script>
  <link
          rel="stylesheet"
          type="text/css"
          href="https://unpkg.com/[email protected]/index.css"
  />
  <style>
    [v-cloak] {
      display: none;
    }
  style>
head>
<body>
<section class="todoapp">

  <header class="header">
    <h1>todosh1>
    <input
            class="new-todo"
            autofocus
            autocomplete="off"
            placeholder="What needs to be done?"
            v-model="newTodo"
            @keyup.enter="addTodo"
    />
  header>


  <section class="main" v-show="todos.length" v-cloak>

    <input
            id="toggle-all"
            class="toggle-all"
            type="checkbox"
            v-model="allDone"
    />
    <label for="toggle-all">label>

    <ul class="todo-list">
      <li
              v-for="todo in filteredTodos"
              class="todo"
              :key="todo.id"
              :class="{ completed: todo.completed, editing: todo == editedTodo }"
      >
        <div class="view">
          <input class="toggle" type="checkbox" v-model="todo.completed" />
          <label @dblclick="editTodo(todo)">{{ todo.title }}label>
          <button class="destroy" @click="removeTodo(todo)">button>
        div>
        <input
                class="edit"
                type="text"
                v-model="todo.title"
                v-todo-focus="todo == editedTodo"
                @blur="doneEdit(todo)"
                @keyup.enter="doneEdit(todo)"
                @keyup.esc="cancelEdit(todo)"
        />
      li>
    ul>
  section>

  <footer class="footer" v-show="todos.length" v-cloak>
        <span class="todo-count">
          <strong>{{ remaining }}strong> {{ remaining | pluralize }} left
        span>
    <ul class="filters">
      <li>
        <a href="#/all" :class="{ selected: visibility == 'all' }">Alla>
      li>
      <li>
        <a href="#/active" :class="{ selected: visibility == 'active' }"
        >Activea
        >
      li>
      <li>
        <a
                href="#/completed"
                :class="{ selected: visibility == 'completed' }"
        >Completeda
        >
      li>
    ul>
    <button
            class="clear-completed"
            @click="removeCompleted"
            v-show="todos.length > remaining"
    >
      Clear completed
    button>
  footer>
section>
<footer class="info">
  <p>Double-click to edit a todop>
  <p>Written by <a href="http://evanyou.me">Evan Youa>p>
  <p>Part of <a href="http://todomvc.com">TodoMVCa>p>
footer>



<script>
  // Full spec-compliant TodoMVC with localStorage persistence
  // and hash-based routing in ~120 effective lines of JavaScript.

  // localStorage persistence
  // 下面的代码使用了浏览器的localStorage进行存储,同时定义了fetch()和save()用来方便操作
  var STORAGE_KEY = "todos-vuejs-2.0";
  var todoStorage = {
    fetch: function() {
      var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || "[]");
      todos.forEach(function(todo, index) {
        todo.id = index;
      });
      todoStorage.uid = todos.length;
      return todos;
    },
    save: function(todos) {
      localStorage.setItem(STORAGE_KEY, JSON.stringify(todos));
    }
  };

  //定义过滤器,分别对ative,completed和all进行过滤
  // visibility filters
  var filters = {
    all: function(todos) {
      return todos;
    },
    active: function(todos) {
      return todos.filter(function(todo) {
        return !todo.completed;
      });
    },
    completed: function(todos) {
      return todos.filter(function(todo) {
        return todo.completed;
      });
    }
  };

  //定义的Vue的实例
  // app Vue instance
  var app = new Vue({
    // app initial state
    data: {
      todos: todoStorage.fetch(),
      newTodo: "",
      editedTodo: null,
      visibility: "all"
    },

    // watch todos change for localStorage persistence
    watch: {
      todos: {
        handler: function(todos) {
          todoStorage.save(todos);
        },
        deep: true
      }
    },

    // computed properties
    // http://v2.vuejs.org/guide/computed.html
    computed: {
      filteredTodos: function() {
        return filters[this.visibility](this.todos);
      },
      remaining: function() {
        return filters.active(this.todos).length;
      },
      allDone: {
        get: function() {
          return this.remaining === 0;
        },
        set: function(value) {
          this.todos.forEach(function(todo) {
            todo.completed = value;
          });
        }
      }
    },

    filters: {
      pluralize: function(n) {
        return n === 1 ? "item" : "items";
      }
    },

    //核心方法,用来实现对待办事项的增加、删除和修改
    // methods that implement data logic.
    // note there's no DOM manipulation here at all.
    methods: {
      addTodo: function() {
        var value = this.newTodo && this.newTodo.trim();
        if (!value) {
          return;
        }
        this.todos.push({
          id: todoStorage.uid++,
          title: value,
          completed: false
        });
        this.newTodo = "";
      },

      removeTodo: function(todo) {
        this.todos.splice(this.todos.indexOf(todo), 1);
      },

      editTodo: function(todo) {
        this.beforeEditCache = todo.title;
        this.editedTodo = todo;
      },

      doneEdit: function(todo) {
        if (!this.editedTodo) {
          return;
        }
        this.editedTodo = null;
        todo.title = todo.title.trim();
        if (!todo.title) {
          this.removeTodo(todo);
        }
      },

      cancelEdit: function(todo) {
        this.editedTodo = null;
        todo.title = this.beforeEditCache;
      },

      removeCompleted: function() {
        this.todos = filters.active(this.todos);
      }
    },

    // a custom directive to wait for the DOM to be updated
    // before focusing on the input field.
    // http://v2.vuejs.org/guide/custom-directive.html
    directives: {
      "todo-focus": function(el, binding) {
        if (binding.value) {
          el.focus();
        }
      }
    }
  });

  // handle routing
  function onHashChange() {
    var visibility = window.location.hash.replace(/#\/?/, "");
    if (filters[visibility]) {
      app.visibility = visibility;
    } else {
      window.location.hash = "";
      app.visibility = "all";
    }
  }

  window.addEventListener("hashchange", onHashChange);
  onHashChange();

  // mount
  app.$mount(".todoapp");
script>
body>
html>

样式图:
[Vue.js 1] 入门基础知识与开发_第2张图片

Webpack+Vue.js开发

NVM,NPM,Node

nvm(node version是非常好用的Node版本管理器,如果node版本不对,运行起来会有各种问题。
下载地址:NVM-windows
设置环境变量:

NVM_HOME: D:\nvm
NVM_SYMLINK : C:Program Files\nodejs

windows查看列出的的安装node版本:
[Vue.js 1] 入门基础知识与开发_第3张图片
列出本地安装的版本
[Vue.js 1] 入门基础知识与开发_第4张图片
安装的时候只要选择一个版本就可以,例如:

nvm install 17.5.0

加快nvm和npm的下载速度,修改成国内的镜像服务器:
对于nvm来说

NVM_NODEJS_ORG_MIRROR = https://npm.taobao.org/dist nvm install

对于npm,使用cnpm来代替npm

npm install - g cnpm --registry=https://registry.npm.taobao.org

然后通过国内的淘宝服务器安装node包:

Webpack

随着SPA单页应用的发展,使用js/css/png等文件特别多,比较难管理,文件夹结构也容易混乱,希望项目可以具有压缩的功能。
Webpack是一个打包工具,可以把js,css,node module,coffeescrip,scss等打包在一起,简直是SPA的福音。这样做可以做到路由的分离以及快速打包、部署以及项目上线。
安装Webpack:

npm install --save-dev webpack

因为Webpack自身支持Vue.js,所以Webpack与Vue.js很难分清谁是谁了。

开发环境的搭建

同时安装vue和vue-cli 这两个node package,-g表示可以被全局使用。

npm install vue vue-cli -g

可能会遇到这样的错误:npm WARN deprecated [email protected]: this library is no longer supported
[Vue.js 1] 入门基础知识与开发_第5张图片

原因是资源的问题,要配置淘宝镜像
npm config set registry https://registry.npm.taobao.org
 
配置完成后检验是否成功
npm config get registry

如果下载后还是报错,那就是包问题,解决方法是删除文件的package-lock文件,重新npm install就可以了。

创建一个项目

vue init webpack my-project

会发现’vue’ 不是内部或外部命令,也不是可运行的程序或批处理文件。

首先进入npm查看全局安装路径:
[Vue.js 1] 入门基础知识与开发_第6张图片
进入到页面后,确实发现有vue了。
[Vue.js 1] 入门基础知识与开发_第7张图片
进入到环境变量:
[Vue.js 1] 入门基础知识与开发_第8张图片
[Vue.js 1] 入门基础知识与开发_第9张图片
重新打开cmd,此时安装完成了。
[Vue.js 1] 入门基础知识与开发_第10张图片
下面就进入到刚才的vue install一步:

vue init webpack my-project

安装依赖:

cd my-project
npm install

在本地以默认端口运行:

npm run dev

打开localhost:8080就可以看到创建的欢迎页了。
[Vue.js 1] 入门基础知识与开发_第11张图片

Webpack下的Vue.js项目结构

会生成一个崭新的项目,
[Vue.js 1] 入门基础知识与开发_第12张图片
在build文件中保留了各种打包脚本,不可随意更改。
config文件是与部署和配置相关的,在index.js定义了开发的端口,图片文件夹和代理服务器等
dist文件夹:对应的css,js,map都在这里。有了map文件夹浏览器可以下载整个.js文件。

在node_modules文件中,第三方包特别多,所有在package.json中定义的第三方包都会被自动下载。
src文件,是核心源代码所在目录。assets是放的图片,components用到的视图和组件(核心),router/index.js是路由文件,对应了各个页面的对应的Url.
[Vue.js 1] 入门基础知识与开发_第13张图片

Webpack+Vue.js入门

[Vue.js 1] 入门基础知识与开发_第14张图片
注意这里的位置是用小写,如果用大写将不能运行。
[Vue.js 1] 入门基础知识与开发_第15张图片

当然了你可以直接打开刚才创建的文件就可以,在readme直接运行npm run dev就可以了。

创建一个页面

默认的路由文件是src/router/index.js:
下面建一个sayhi,注意@表示当前目录

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'

//引入SayHi 这个component
import SayHi from '@/components/SayHi'

Vue.use(Router)

export default new Router({
  routes: [
  // 定义了/#/say_hi这个url
    {
      path: '/say_hi',
      name: 'SayHi', // Vue.js内部使用的名字
      component: SayHi //对应的.vue页面的名字
    }
  ]
})

创建一个新的Componet:
src/components/SayHi.vue

<template>
<div>
  Hi Vue
div>
template>

<script>
export default {
  data () {
    return { }
  }
}
script>

<style scoped>

style>

总是报 Expected indentation of 2 spaces but found 4错误,深入发现是缩进的原因,这个问题的原因在于eslint的风格样式缩进检测,eslint给出的规则是2个缩进,但我们通常是4个缩进。
在上面的代码中,template表示的是html模板,是最普通的HTML,script是js代码,所有的js代码都放在这里,这里使用的是EMScript,style表示所有的css文件都可以放在这里。
运行就可以了。

当然了可以增加样式
SayHi.vue

<div class ="hi">
<style scoped>
.hi {
  color: red;
  font-size: 20px;
}
style>

定义并显示变量:
可以在data中定义:

export default {
  data () {
    return {
      message: '你好Vue'
    }
  }
}

当然了需要引用哦,这样就可以显示了:

<div class="hi">
  Hi Vue
  {{ message }}
div>

Vue.js的ECMScript

我们使用的不是原生的js,而是新语言ECMScript(关于js我将会单独做几篇博客)
常量与变量:
声明本地变量:
var : 有可能引起变量提升,或者块级作用域问题
let : 为了解决以上两个问题。
多用let ,少用var

常量:
const title = “123”

全局变量:
window.title = “123”;

导入代码: import,用于导入外部代码:

import Vue from 'vue'
import Rounter from 'vue-router'

在每个vue文件的script中,都存在exprt default{…} 代码,作用是方便其他代码对这个代码进行引用。

其实在之前的代码我们发现:

export default {
//等同于 data ()
  data: function() {
	return {}
  }
}

分号可以省略。

以上。

你可能感兴趣的:(Java,vue.js,前端,javascript)