vue起步：用html+js快速构建vue

早先学vue的时候在知乎写的学习笔记，今天想起来了给搬到博客上。知乎链接 

这几天刚接触vue.js，由于没有接触过es6和webpack，打算直接用html+js构建vue项目，发现虽然官方文档是html+js写的，但是不够详细，网上的例子又都是vue-cli构建的，于是简单总结分享一下这两天的成果，希望能给同样初学的小伙伴们一点帮助。

 

demo案例

对于官方文档上的内容我就不过多重复了，希望大家能先看一下组件以前的部分。在这里我就简单的进行一下总结，先上一个小例子（这个例子都看不懂的话还是先把官方文档仔细看一看吧）：

    
    
{{ message }}
    点我

运行结果：

从上面例子可以看到vue的基本使用：数据绑定，有了一个初步认识之后，让我们来看看vue的基本语法

 

一、vue实例

创建根实例，所有的内容都应该包含在根实例中

new Vue({
        el: '#app',
        data: {//数据放这里
            message: 'Hello world'
        },
        methods:{//方法放这里
            show:function(){alert("run...")}
        }
    })

二、模板语法

这部分请直接去官方文档学习，我只简单提一下如何区别快速记忆一些常用的

文本：文本绑定数据的方式

{{ message }}

属性：html属性绑定数据的方式

//简写格式

指令：html没有的属性即是vue的指令，以v-xxx的格式:如v-for、v-if···

数据绑定：前面的可以算是单向的数据绑定，而双向数据绑定需要用到v-model指令

事件：

三、组件

vue的核心内容便是组件，页面的每一块都可以是一个组件，这一部分需要着重理解

1.先来个小例子熟悉一下组件的基本用法

    

        
父组件说：{{message}}
        
        
    

打印结果：

代码分析：

组件必须绑定一个模板，而模板必须为template标签。其他的用法和vue实例很相似，因为vue实例本身也可以算是一个组件。需要注意的是，在使用组件时，data必须是一个函数，该函数返回data数据，如下：

data:function(){
    return {
         message:"我是子组件"
    }
}

在这里，大家发现我在父组件和子组件中都定义了message，但是显示的是不同的结果。因为在vue.js中组件的作用域是独立的，即使是父子组件也不能继承作用域。而要传递数据就必须借助prop和事件传参，prop往下传，事件往上传。

2.子组件通过prop获取父组件参数

    

        
父组件说：{{message}}
        
        
    

打印结果：

可以看到，父组件的fu传递到了子组件，并赋值给了message

3.子组件通过事件向父组件传递参数

接下来让我们再试试从父组件向子组件传递参数

    

        
父组件说：{{message}}
        
        
    

打印结果：

 

四、路由

了解组件之后，就可以使用路由来制作一个简单的单页应用了。我们要做的是配置组件和路由映射，并指定组件渲染的位置

    

        
        
        子组件1
        子组件2
        
        
    

打印结果：