Vue

Vue

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

Vue视频：https://learning.dcloud.io/#/?vid=2

grid布局：http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

https://www.cnblogs.com/yz-blog/p/7978887.html

组件：https://element.eleme.io/#/zh-CN

 

 

1.Vue概述

Vue：渐进式JavaScript框架

声明式渲染——>组件系统——>客户端路由——>集中式状态管理——>项目构建

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

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

2.Vue基本使用

2.1传统开发模式对比

 原生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>

2.2Vue.js之Hello World基本步骤

<div id="app">
        <div>{ { msg}} </div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
        /*    
                Vue基本使用步骤
                1、需要提供标签用于填充数据
                2、引入vue.js库文件
                3、可以使用vue的语法做功能了
                4、把vue提供的数据填充到标签里面
                   */
        var vm = new vue({
            el: '#app',
            data: {
                msg: 'Hello World'
            }
        });
</script>

2.3Vue.js之Hello World细节分析

1.实例参数分析

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

2.插值表达式用法

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

3.Vue代码运行原理分析

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

3.Vue模板语法

3.1模板语法概述

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 + '</span><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.creatElement('div');
            div.innerHTML = tag;
            info.appendChild(div);
}

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

4.使用前端模板引擎

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

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

缺点：大家都遵循同样的规则写代码，代码可读性明显提高了，方便后期的维护。

优点：没有专门提供事件机制。

5.模板语法概述

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

3.2指令

• 什么是自定义属性
• 指令的本质就是自定义属性
• 指令的格式：以v开始（比如v-cloak）