Vue.js

Vue.js起步

文档

Vue.js是一个MVVM的前端框架，与React.js相似，都注重解决view层开发痛点。对于具备开发经验的同学，不建议从文档的开头进行学习，我们完全可以通过vue-cli脚手架开始搭建学习。

下载vue-cli

vue-cli

cnpm install vue-cli -g

使用

vue-cli为我们提供了多种构建模板，我们在正式开发中，一般都会选择webpack，顾名思义，就是用webpack进行打包。

vue init webpack vue-demo
Project name vue-demo
Project description A Vue.js project
Author liuhao 
Vue build standalone
Install vue-router? Yes
Use ESLint to lint your code? No
Set up unit tests No
Setup e2e tests with Nightwatch? No
Should we run `npm install` for you after the project has been created? (recom
mended) no

vue-cli会询问初始化项目的可选参数，基于现在的状态，我们只需要在install vue-router时选择Yes即可。随后vue-cli会自动npm install进行下载。

开启server

package下载完毕后，我们可以先看一下模板为我们提供的package.json里的scripts。需要指出的是，这是node或者npm项目快速了解项目的通用套路。

cat package.json
"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  }

我们可以看到，这里我们就要运用webpack相关的知识，对webpack不了解的同学可以去看我的另外一篇介绍webpack的文章：

webpack必知必会

对webpack没有压力的同学我们可以继续往下走，scripts里提供了三条命令供我们使用:

• dev用于开启webpack-dev-server，具备热修改的功能。
• start和dev效果相同。
• build用于编译打包bundle.js和静态资源。使用到了node命令，具体可见build.js脚本。

我们尝试使用start命令:

cnpm start

Your application is running here: http://localhost:8080

如果出现上述反馈，说明start成功，我们通过浏览器访问8080端口，可以看到welcome to vue.js app。

以上就是vue.js的快速入门。我们通过脚手架成功在本地开启了一个server，利用模板生成的代码，显示出了一个hello world。

Vue.js基础要点

Vue.js作为一个渐进式的框架，起步学习阶段需要了解的可能并不需要太多，我们只需要掌握一些最基础的内容就能运用起来，比如：

• vue实例
• vue指令
• 事件处理
• vue自定义组件
• vue单文件组件
• vue生命周期
• vue-router

以上内容是必须弄懂的，也是在开发中最常用的知识点。我们顺序学习。为了方便学习基础知识，我们还是通过标签引入的方式来学习，这样更方便演示。学习完基础知识后，我们再回到vue-cli上，就可以直接上手开发了。

创建项目并创建index.html

mkdir vue-basic
cd vue-basic
touch index.html

编写如下代码：

    
    


    

        {{message}}
    
    

我们通过cdn引入vue,这个url也是官方推荐使用的。我们首先创建一个div并给id赋值，在script中通过new Vue()的方式与div进行挂载。
注意el:'#app'起的就是这个作用，在data中我们可以初始化需要的变量，以对象的key value方式。在html id app中的任何一个位置，我们都可以使用{{var}}的方式得到变量的值。

指令

vue中指令都有自己的使用场景，我们将每个指令的作用都过一遍。
v-text

    
    


    

        {{message}}
        

        
{{text}}
    

    

通过浏览器预览，我们可以认为，v-text和我们通过{{var}}产生的效果是一样的。

v-html
需要用到v-html这个指令的原因是我们如果在变量中存储的是html字符串，在浏览器中会原样输出，所以为了能够将html字符串在浏览器中正常显示，我们就需要使用v-html：

    
    


    

        {{message}}
        

        
{{text}}
        
{{html}}
 //错误用法
        
 //正确用法
    

    

可以认为，希望输出html并正常显示内容的话，第一种使用方式是错误的，应该使用v-html指令。

v-show
顾名思义，就是用来控制组件显示还是隐藏的。

    
    


    

        {{message}}
        

        
{{text}}
        
{{html}}
        

        
visible
    

    

可选值为true和flase，为true时，组件正常显示，为flase时，组件将被隐藏。需要注意的是，此时的原理是div被设置了display:none。

v-if系列
v-if也是控制组件的显示与隐藏，与v-show不同的是，v-if的处理方式是直接在html把div给注释掉了。本质不同是，v-show被隐藏还在dom中，v-if被隐藏后将脱离dom。

    
    


    

        {{message}}
        

        
{{text}}
        
{{html}}
        

        
invisible
        
testtest
    

    

v-for
v-for应该是开发最常用的指令了，一般在ul li中配合使用，循环创建相同的组件。

    
    


    

        {{message}}
        

        
{{text}}
        
{{html}}
        

        
invisible
        
testtest
        

            

                {{user['name']}}
            
        
    

    

浏览器预览为：

• zhangsan
• lisi
• wangwu

v-on
用来处理事件监听，比较常见的是处理点击事件。在介绍事件之前，我们先来了解一下和data同级的methods。在data中允许我们定义变量，在methods中允许我们定义函数。结构如下：

new Vue({
  data:{
    num：number;
    str：'string';
  },
  methods:{
    call(){
       console.log('call');     
    }
}
});

了解了methods之后，我们再来看事件监听：

    
    


    

        {{message}}
        

        
{{text}}
        
{{html}}
        

        
invisible
        
testtest
        

            

                {{user['name']}}
            
        
        click me
    

    

我们给button添加了v-on:click指令，值为处理函数的名称，当我们点击按钮后，handleClick会被正常调用。

v-bind
依据官方文档的说法，这个指令是用响应式的更新HTML属性。感觉这种说法还是比较抽象，我们来考虑一个场景，我们要显示一张图片，需要通过img的src属性，但是如果这张图片的url是通过与服务端交互获取的，那么这是就需要用到v-bind指令了。

    
    


    

        {{message}}
        

        
{{text}}
        
{{html}}
        

        
invisible
        
testtest
        

            

                {{user['name']}}
            
        
        click me
        
    

    

我们假设imgUrl是与服务端交互后，动态获取来的，当imgUrl被赋值以后，图片内容将会自动显示。

v-model
这个标签是实现双向绑定和核心，需要我们深入掌握用法。

    
    


    

        {{message}}
        

        
{{text}}
        
{{html}}
        

        
invisible
        
testtest
        

            

                {{user['name']}}
            
        
        click me
        

        

            
            

        
        
    

    

通过这段代码，我们能直观的感受到v-bind的作用。view改变以后，会直接改变与该view绑定的数据。

以上，就介绍完了Vue.js中的常见指令，更多的指令只指令需要我们在学习过程中不断总结。

事件处理

事件处理在指令v-bind中就已经介绍过了，这里再介绍下v-on和v-bind的简写：

    
    等价于=>
    
    
    等价于=>
    

自定义组件

自定义组件的本质，即定义我们自己的标签。。定义组件分为两步：

• 创建组件
• 注册组件

其中，注册组件又分为全局组件和局部组件。

    
    


    

        {{message}}
        

        
{{text}}
        
{{html}}
        

        
invisible
        
testtest
        

            

                {{user['name']}}
            
        
        click me
        

        

            
            

        

        

        
        
    

    

         //正常
        
         //错误
        
    

    

vue单文件组件

在实际项目开发中，我们一般不会在每个html中写vue代码，而是在.vue文件中来写，然后使用webpack来编译。也就是说，我们在正式的开发中，都是单页面的思想，也就是整个项目中，只有一个html。

.vue文件书写规则

创建CustomComponent.vue

可以看到，.vue设计的还是非常合理的，