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

一、Vue概述

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

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

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

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

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-***
       • 事件绑定
       • 属性绑定
       • 样式绑定
       • 分支循环结构