基础

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语法预览：

差值表达式

指令

事件绑定

属性绑定

样式绑定

分支循环结构