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

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

概述

随着网络的流行，很多的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.

一般的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/vue@2.5.16/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/vue@2.5.16/dist/vue.js"></script><title>测试Vue</title>
</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>TodoMVC</title>
<!--  引入vuejs库--><script src="https://unpkg.com/vue@2"></script><linkrel="stylesheet"type="text/css"href="https://unpkg.com/todomvc-app-css@2.2.0/index.css"/><style>[v-cloak] {display: none;}</style>
</head>
<body>
<section class="todoapp">
<!--  定义了header，包括文字的提示和输入框--><header class="header"><h1>todos</h1><inputclass="new-todo"autofocusautocomplete="off"placeholder="What needs to be done?"v-model="newTodo"@keyup.enter="addTodo"/></header><!--  这里的代码把用户已经输入的待办事项做循环展示--><section class="main" v-show="todos.length" v-cloak>
<!--    全选框--><inputid="toggle-all"class="toggle-all"type="checkbox"v-model="allDone"/><label for="toggle-all"></label>
<!--    v-for 用来循环--><ul class="todo-list"><liv-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><inputclass="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' }">All</a></li><li><a href="#/active" :class="{ selected: visibility == 'active' }">Active</a></li><li><ahref="#/completed":class="{ selected: visibility == 'completed' }">Completed</a></li></ul><buttonclass="clear-completed"@click="removeCompleted"v-show="todos.length > remaining">Clear completed</button></footer>
</section>
<footer class="info"><p>Double-click to edit a todo</p><p>Written by <a href="http://evanyou.me">Evan You</a></p><p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer><!--js代码部分-->
<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 filtersvar 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 instancevar app = new Vue({// app initial statedata: {todos: todoStorage.fetch(),newTodo: "",editedTodo: null,visibility: "all"},// watch todos change for localStorage persistencewatch: {todos: {handler: function(todos) {todoStorage.save(todos);},deep: true}},// computed properties// http://v2.vuejs.org/guide/computed.htmlcomputed: {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.htmldirectives: {"todo-focus": function(el, binding) {if (binding.value) {el.focus();}}}});// handle routingfunction 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();// mountapp.$mount(".todoapp");
</script>
</body>
</html>

样式图：

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版本：

列出本地安装的版本

安装的时候只要选择一个版本就可以，例如：

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 har-validator@5.1.5: this library is no longer supported

原因是资源的问题，要配置淘宝镜像
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了。

进入到环境变量：

重新打开cmd,此时安装完成了。

下面就进入到刚才的vue install一步：

vue init webpack my-project

安装依赖：

cd my-project
npm install

在本地以默认端口运行：

npm run dev

打开localhost:8080就可以看到创建的欢迎页了。

Webpack下的Vue.js项目结构

会生成一个崭新的项目，

在build文件中保留了各种打包脚本，不可随意更改。
config文件是与部署和配置相关的，在index.js定义了开发的端口，图片文件夹和代理服务器等
dist文件夹：对应的css，js,map都在这里。有了map文件夹浏览器可以下载整个.js文件。

在node_modules文件中，第三方包特别多，所有在package.json中定义的第三方包都会被自动下载。
src文件，是核心源代码所在目录。assets是放的图片，components用到的视图和组件（核心）,router/index.js是路由文件，对应了各个页面的对应的Url.

Webpack+Vue.js入门

注意这里的位置是用小写，如果用大写将不能运行。

当然了你可以直接打开刚才创建的文件就可以，在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 {}}
}

分号可以省略。

以上。

[Vue.js 1] 入门基础知识与开发相关推荐

vue x2.0入门基础知识
文章目录 1. vue的介绍 1.1 概念 1.2 设计模式MVVM 1.3 数据双向绑定内在原理 1.4.插值表达式{{}} 2.指令 2.1 v-model 2.2 v-text 与 v-html ...
前端-Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
#[2022.3]尚硅谷Vue.js从入门到精通基础笔记(理论+实操+知识点速查) 前言本文完全基于参考资料:加工整理而成,包括其代码,案例,资源等.前置知识是学习尚硅谷的视频教程,本文配合其教程 ...
JS学习笔记——入门基础知识总结
JS入门基础知识总结1 前言基础背景知识一.产生历史: 二.特点: 三.应用方向: 四.Javascript组成: JavaScript书写使用方式一.行内式(了解即可,项目中不使用,日常练习尽 ...
（vue基础试炼_01）使用vue.js 快速入门hello world
文章目录一.需求案例二.案例实现 2.1. 原始js写法 2.2. 怎样使用vue.js ? 2.3. 使用vue.js 写法三.案例vue简述? 四.案例趣味延伸五.表达值作用及嘱咐语一. ...
音视频开发入门基础知识（视频入门篇）
RTSP实时音视频开发实战课程:<RTSP实时音视频开发实战> 音视频开发入门基础知识(音频入门篇) 目录一.前言二.视频采集和显示三.视频常见的格式四.RGB转YUV和YUV转R ...
音视频开发入门基础知识（音频入门篇）
RTSP实时音视频开发实战课程:<RTSP实时音视频开发实战> 音视频开发入门基础知识(音频入门篇) 目录前言音频的采集和播放音频常见的格式音频的编码前言在音视频开发入门基础知 ...
前端《Vue.js从入门到项目实战》PDF课件+《微信小程序实战入门第2版》PDF代码调试
JS进行开发,正如一切的编程语言都立足于电元信号的正负极,即01码,可为什么软件都不采用二进制编码来进行开发呢?这里面牵扯到一个成本的问题,这正是影响项目领导者进行决策的关键因素.Vue项目与原生J ...
Vue.js 3.0企业级管理后台开发实战：基于Element Plus UI
Vue.js 3.0企业级管理后台开发实战:基于Element Plus UI - 每天更新前言文章内容项目源码及课件第1章项目启动 1.1 项目原型 1.2 项目UI 1.3 项目开发流程 ...
Python培训入门基础知识学什么?
Python培训基础知识主要是针对一些零基础的同学安排的,虽说Python是相对比较简单的一门编程语言,但是没有基础的同学还是要进行系统的学习,那么Python培训入门基础知识学什么呢?来看看下面小编 ...

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

目录

概述