Vue基础（一）——入门

一、前端开发三大框架

1、Vue：尤雨溪主导开发

2、React：脸书（Facebook）主导开发

3、Angular：谷歌主导开发

华人开发，入门简单，所以国内用Vue的较多。  

二、使用Vue的两种方式

1、直接引入vue.js文件

2、基于Node环境创建Vue项目（使用vue/cli创建初始化一个Vue项目）

三、Vue开始使用

1、下载vue.js

2、index.html：

    
    
    
    



    
hello world!
    

        
        
{{message}}
    
    
    
    

3、两种方式提供数据：

1、将数据直接写在标签里面 

2、使用Vue，来提供数据。

4、浏览器页面显示： 

 5、与DOM的区别：

DOM：先获取DOM，再操作节点。

Vue：

        新建一个Vue实例，让div变成Vue实例的一个应用。

        这个应用里面的标签，就可以用Vue来进行管理了。

        以后，就不用考虑DOM操作了，而是，只操作数据，让数据和页面的呈现进行一个绑定。

        数据变，页面显示也会变。

四、常用基础用法

1、绑定文本：{{message}}

{{message}}
{{message + "你好"}}

2、绑定属性：v-bind

    
hello world!
    

        
{{message + "你好"}}
        
        
    
    
    
    

显示：

v-bind：让Vue实例里面的数据，直接绑定到标签的属性值上。 

v-bind：是指令，可以简写： 

3、绑定事件：v-on

    
hello world!
    

        
{{message + "你好"}}
        
        
        测试按钮
    

    
    

 测试：

 v-on简写：

测试按钮

五、案例一——点击按钮，改变图片

    

        
        改变图片
    

    
    

测试：

六、 案例二——计数器

    

        -
        {{number}}
        +
    

    
    

测试：  

七、使用vue/cli工具创建一个Vue项目（需要Node环境）

 1、全局安装vue/cli工具：

cnpm install -g @vue/cli

 会有点慢，可能要半小时，而且会报错，请耐心等待！

2、使用vue/cli创建Vue项目：

vue create hello

 项目名不能大写。

 选择Vue2：（用⬇）

安装中...有装yarn的，会使用yarn下载依赖。

安装较慢，耐心等待，或科学上网。

安装成功：

3、启动服务器：

进入项目目录，启动服务器： 

cnpm run serve
yarn serve

注意：是serve，不是server。 

服务启动成功： 

 

4、访问：

http://localhost:8080

5、项目目录：

 src是开发的关键目录。 

（1）main.js：

import Vue from 'vue'
import App from './App.vue'

// 配置开发选项,false：报错会有友好的提示。上线之后，用true。
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

import是ES6的模块化语法，可以引入第三方模块。

ES6的暴露接口：export。

以前使用Require()引入，module.exports()来暴露模块。  

A、组件化开发概述

以前，我们是使用一个一个标签，组成的页面。  

以.vue为后缀的文件是Vue的单文件组件。

这样，用组件拆分的方式开发项目，思路清晰，简洁高效，而且还可以复用相同的组件。

（2）app.vue

A、