vue基础

• Vue概述
• Vue基本使用
• Vue模板语法
• 基础案例
• Vue常用特性
• 综合案例

1. Vue概述

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

官网：https://cn.vuejs.org/v2/guide/

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

2. 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" src="js/jquery.js"></script>
<script type="text/javascript">
    var msg = ‘Hello World‘;
    $(‘#msg‘).html(msg);
</script>

② Vue.js之HelloWorld基本步骤

<!-- vue方法 -->
<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不需要我们直接操作DOM了。

③ Vue.js之HelloWorld细节分析

1）实例参数分析

• el： 元素的挂载位置（值可以是CSS选择器或者DOM元素）
• data：模型数据（值是一个对象）
  

2）插值表达式用法 ：插值表达式就是{{msg}}形式

• 将数据填充到HTML标签中
• 插值表达式支持基本的计算操作
  

3）Vue代码运行原理分析

• 概述编译过程的概念（Vue语法→原生语法）
  

3. Vue模板语法

① 模板语法

1）如何理解前端渲染？

把数据填充到HTML标签中 

2）前端渲染方式

• 原生js拼接字符串
• 使用前端模板引擎
• 使用vue特有的模板语法 

3）原生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+‘</sapn><ul>‘;
    tag += ‘<li>白天天气： ‘+day[1]+‘</li>‘
    tag += ‘<li>白天温度： ‘+day[2]+‘</li>‘
    tag += ‘<li>白天风向： ‘+day[3]+‘</li>‘
    tag += ‘<li>白天风速： ‘+day[4]+‘</li>‘
    tag += ‘</ul>‘;
    var div = document.createElement(‘div‘);
    div.innerHTML = tag;
    info.appendChild(div);
}

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

4）使用前端模板引擎

下面代码是基于模板引擎art-template的一段代码，与拼接字符串相比，代码明显规范了很多，它拥有自己的一套模板语法规则。

<script id="abc" type="text/html">
    {{if isAdmin}}
    <h1>{{title}}</h1>
    <ul>
        {{each list as value i}}
            <li>索引 {{i + 1}} ： {{value}}</li>
        {{/each}}
    </ul>
    {{/if}}
</script>

优点：大家都遵循同样的规则写代码，代码可读性明显提高了，方便后期的维护。
缺点：没有专门提供事件机制。在模板引擎里面不提供事件处理机制，只能等渲染完模板之后，然后通过原生JS的方式获取DOM元素，再绑定事件。这样做也相对比较原始。

5）vue的模板语法

• 差值表达式
• 指令
• 事件绑定
• 属性绑定
• 样式绑定
• 分支循环结构

4. 基础案例

tab选项卡功能

5. Vue常用特性

6. 综合案例