学习VUE笔记（一）简单介绍

一、Vue概述

Vue:渐进式Javascript框架
声明式渲染->组件系统->客户端路由->集中式状态管理->项目构建

为什么说VUE是一个渐进式的javascript框架, 渐进式是什么意思？

如果你已经有一个现成的服务端应用，你可以将vue 作为该应用的一部分嵌入其中，带来更加丰富的交互体验;
如果你希望将更多业务逻辑放到前端来实现，那么VUE的核心库及其生态系统也可以满足你的各式需求（core+vuex+vue-route）。和其它前端框架一样，VUE允许你将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JAVASCRIPT以用来渲染网页中相应的地方。
如果我们构建一个大型的应用，在这一点上，我们可能需要将东西分割成为各自的组件和文件，vue有一个命令行工具，使快速初始化一个真实的工程变得非常简单（vue init webpack my-project）。我们可以使用VUE的单文件组件，它包含了各自的HTML、JAVASCRIPT以及带作用域的CSS或SCSS。

以上这三个例子，是一步步递进的，也就是说对VUE的使用可大可小，它都会有相应的方式来整合到你的项目中。所以说它是一个渐进式的框架。

Vue特点：

易用：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue
灵活：在一个库和一套完整框架之间自如伸缩
高效：20kB运行大小，超快虚拟DOM

二、Vue基本使用

传统开发模式与Vue模式对比

原生JS

<div id="msg">
</div>
<script type="text/javascript">
    var msg = 'Hello World';
    var div = document.getElementById('msg');
    div.innerHTML = msg;
</script>

jQuery

<div id='msg'>
</div>
<script type="text/javascript">
    var msg = 'Hello World';
    $('msg').html(msg);
</script>

Vue.js

<div id='app'>
    <div>{{msg}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
            msg:'HelloWorld'
        }
    })
</script>

Vue的基本使用步骤
1. 需要提供标签用于填充数据
2. 引入Vue.js库文件
3. 可以使用Vue的语法做功能，就是new Vue({})
4. 把Vue提供的数据填充到标签里面，也就是插值表达式{{msg}}
实例参数分析
- el：元素的挂载位置——将数据关联到页面中的某个标签里（值可以是CSS选择器或DOM元素）
- data：模型数据——开发使用的业务数据
插值表达式用法
- 将数据填充至HTML标签中，{{msg}}
- 插值表达式支持基本的计算操作，{{1+2}}
Vue代码运行原理

编译过程：Vue代码-->Vue框架-->原生Js代码

三、Vue模板语法

模板语法概述

前端渲染：把数据填充到HTML标签中。

数据（后台）+ 模板（HTML标签）= 前端渲染 => 静态HTML内容

前端渲染方式

原生Js拼接字符串

基本上就是将数据以字符串的方式拼接到HTML标签中，前端代码风格大体如下：

    var d = data.weather;
    var info = document.getElementById ('info');
    info.innerHTML = '';
    for(var i-0;i<d.length;i++) {
        var date = d[i]. date;
        var day = d[i].info.day;
        var night = d[i].info.night;
        var tag = '';
        tag += '<span>日期: '+date+'</span><ul>';
        tag += '<1i>白天天气: '+day [1]+'</li>';
        tag += '<1i>白天温度: '+day [2]+'</li>';
        tag += '<1i>白天风向: '+day [3]+'</li>';
        tag += '<1i>白天风速: '+day [4]+'</li>';
        tag +='</ul>';
        var div = document.createElement ('div');
        div. innerHTML = tag;
        info.appendchild (div);
    }

缺点：不同开发人员的代码风格差别很大,随着业务的复杂，后期的维护变得逐斩困难起来。

使用前端模板引擎

基于模板引擎art-template的一段代码,与拼接字符串相比,代码明显规范了很多,它拥有自己的一套模板语法规则。
```
    <script id="abc" type="text/html">
        {{if isAdmin}}
        <hl>{(title}}</hi>
        <u1>
            {{each list as value i}}
                <1i>索引{{i +1}} : {{value}}</1i>
            {{/each}}
        </u1>
        {{/if}}
    </script>>
```
优点：大家都遵循同样的规则写低码，代码可读性明显提高了，方便后期的维护。
缺点：没有专门提供事件机制，还是只有使用原生Js来处理事件。
使用vue特有的模板语法
- 差值表达式 {{msg}}
- 指令 v-***
- 事件绑定
- 属性绑定
- 样式绑定
- 分支循环结构