从零开始学vuejs

时间 2019-11-25

标签开始 vuejs 繁體版

原文原文链接

　　最近一段时间都花在了学习vue上，还老是断断续续的，学习的效果不是很明显，思考了很久了，应该是没有进行一个系统的总结，致使不少知识点老是似是而非，并且也有一部分是思惟尚未从java转变过来，废话很少说，慢慢学吧！css

　　准备将我学习vue的只是总结一下当个笔记吧，不记得的时候回头看一看；html

　　vue官方文档：https://cn.vuejs.orgvue

1.什么是vue.jsjava

　　其实百度一下能够知道不少说明，是一套用于构建用户界面的渐进式框架，Vue 被设计为能够自底向上逐层应用，Vue 的核心库只关注视图层....，说实话这些刚开始对我来讲彻底没有什么用，直接学就对了，暂时就把vue看成一个js的第三方库用，就相似jquery同样，首先用script标签引入，而后用特定的语法使用就ok了；node

　　固然，这是最low的方式，后面咱们慢慢学怎么和webpack包管理工具集成，实现模块化开发，在此，咱们先了解一下几个概念：jquery

　　node：什么是node呢？咱们知道js代码只能运行在浏览器上，可是没有浏览器js能够运行吗？固然能够，因而就有了node，node就是一个js的运行环境，你能够把它理解为浏览器的替代品，并且最关键的是js摆脱了浏览器的限制以后，就能够用js写后端代码了；好比能够写个服务器，其实就是写个程序跑起来一直监听电脑的某个端口，外界能够经过http请求访问这个端口，而后程序就收到这个请求的url，根据url中的路径去读写文件，而后返回用户请求；webpack

　　npm：能够简单的理解为一个下载第三方库的工具，有了这个工具，你想在你的项目中使用优秀的第三方库只须要一个命令能够了npm i xxx -s，最比较新的node中已经自带的npm，因此你无需本身去下载web

　　webpack：能够用npm下载，在模块化开发时候用到的，由于若是模块之间的依赖关系很复杂，项目作好以后，页面加载或交互时，将会发起大量请求，为了性能优化，须要使用webpack这样的打包器对模块进行打包整合，以减小请求数。借用一张图，其实就是简化依赖关系的一个打包工具ajax

　　总之一句话，node是一个运行环境，npm是下载第三方库的工具避免重复造轮子，webpack打包工具，优化性能vue-cli

2.vue简单使用

　　咱们从最简单的开始，随便准备一个html文件，千万不要从vue-cli脚手架开始，由于刚开始目录太多，一脸蒙逼w(°ｏ°)w

　　我这里编辑器用的是vscode，强烈推荐用这个，我用这个编辑器的最大缘由是轻量级(千万别下错了，vscode全称叫作Visual Studio Code，还有一个名字很像的Microsoft Visual Studio Code，这个有几个G的大小....)，并且想要什么插件直接下载，好用，固然有兴趣的也能够用webstorm等；

　　新建一个html文件，用vscode打开，而后！+Tab快速生成html模板，引入vue的js文件，而且在vscode中下载一个open in browers插件，这样就能够在html中右键，选择是在默认浏览器打开仍是在其余浏览器打开

　　简单vue代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入vue的依赖文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        {{ message }}   //这里有一个message变量，用{{}}包起来
    </div>


    <script>
        var app = new Vue({
            el: '#app',  //这里就是选择上面的div标签
            data: {
                message: 'Hello Vue!'    //给message变量赋值，这里会同步到div标签中的message中
            }
        })
    </script>
</body>

</html>

　　右键，打开默认浏览器，而后浏览器中就能看到Hello Vue!

　　很容易，只须要三步，首先是引入vue依赖文件，而后在html标签中用{{xxx}}包着一个vue变量，最后就是建立Vue实例，在这个实例中选择指定标签，定义变量值，而后这个变量值就会在html标签中生效；

　　这里其实就至关于document.getElementsById("app").innerText="Hello Vue!"，然而vue的目的就是尽可能不让咱们去直接操做dom节点，咱们只须要专一于向标签中填充数据就好了，了解了这些下面咱们就简单看看vue常见的命令吧！

3.vue基础语法

　　咱们在2中使用了{{}}这个东西表示其中的变量是和Vue实例相关联的，其实vue还给咱们提供了一些命令

　　咱们要注意一点：只要是跟vue指令绑定的，都是变量、函数对象（boolean类型除外）或者是表达式，好比经典的v-bind:class="{xxxx}"，v-on:clidk="xxx"；注意，引号里面的都是变量，不是字符串

　　3.1 v-bind指令

　　　　这个指令能够绑定标签中的任意属性，使得这个属性的值就变成了vue中的属性!有没有以为这句话很绕，举个例子：<a v-bind:href="url">我是百度</a>

　　　　这个a标签的属性href,被v-bind命令给绑定了，使得href这个属性的值url就变成了vue中的一个属性，下图所示，在Vue实例中，咱们就能够对url这个属性赋值了，是否是很容易，并且这个命令还能够简写成冒号，即上面的标签简写后就是<a :href="url">我是百度</a>

　　我上面说过，v-bind属性能够绑定标签中的任何属性，也就是说属性id，class，style，src等等属性均可以，只须要声明相似的 :xxx = “aaa”，而后在Vue实例中的data中声明aaa属性便可

　　3.2 v-for指令

　　　　这个指令经常用于循环展现，举个简单的例子：

var app = new Vue({
            el: '#app',
            data: {   //定义了一个books数组
                books: [{
                    name: "鲁滨逊",
                    price: 15
                }, {
                    name: "葫芦娃",
                    price: 7
                }]
            }
        })

<ul>
   <li v-for="book in books">书名是：{{book.name}}-------价格是：{{book.price}}</li>
</ul>

　　3.3 v-if指令

　　　　这个用于条件判断，若是v-if="flag"中flag为true，那么这个标签就是看获得的，不然就是看不到的，举个例子：

 <h1 v-if="true">你看不到我</h1>
 <h1 v-if="false">你看获得我</h1>

　　　　固然，也能够在v-if里面是一个属性，效果和上面是同样的

　　这个指令和v-show用法同样，效果几乎同样，惟一的区别就是v-if指令为false时，那么该标签在html中根本就没有，而v-show即便为false，这个标签在html是存在的，只不过该标签使用style="display: none;"不显示出来，这也很好理解

　　3.4 v-model指令

　　　　注意，这个指令只会用在input标签中，换句话说只会用在表单中，举个例子,以下图，只要输入框中改变了什么，那么上面的显示也会跟着改变，并且也会用于表单信息收集，后面用到的时候再说

　　3.5 v-on指令

　　　　前面的几个指令都是绑定属性的，这个命令是绑定事件的，咱们能够用这个命令来绑定一些事件函数；举个例子，绑定只要鼠标的点击事件,每一次点击按钮，counter的值就会加一，使得vue实例中的counter也会跟着加一，而后p标签又会时刻监听着counter的变化，因此最终的效果就是每点击一次按钮，屏幕中的数字就会变化加一

　　补充一下，v-on指令因为很经常使用，因此也有简写形式，就是@，好比上面的<button @click="counter += 1">Add 1</button>

　　到这里能够说vue的几个基本指令就说完了，仍是很容易的，不知道你们有没有发现，咱们如今的指令还只是涉及到了vue实例中的data中的属性，那么，在Vue实例中，除了el、data还有其余的属性吗？

4.vue实例的属性

　　vue实例的属性太多，咱们就说说的经常使用属性，首先的就是在上面咱们说到的el属性和data属性，这两个属性很好理解，el的全称是element，也就是标签嘛，这里用的id选择器选择指定标签，固然也能够用class选择器，本身能够试试；而后data属性表示在标签中要进行初始化的一些静态数据，注意，这里是静态数据；

　　而后咱们要想办法让这些数据是动态的，因而就有了事件监听而后调用指定的函数，因而就有一个属性是methods，在面向对象的语言中，这些函数也叫作方法，这里的就是存放标签中监听的自定义的事件函数；

　　因为每一次标签中的数据发生变化，咱们要动态显示的话，都用函数监听，那么每一次都会调用函数，虽说能够实现基本功能，可是在某些特殊状况下，咱们能够利用一个计算属性computed，这个属性有一个好处，就是可使用缓存，好比计算属性中有个变量数据一直没有改变，那么下一次访问就直接返回缓存中的结果就好了，而函数的话每一次都会去执行一次；

　　还有就是在vue实例在实例化的过程当中也会默认调用一些函数（这些函数不是在methods中的），这些函数是一些生命周期函数，大概分为三个部分，初始化的时候调用beforeCreate和created、beforedMount和mounted；更新数据的时候beforeUpdate和updated；销毁vue实例的时候beforeDestroy和destroy；

　　咱们简单了解vue的生命周期，下面有个图从官网那里拿过来的，很经典的一个图：

　　下面咱们就用简单的例子，简单看看使用一下这几个经常使用的属性和生命周期函数：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>

    <div id="app">
        <input type="text" v-model="message" placeholder="随便输入什么内容">
        <input type="submit" value="逆转按钮" @click = "reverseMsg">
        <br>
        <div>计算属性为：{{msg}}</div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                message: ''
            },
            methods:{
                //这个方法做用是将字符串逆转
                reverseMsg(){
                    return this.message = this.message.split('').reverse().join('')
                }

            },
            computed:{
                //这个计算属性，在这类就是将逆转的字符串后面加计算返回
                msg(){
                   return this.message+"计算"
                }

            },
            //如下都是生命周期函数的执行时机
            beforeCreate(){
                console.log("beforeCreate方法执行")
            },
            created(){
                console.log("create方法执行")
            },
            beforeMount(){
                console.log("beforedMount方法执行")
            },
            mounted(){
                console.log("mounted方法执行")
            },
            beforeUpdate(){
                console.log("beforeUpdate方法执行")
            },
            updated(){
                console.log("updated方法执行")
            },
            //注意，下面两个直接用页面测试不出来，到后面使用了vue-cli以后就很好测试了
            destoryed(){
                console.log("destoryed方法执行");
            },
            beforeDestory(){
                console.log("beforeDestory方法执行");
            }
        })
    </script>

</body>

</html>

　　能够看到，屡次更新数据框中的数据都会调用更新的函数，而beforeCreate和created、beforedMount和mounted只会执行一次；beforeUpdate和updated会执行屡次

　　具体的步骤：

　　　　在调用beforeCreate的时候，vue实例中的el，data，data中的message都为undefined；

　　　　调用created的时候，el仍是undefined，而数据已经与data中的属性进行绑定（放在data中属性当值发生改变的同时，视图也会发生变化），通常能够在这里作初始数据的获取；

　　　　调用beforedMount，载入前（完成了data和el数据初始化），可是页面中的内容仍是vue中的占位符，data中的message信息没有被挂在到Bom节点中，通常能够在这里作初始数据的获取；

　　　　调用mounted，载入后html已经渲染(ajax请求能够放在这个函数中)，把vue实例中的data里的message挂载到BOM节点中去；

　　　　调用beforeUpdate，更新前状态（html中的数据变化前，不是data中的数据改变前），从新渲染以前触发，而后vue的虚拟dom机制会从新构建虚拟dom与上一次的虚拟dom进行对比以后从新渲染；

　　　　调用updated,数据已经更改完成，dom也从新渲染完成

　　没记错的话还有一个监听属性没有说到，后面用到再说，其实监听属性暂时基本用不到，先放一下，还有几个动画的指令，有兴趣的本身研究一下；

5.vue组件

　　前面说了这么多都是一些基本用法，vue真正的精髓就是组件，能够有不少不少的组件，那么什么是组件呢？是一个js文件，仍是一个css文件？

　　其实我认为组件是一个资源的集合，好比后面咱们可能会用到的Element UI组件库中的组件，每个组件都包括js，css，scss，image等资源组成，而后咱们随时能够用这个组件放在咱们的页面中，不须要咱们去本身手写样式或者去复制别人的css、js代码了，实现了代码的重用性，极大的简化了开发；

　　固然咱们这里会用到最简单的组件，组件中就是一个template属性（在模块化开发中组件是一个vue文件，里面有一个template标签，在这个标签里，能够用全部的html语法以及vue指令），例以下面的这样的：

 <div id="app">
        <!--至于怎么使用组件呢？能够直接用组件名看成标签使用就好了，注意，这里标签中可使用vue指令-->
        <template01></template01>
        <template02></template02>
        <div>{{message}}</div>
        
    </div>

    <script>
        var template01 = {template: '<h1>这里是第一个自定义组件</h1>'}
        var template02 = {template: '<h1>这里第二个自定义组件</h1>'}

        //这里是第一种注册组件的作法，直接全局注册，也就是说子组件中还能够用组件2
        Vue.component("template02",template02) 
        new Vue({
            el: '#app',
            data: {
                message: 'hello vue'
            },
            //这是第二种注册组件的方式，可是这种方式是能在当前组件使用，这里至关于 "template01": template01 
            components:{
                template01 
            }
           

        })
    </script>

　　若是是在组件化开发中，咱们的组件是这种形式的，下图所示：

··　　这里还有一点须要说一下，上面咱们使用了template01 组件，可是这个组件中是不能使用new Vue(xxx)这个里面的data数据的，由于取不到；

　　咱们把当前的组件叫作父组件，template01 组件叫作子组件，如今咱们须要传递数据，因为子组件没法使用父组件中的数据，因而咱们能够在子组件使用一个props，而后父组件能够在<template01></template01>中使用vue指令绑定自定义属性，这样就将数据传到子组件的props中，而后子组件就能够随便使用props中的数据了；

　　举个简单的例子：

　　补充一下，不知道你们有没有以为这个template属性比较熟悉，在前面应该见过，就是那个Vue生命周期的图中，有关于生命周期的具体详解我看了一篇博客讲的挺不错的，有兴趣的能够去看看，点击这里；

　　其实这里的template是vue的一个实例属性，就像data属性和el属性同样，实际上表示的是要渲染的模板，若是在Vue中没有声明这个属性template，默认就把el属性指向的标签看成template去解析；不然只解析Vue中的template属性对应的标签内容，此时el对应的标签不会解析

 <div id="app">
       
        <div>外面的模板：{{message}}</div>
        
    </div>

    <script>

        new Vue({
            el: '#app',
            data: {
                message: 'hello vue'
            },
            //注意，此时无论这个div中没有没id="app"都同样，只会默认解析这个模板，而后渲染数据
           template:'<div><p>template属性对应的模板：{{message}}</p></div>'
           

        })
    </script>

　　显示的结果是：

　　由此能够知道Vue实例中的template属性优先级更高，不过这个属性不多用到。。。

6.总结

　　多了解Vue的声明周期以及vue基础知识很重要，而后在使用vue的过程当中学会了不少的东西，慢慢学吧，此次只是简单的看了一下基础知识，下一次就好好的用vue-cli构建项目，而后快速开发一些东西