html网页框架代码实例_前端开发之VUE.js入门及使用实例

相关项目交付的前端框架改造，为方便大家尽快完成从JSP到VUE的技能提升过渡，现将VUE框架相关知识点整理成文，方便大家快速的学习上手。

本文主要内容：

• 前段框架是什么；

• 什么是VUE；

• VUE实例；

• VUE安装与使用；

• VUE知识结构(思维导图)

0 1前端框架是什么

早期前端比较简单，页面以浏览型为主，简单的表单操作，每个界面上只有很少的JavaScript逻辑，基本不需要框架。随着AJAX的出现，Web2.0的兴起，人们开始在页面上做比较复杂的事情，然后前端框架才真正出现——用于简化网页开发，提供一套解决方案，开发人员按选定的规定来安排代码结构。

常见框架有：

1、ExtJS和dojo，该类框架封装了一些DOM操作功能、html文档操作、漂亮的各种控件(按钮，表单等等)。

2、Google:Angular/Facebook:React/Vue.js，该类属于MVVM数据驱动框架，以数据为基础，将“数据”和“视图”分离，将web产品向传统应用软件开发靠拢。

0 2什么是VUE

通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

数据驱动：数据改变驱动了视图的自动更新。传统的开发流程是通过对dom节点编写js监控输入，再通过js代码改变视图，而vuejs只需要改变数据视图便会跟随更新，框架内部已经对监控部分进行了封装。

视图组件化：把整个网页拆分成一个个区块，每个区块我们可以看作成一个组件。网页由多个组件拼接或者嵌套组成。最终形成的页面，在开发过程中，由<template>进行组件拆分。

VUE教程分类

在开发过程中遇到过的问题，列举：

1、模板语法

标签中只能包含一个直接子元素

使用双大括号插入data中定义的变量，{{name}}，

但是写在html尖括号中的使用不需要{{}}

2、class与style绑定

元素的样式通过js中data的一个数值进行控制

最常见的就是isShow=“none”｜“block”

:style=“{display:isShow}”

可以使用数组

3、条件渲染

v-if   v-else   v-else-if   //相当于js代码中的if else 语句

v-show

v-for   //相当于js代码中for语句

4、表单输入绑定

V-model = “value” //value为data中定义的变量名，输入框输入数值变化时，vue实例中的变量值对应着变更

知识点学习流程：

0 3VUE实例

1、开始构建 & 数据变更视图

后台请求 & 数组展

2、指令使用

0 4VUE的安装与使用

1、安装node.js

Node.js 不是JavaScript的应用，也不是一种框架，更不是一门语言。是一种JavaScript的运行环境，与浏览器是一个JavaScript运行环境一样。我的理解更趋向于vue服务器的一种编译环境，将vue后缀的各个组件通过node.js中包含的一系列工具最终生成由浏览器能运行的标准html、js、css文件。nodejs.org 前往官网下载安装。

2、项目开发中运用的node.js核心工具：

npm — 包管理工具

用户从NPM服务器下载别人编写的第三方包到本地使用；

用户也可以上传自己编写的包到NPM服务器给别人下载使用

通过系统指令  npm xxxx  使用

webpack — 打包工具

如图左显示的后缀，通过webpack定义的规则，编译之后输出为图右侧后缀。

3、安装vue-cli 

vue-cli是Vue提供的一个官方cli，专门为单页面应用快速搭建繁杂的脚手架。用于自动生成vue.js+webpack的项目模板。

4、创建工程

5、vue项目相关的一些依赖包介绍

ESLint 代码校验规则 — 提供一个插件化的javascript代码检测工具，检测过于严格，不建议使用Babel 把 JavaScript 中es2015/2016/2017/2046 的新语法转化为 es5，让低端运行环境(如浏览器和 node )能够认识并执行Router 是Vue.js官方的路由插件，用于设定访问路径，并将路径和组件映射起来，在router单页面应用中，是路径之间的切换，也是组件切换。

6、启动项目

7、项目目录结构

0 5VUE知识结构--思维导图

0 6关于vue使用过程中的个人理解及建议

1、vue 最终还是html、js、css的集合

在vue项目中会存在各种非html标准定义标签，比如<template>、

2、数据驱动，如果数据变动而视图没有更新

vue是通过对数组的操作方法进行监控从而触发视图更新，常见方法包括：

• push()

• pop()

• shift()

• unshift()

• splice()

• sort()

• reverse()

• filter()

• concat() 

• slice()

但是Vue不能检测数组和对象的变化，以及利用索引直接设置一个数组项、修改数组的长度，以上情况都处于无法触发更新状态。

Vue提供的解决方法：可以使用 vm.$set 实例方法。

更简单粗暴的可以直接强制刷新视图：

    export default {

        methods: {

            reload() {

                this.$forceUpdate()

            }

        }

    }

   

或者

   

       

        刷新comp组件

   

   

    import comp from '@/views/comp.vue'

    export default {

        name: 'parentComp',

        data() {

            return {

                update: true

            }

        },

        methods: {

            reload() {

                // 移除组件

                this.update = false

                // 在组件移除后，重新渲染组件

                this.$nextTick(() => {

                    this.update = true

                })

            }

        }

    }

   

3、require与import之间的区别

equire是赋值过程并且是运行时才执行，可以理解为一个全局方法，引入模块并且还需要赋值给某个变量。同时支持动态加载import是解构过程并且是编译时执行，必须写在文件的顶部。

4、将组件 methods 内的方法绑定到 window 来调用

mounted() {

  window.getCallId = val => {   // 把vue组件的methods方法绑定到window

    this.callIdFun(val)

  }

}

本次入门分享到此结束，后续我还会给大家带来基于VUE项目的进阶心得分享，大家敬请期待。