Vue入门篇

时间  2019-11-19
标签 vue 入门 繁體版
原文   原文链接

一  ES6语法

1  ECMAScript

  • 1995年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言。
  • 1996年，微软发布了JScript，实际上是JavaScript的逆向工程实现。
  • 1997年，为了统一各类不一样script脚本语言，ECMA（欧洲计算机制造商协会）以JavaScript为基础，制定了ECMAscript标准规范。JavaScript和JScript都是ECMAScript的标准实现者，随后各大浏览器厂商纷纷实现了ECMAScript标准。

因此，ECMAScript是浏览器脚本语言的规范，而各类咱们熟知的js语言，如JavaScript则是规范的具体实现。javascript

2 ES5和6的一些新特性

2.1  let和const命令

以前，js定义变量只有一个关键字：var。var有一个问题，就是定义的变量有时会成为全局变量：css

for(var i = 0; i < 5; i++){
    console.log(i);
}
console.log("循环外：" + i)//5

let所声明的变量，只在let命令所在的代码块内有效。html

for(let i = 0; i < 5; i++){
    console.log(i);
}
console.log("循环外：" + i)//not defined

const声明常量，不能修改。前端

2.2    箭头函数

var print = function (obj) {
    console.log(obj);
}
// 简写为：
var print2 = obj => console.log(obj);

参数=>{方法体}vue

2.3 模块化

好比定义一个js文件:hello.js，里面有一个对象：java

const util = {
    sum(a,b){
        return a + b;
    }
}

使用export将这个对象导出：node

const util = {
    sum(a,b){
        return a + b;
    }
}
export util;

使用export命令定义了模块的对外接口之后，其余 JS 文件就能够经过import命令加载这个模块。webpack

// 导入util
import util from 'hello.js'
// 调用util中的属性
util.sum(1,2)

 

二  Vue入门

2.1    MVVM模式

  • M：即Model，模型，包括数据和一些基本操做
  • V：即View，视图，页面渲染结果
  • VM：即View-Model，模型与视图间的双向操做（无需开发人员干涉）

在MVVM以前，开发人员从后端获取须要的数据模型，而后要经过DOM操做Model渲染到View中。然后当用户操做视图，咱们还须要经过DOM获取View中的数据，而后同步到Model中。git

而MVVM中的VM要作的事情就是把DOM操做彻底封装起来，开发人员不用再关心Model和View之间是如何互相影响的。es6

vue就是一款MVVM模式的框架。

Vue是一个渐进式javascript框架，既能够只做为一个js库来使用，若是想将更多的业务逻辑放到前端来实现，它也有vue-router  vuex等等核心库来帮你实现。

2.2 Node和NPM

NPM是Node提供的模块管理工具，能够很是方便的下载安装不少前端框架，包括Jquery、AngularJS、VueJs都有。，咱们先安装node及NPM工具。

2.2.1 node.js

下载地址：https://nodejs.org/en/download/

完成之后，在控制台输入：node –v

2.2.2 npm

安装完成Node应该自带了NPM了，在控制台输入npm -v查看：

npm默认的仓库地址是在国外网站，速度较慢，建议设置到淘宝镜像。可是切换镜像是比较麻烦的。推荐一款切换镜像的工具：nrm

首先安装nrm，这里-g表明全局安装:

npm install nrm –g

而后经过nrm ls命令查看npm的仓库列表,带*的就是当前选中的镜像仓库：

经过nrm use taobao来指定要使用的镜像源。

而后经过nrm test taobao来测试速度：

安装完成请必定要重启下电脑。

2.3 快速入门：

2.3.1 vue安装

三种方式：

1）下载地址：https://github.com/vuejs/vue   下载解压，获得vue.js文件。

2）使用cdn

<!-- 开发环境版本，包含了用帮助的命令行警告 -->

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

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

3）vue官方提供了一个快速搭建vue项目的脚手架：vue-cli

使用它能快速的构建一个web工程模板

安装：npm install -g vue-cli

新建module  打开terminal进入目录，

用vue-cli命令，快速搭建一个webpack的项目：vue init webpack

2.3.2  vue渲染

渲染.html

app.name=”春哥”

  • 首先经过 new Vue()来建立Vue实例
  • 而后构造函数接收一个对象，对象中有一些属性：
  • el：是element的缩写，经过id选中要渲染的页面元素，这里是一个div
  • data：数据，数据是一个对象，里面有不少属性，均可以渲染到视图中
  • 页面中的h2元素中，经过{{name}}的方式，来渲染刚刚定义的name属性。

2.3.3 双向绑定

绑定.html

  • 在data添加了新的属性：num
  • 在页面中有一个input元素，经过v-model与num进行绑定。
  • 同时经过{{num}}在页面输出

2.3.4事件处理

事件.html

  • 用v-on指令绑定点击事件，而不是普通的onclick，而后直接操做num
  • 普通onclick是没法直接操做num的。

2.4 Vue的结构和生命周期

每一个 Vue 应用都是经过用 Vue 函数建立一个新的 Vue 实例开始的：

var vm = new Vue({

  // 选项

})

在构造函数中传入一个对象，而且在对象中声明各类Vue须要的数据和方法，包括：

  • el
  • data
  • methods
  • ...

2.4.1 模板

每一个Vue实例都须要关联一段Html模板，Vue会基于此模板进行视图渲染。

能够经过el属性来指定。

例如一段html模板：

<div id="app">

   

</div>

而后建立Vue实例，关联这个div：

var vm = new Vue({

         el:"#app"

})

这样，Vue就能够基于id为app的div元素做为模板进行渲染了。在这个div范围之外的部分是没法使用vue特性的。

2.4.2数据

当Vue实例被建立时，它会尝试获取在data中定义的全部属性，用于视图的渲染，而且监视data中的属性变化，当data发生改变，全部相关的视图都将从新渲染，这就是“响应式“系统。

html:

<div id="app">
    <input type="text" v-model="name"/>
</div>
Js:
var vm = new Vue({
    el:"#app",
    data:{
        name:"xx"
    }
})

 

  • name的变化会影响到input的值
  • input中输入的值，也会致使vm中的name发生改变

2.4.3 方法

Vue实例中除了能够定义data属性，也能够定义方法，而且在Vue的做用范围内使用。

html:

<div id="app">
    {{num}}
    <button v-on:click="add">加</button>
</div>

 

js:

var vm = new Vue({
    el:"#app",
    data:{
        num: 0
    },
    methods:{
        add:function(){
            // this表明的当前vue实例
            this.num++;
        }
    }
})

 

2.4.4生命周期：

1）生命周期：

每一个 Vue 实例在被建立时都要通过一系列的初始化过程 ：建立实例，装载模板，渲染模板等等。Vue为生命周期中的每一个状态都设置了钩子函数（监听函数）。每当Vue实例处于不一样的生命周期时，对应的函数就会被触发调用。

2）钩子函数：

例如：created表明在vue实例建立后；

咱们能够在Vue中定义一个created函数，表明这个时期的构造函数：

html:
<div id="app">
    {{hello}}
</div>
js:
var vm = new Vue({
    el:"#app",
    data:{
        hello: '' // hello初始化为空
    },
    created(){
        this.hello = "hello, world！ 我出生了！";
    }
})

 

3)钩子函数执行顺序：

钩子.html

a）created和mounted

查看console：

beforecreated：el 和 data 并未初始化 
created:完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化 
mounted ：完成挂载

另外在beforemount，咱们能发现el仍是 {{message}}，这里就是应用的 Virtual DOM（虚拟Dom）技术，先把坑占住了。到后面mounted挂载的时候再把值渲染进去。

b)update

在 chrome console里执行命令:

app.message= 'update vue ';

c)destroy

在console里执行下命令: app.$destroy();

对 vue实例进行销毁。销毁完成后，咱们再从新改变message的值，vue再也不对此动做进行响应了。可是原先生成的dom元素还存在，能够这么理解，执行了destroy操做，后续就再也不受vue控制了。

d)钩子函数怎么用：

beforecreate : 举个栗子：能够在这加个loading事件 
created ：在这结束loading，还作一些初始化，实现函数自执行 
mounted ： 在这发起后端请求，拿回数据，配合路由钩子作一些事情
beforeDestroy： 你确认删除XX吗？ destroyed ：当前组件已被删除，清空相关内容

2.5 指令

2.5.1 v-model v-if v-for v-on v-bind等等

2.5.2 计算属性

data:{
    birthday:1529032123201 // 毫秒值
}

 

假如但愿获得yyyy-MM-dd的样式：

<h1>您的生日是：{{
    new Date(birthday).getFullYear() + '-'+ new Date(birthday).getMonth()+ '-' + new Date(birthday).getDay()
    }}
</h1>

 

虽然能获得结果，可是很是麻烦。

Vue中提供了计算属性，来替代复杂的表达式：

var vm = new Vue({
    el:"#app",
    data:{
        birthday:1429032123201 // 毫秒值
    },
    computed:{
        birth(){// 计算属性本质是一个方法，可是必须返回结果
            const d = new Date(this.birthday);
            return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
        }
    }
})

 

计算属性本质就是方法，可是必定要返回数据。

2.5.3 watch

Watch.html

2.6组件化

在大型应用开发的时候，页面能够划分红不少部分。每每不一样的页面，也会有相同的部分。例如可能会有相同的头部导航。

可是若是每一个页面都独自开发，这无疑增长了咱们开发的成本。因此咱们会把页面的不一样部分拆分红独立的组件，而后在不一样页面就能够共享这些组件，避免重复开发。

2.6.1 全局组件

1)全局组件.html

  • 组件其实也是一个Vue实例，所以它在定义时也会接收：data、methods、生命周期函数等
  • 不一样的是组件不会与页面的元素绑定，不然就没法复用了，所以没有el属性。
  • 可是组件渲染须要html模板，因此增长了template属性，值就是HTML模板
  • 全局组件定义完毕，任何vue实例均可以直接在HTML中经过组件名称来使用组件了。
  • data的定义方式比较特殊，必须是一个函数。

2）定义好的组件，能够任意复用屡次：

<div id="app">
    <!--使用定义好的全局组件-->
    <counter></counter>
    <counter></counter>
    <counter></counter>
</div>

3）每一个组件互不干扰，都有本身的count值。怎么实现的？

定义这个 <counter> 组件时，它的data 并非像这样直接提供一个对象：

data: {
  count: 0
}

取而代之的是，一个组件的 data 选项必须是一个函数，所以每一个实例能够维护一份被返回对象的独立的拷贝：

data: function () {
  return {
    count: 0
  }
}

 

2.6.2 局部组件

一旦全局注册，就意味着即使之后你再也不使用这个组件，它依然会随着Vue的加载而加载。

所以，对于一些并不频繁使用的组件，咱们会采用局部注册。

咱们先在外部定义一个对象，结构与建立组件时传递的第二个参数一致：

const counter = {
    template:'<button v-on:click="count++">涨了 {{ count }} 个粉</button>',
    data(){
        return {
            count:0
        }
    }
};
var app = new Vue({
    el:"#app",
    components:{
        counter:counter // 将定义的对象注册为组件
    }
})

 

  • components就是当前vue对象子组件集合。
    • 其key就是子组件名称
    • 其值就是组件对象的属性
  • 效果与刚才的全局注册是相似的，不一样的是，这个counter组件只能在当前的Vue实例中使用

2.7 组件通讯

各个组件之间以嵌套的关系组合在一块儿，不可避免的会有组件间通讯的需求。

2.7.1 父—>子

prop 是父组件用来传递数据的一个自定义属性。

父组件的数据须要经过 props 把数据传给子组件，子组件须要显式地用 props 选项声明 "prop"：

父子.html

2.7.2 子—>父

子父.html

<div id="app">
    <h2>num: {{num}}</h2>
    <!--使用子组件的时候，传递num到子组件中-->
    <counter :num="num"></counter>
</div>
<script src="vue.js"></script>
<script type="text/javascript">
    Vue.component("counter", {// 子组件，定义了两个按钮，点击数字num会加或减
        template:'\
            <div>\
                <button @click="num++">加</button>  \
                <button @click="num--">减</button>  \
            </div>',
        props:['num']// count是从父组件获取的。
    })
    var app = new Vue({
        el:"#app",
        data:{
            num:0
        }
    })
</script>

 

  • 子组件接收父组件的num属性
  • 子组件定义点击按钮，点击后对num进行加或减操做

好像没问题，点击按钮报错：

子组件接收到父组件属性后，默认是不容许修改的。

既然只有父组件能修改，那么加和减的操做必定是放在父组件：

var app = new Vue({
    el:"#app",
    data:{
        num:0
    },
    methods:{ // 父组件中定义操做num的方法
        increment(){
            this.num++;
        },
        decrement(){
            this.num--;
        }
    }
})

可是，点击按钮是在子组件中，那就是说须要子组件来调用父组件的函数，怎么作？

咱们能够经过v-on指令将父组件的函数绑定到子组件上：

<div id="app">
    <h2>num: {{num}}</h2>
    <counter :count="num" @inc="increment" @dec="decrement"></counter>
</div>

而后，当子组件中按钮被点击时，调用绑定的函数：

 Vue.component("counter", {
            template:'\
                <div>\
                    <button @click="plus">加</button>  \
                    <button @click="reduce">减</button>  \
                </div>',
            props:['count'],
            methods:{
                plus(){
                    this.$emit("inc");
                },
                reduce(){
                    this.$emit("dec");
                }
            }
        })

vue提供了一个内置的this.$emit函数，用来调用父组件绑定的函数。

2.7.3 大量的组件间通讯，用到vuex。

三 路由vue-router

3.1 场景模拟

一个页面，包含登陆和注册，点击不一样按钮，实现登陆和注册页切换。

3.1.1 登录组件

3.1.2 注册组件

3.1.3 父组件

在route.html中使用刚刚编写的两个组件.  效果：route.html

3.1.4

当点击登陆或注册按钮，分别显示登陆页或注册页，而不是一块儿显示。

虽然使用原生的Html5和JS也能实现，可是官方推荐咱们使用vue-router模块。

3.2 vue-router

在route.html中引入依赖：

<script src="vue-router.js"></script>

新建vue-router对象，而且指定路由规则：

// 建立VueRouter对象
const router = new VueRouter({
    routes:[ // 编写多个路由规则
        {
            path:"/login", // 请求路径
            component:loginForm // 组件名称
        },
        {path:"/register",component:registerForm},
    ]
})
  • 建立VueRouter对象，并指定路由参数
  • routes：路由规则的数组，能够指定多个对象，每一个对象是一条路由规则，包含如下属性：
    • path：路由的路径
    • component：组件名称

在父组件中引入router对象：

var vm = new Vue({
    el:"#app",
    components:{// 引用登陆和注册组件
        loginForm,
        registerForm
    },
    router // 引用上面定义的router对象
})

页面跳转控制：

<div id="app">
    <!--router-link来指定跳转的路径-->
    <span><router-link to="/login">登陆</router-link></span>
    <span><router-link to="/register">注册</router-link></span>
    <hr/>
    <div>
        <!--vue-router的锚点-->
        <router-view></router-view>
    </div>
</div>
  • 经过<router-view>来指定一个锚点，当路由的路径匹配时，vue-router会自动把对应组件放到锚点位置进行渲染
  • 经过<router-link>指定一个跳转连接，当点击时，会触发vue-router的路由功能，路径中的hash值会随之改变

单页应用中，页面的切换并非页面的跳转。仅仅是地址值变化。

四 webpack

4.1 Webpack 是一个前端资源的打包工具，它能够将js、image、css等资源当成一个模块进行打包。

  • 将许多碎小文件打包成一个总体，减小单页面内的衍生请求次数，提升网站效率。
  • 将ES6的高级语法进行转换编译，以兼容老版本的浏览器。
  • 将代码打包的同时进行混淆，提升代码的安全性。

4.2 webpack四个概念

  • 入口(entry)

　　webpack打包的启点，能够有一个或多个，通常是js文件。webpack会从启点文件开始，寻找启点直接或间接依赖的其它全部的依赖，包括JS、CSS、图片资源等，做为未来打包的原始数据

  • 输出(output)

　　出口通常包含两个属性：path和filename。用来告诉webpack打包的目标文件夹，以及文件的名称。目的地也能够有多个。

  • 加载器（loader）

　　webpack自己只识别Js文件，若是要加载非JS文件，必须指定一些额外的加载器（loader），例如css-loader。而后将这些文件转为webpack能处理的有效模块，最后利用webpack的打包能力去处理。

  • 插件(plugins)

　　插件能够扩展webpack的功能，让webpack不只仅是完成打包，甚至各类更复杂的功能，或者是对打包功能进行优化、压缩，提升效率。

4.3 安装

进入文件下，输入命令：npm install webpack webpack-cli --save-dev

4.4编写webpack配置

webpack.config.js

配置文件中就是要指定上面说的四个核心概念，入口、出口、加载器、插件。

加载器和插件是可选的。先编写入口和出口

4.4.1 入口

webpack打包的起点，能够有一个或多个，通常是js文件。全部的东西都集中在route.html，不是一个js，那怎么办？

新建一个js，把route.html中的部份内容进行集中，而后在index.html中引用这个js。

新建main.js, 而后把原来route.html中的js代码所有移动到main.js中:

// 使用es6的语法导入js模块
import Vue from './vue';
import VueRouter from './vue-router'
import loginForm from './login'
import registerForm from './register'

Vue.use(VueRouter)

// 建立VueRouter对象
const router = new VueRouter({
    routes:[ // 编写多个路由规则
        {
            path:"/login", // 请求路径
            component:loginForm // 组件名称
        },
        {path:"/register",component:registerForm},
    ]
})
var vm = new Vue({
    el:"#app",
    components:{// 引用登陆和注册组件
        loginForm,
        registerForm
    },
    router
})

要使用import，就须要在login.js和register.js中添加export导出语句：

export default loginForm;

export default registerForm;

 

vue-router使用模块话加载后，必须增长一句：Vue.use(VueRouter)

这样，main.js就成了咱们整个配置的入口了。

在webpack.config.js中添加如下内容：

module.exports={
    entry:'main.js',  //指定打包的入口文件
}

4.4.2 出口

出口，就是输出的目的地。通常咱们会用一个dist目录，做为打包输出的文件夹。

添加出口配置：

module.exports={
    entry:'./main.js',  //指定打包的入口文件
    output:{
        // path: 输出的目录，__dirname是相对于webpack.config.js配置文件的绝对路径
        path : __dirname+'/dist',  
        filename:'build.js'     //输出的js文件名
    }
}

4.4.3 打包

在控制台输入如下命令：npx webpack --config webpack.config.js

查看dist目录，尝试打开build.js，全部的js合并为1个，而且对变量名进行了随机打乱，这样就起到了 压缩、混淆的做用。

4.5测试  

在route.html中引入刚刚生成的build.js文件，运行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <!--router-link来指定跳转的路径-->
        <span><router-link to="/login">登陆</router-link></span>
        <span><router-link to="/register">注册</router-link></span>
        <hr/>
        <div>
            <!--vue-router的锚点-->
            <router-view></router-view>
        </div>
    </div>
    <script src="./dist/build.js"></script>
</body>
</html>

4.6 打包css和html

与上面相似，可是webpack默认只支持js加载。要加载CSS，html文件，必须安装各自加载器：

npm install style-loader css-loader --save-dev

npm install html-webpack-plugin --save-dev

五 脚手架 vue-cli

5.1 在开发中，须要打包的东西不止是js、css、html。还有更多的东西要处理，这些插件和加载器若是咱们一一去添加就会比较麻烦。

5.2 安装

5.3项目结构

5.4 单文件组件

后缀名为.vue的文件，称为单文件组件。

每个.vue文件，就是一个独立的vue组件。相似于刚才写的loginForm.js和registerForm.js

只不过，在js中编写 html模板和样式很是的不友好，并且没有语法提示和高亮。

而单文件组件中包含三部份内容：

  • template：模板，支持html语法高亮和提示
  • script：js脚本，这里编写的就是vue的组件对象，上面的data(){}
  • style：样式，支持CSS语法高亮和提示

每一个组件都有本身独立的html、JS、CSS，互不干扰，真正作到可独立复用。

5.5 运行

  • 脚本有三个：
    • dev：使用了webpack-dev-server命令，开发时热部署使用
    • start：使用了npm run dev命令，与上面的dev效果彻底同样
    • build：等同于webpack的打包功能，会打包到dist目录下。

执行npm run dev 或者 npm start 均可以启动项目。

六 最终项目

  • index.html中定义了空的div，其id为app。
  • main.js中定义了Vue对象，而且绑定经过id选择器，绑定到index.html的div中，所以main.js的内容都将在index.html的div中显示。
  • 而main.js中只有一行内容：<App/>,这是使用了App组件，即App.vue，也就是说index.html中最终展示的是App.vue中的内容。
  • App.vue中也没有内容，而是定义了vue-router的锚点：<router-view>, vue-router路由后的组件将会在锚点展现。
  • 最终的结论是：一切路由后的内容都将经过App.vue在index.html中显示。
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程