一.Vue-基础

基础

VUE的基本用法：

概述：一个渐进式javascript框架

申明式渲染—组件系统（组件化开发模式）—客户端路由（单页面应用，页面的局部更新，浏览器的历史回退功能）—集中式状态管理（项目规模大，大量的业务数据，vuex）—项目构建（大型前端的独立，开发，部署上线）

vue的基本使用步骤：

1.需要提供标签用于填充数据：

插入一个带id号的容器

2.引入vue.js库文件：

在头部插入

3.使用vue的语法做功能：

提供一个对象，用于存储vue实例，需要提供对象型的参数 el和data：

var vm=new Vue(
{
el:’#app’,
/用于告诉vue数据的填充位置，利用id等进行标注/
data:
{
msg:‘hello vue’,
/用于提供数据/
}
});

4.将vue提供的数据填充到标签里面

{{msg}}

差值表达器：

1.将数据填充到html标签内

2.支持基本的计算操作，可以简单计算与文字拼接：

如：

{{msg+’——‘+1+2}}

–>

编译原理：

vue的模板语法：

1.如何理解前端渲染：

将数据填充到html标签当中（利用ajax从后台获取数据）

2.前端渲染方式：

• 原生js拼接字符串：

基本上就是将数据以字符串的形式拼接到html中，前端风格代码如下：

var d = data .weather;
var info = docuament. 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]+'</1i>'
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}}</h1>
    <ul>
         {{each list as value i}}
             <li>索引 {{i + 1}} : {{value}}K</li>
         {{each}}
    </ul>
    {{/if}}
</ script>

优点:大家都遵循同样的规则写代码，代码可读性明显提高了,方便后期的维护。
缺点:没有专门提供事件机制。

• 使用vue特有的模板语法：
  能有效解决上诉问题
  vue语法预览：

• 差值表达式

• 指令

• 事件绑定

• 属性绑定

• 样式绑定

• 分支循环结构