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

一、Vue概述

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

Vue特点：

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

二、Vue基本使用

1. 传统开发模式与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>

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

5. Vue代码运行原理

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

三、Vue模板语法

1. 模板语法概述

   • 前端渲染：把数据填充到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-***
       • 事件绑定
         
       • 属性绑定
         
       • 样式绑定
         
       • 分支循环结构