提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

013-Vuer+Anxious：

code 框架
2023-04-18 14:24:33 时间

第一节 Vue.js简介

1、框架

任何编程语言在最初的时候都是没有框架的，后来随着在实际开发过程中不断总结『经验』，积累『最佳实践』，慢慢的人们发现很多『特定场景』下的『特定问题』总是可以『套用固定解决方案』。

于是有人把成熟的『固定解决方案』收集起来，整合在一起，就成了『框架』。

在使用框架的过程中，我们往往只需要告诉框架『做什么（声明）』，而不需要关心框架『怎么做（编程）』。

对于Java程序来说，我们使用框架就是导入那些封装了『固定解决方案』的jar包，然后通过『配置文件』告诉框架做什么，就能够大大简化编码，提高开发效率。我们使用过的junit其实就是一款单元测试框架。

而对于JavaScript程序来说，我们使用框架就是导入那些封装了『固定解决方案』的『js文件』，然后在框架的基础上编码。

用洗衣服来类比框架：
典型应用场景：洗衣服
输入数据：衣服、洗衣液、水
不使用框架：手洗
使用框架：使用洗衣机，对人来说，只需要按键，具体操作是洗衣机完成的。人只是告诉洗衣机做什么，具体的操作是洗衣机完成的。

实际开发中使用框架时，我们也主要是告诉框架要做什么，具体操作是框架完成的。

2、Vue.js

2.1、Vue.js的作者

在为AngularJS工作之后，Vue的作者尤雨溪开发了Vue.js。他声称自己的思路是提取Angular中自己喜欢的部分，构建出一款相当轻量的框架。

在这里插入图片描述

Vue最早发布于2014年2月。作者在Hacker News、Echo JS与 Reddit的JavaScript版块发布了最早的版本。一天之内，Vue 就登上了这三个网站的首页。

Vue是Github上最受欢迎的开源项目之一。同时，在JavaScript框架/函数库中， Vue所获得的星标数已超过React，并高于Backbone.js、Angular 2、jQuery等项目。

2.2、Vue.js的官网介绍

Vue.js官网网址：https://cn.vuejs.org/

Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链 以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

总结：

  • Vue是一套前端框架，免除原生JavaScript（js）中的DOM操作，简化书写。
  • 基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。
  • 单向展示：只能把模型中的数据取出来放到视图中单向展示
    • 缺点1：只能单方向的把数据从模型中取出放到视图层展示
    • 缺点2：只能实现展示而不是绑定（之前使用js或jquery需要先获取Dom对象，在通过对象获取属性值来展示数据，一旦模型数据发生改变那么js代码也会发生变化。现在使用Vue可以实现绑定，将来模型数据发生变化视图中的数据也会跟着变化，不需要修改任何代码）
  • 双向绑定：通过View提供的一个对象(ViewModel)将View(html元素)和Model(数据)实现双向绑定
    • 即：模型变了视图跟着变，视图变了模型跟着变。而且这些变化都是自动完成的。

在这里插入图片描述

第二节 准备Vue.js环境

1、开发中的最佳实践

『最佳实践』是实际开发中，针对特定问题提炼出来的最好的解决方案。把『最佳实践』抽取出来，封装到各自编程语言的程序包中，就是框架的基础。

  • Java语言的程序包：jar包
  • JavaScript语言的程序包：外部js文件

对于Java程序来说，框架=jar包+配置文件。对于Vue来说，导入Vue的外部js文件就能够使用Vue框架了。

2、Vue框架的js文件获取

3、本地创建vue.js文件

说明1：使用HBuilderX编写vue.js

  • 第一步：在HBuilderX中创建工程

  • 第二步：在工程目录下创建script目录用来存放vue.js文件

  • 第三步：创建空vue.js文件在这里插入图片描述

  • 第四步：将官网提供的vue.js文件的内容复制粘贴到本地vue.js文件中

说明2：使用idea编写vue.js

  • 第一步：在idea中创建java-web工程
    在这里插入图片描述
  • 第二步：在web目录下创建script目录用来存放vue.js文件
  • 第三步：将官网提供的vue.js文件复制粘贴到本地的script目录中
    在这里插入图片描述

4、创建HTML文档并引入vue.js

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script language="JavaScript" src="script/vue.js"></script>
<script type="text/javascript">

</script>
</body>
</html>

第三节 Vue.js基本语法：声明式渲染

1、概念

1.1、声明式

『声明式』是相对于『编程式』而言的。

  • 声明式：告诉框架做什么，具体操作由框架完成
  • 编程式：自己编写代码完成具体操作

1.2、渲染

在这里插入图片描述
上图含义解释：

  • 蓝色方框：HTML标签
  • 红色圆形：动态、尚未确定的数据
  • 蓝色圆形：经过程序运算以后，计算得到的具体的，可以直接在页面上显示的数据、
  • 渲染：程序计算动态数据得到具体数据的过程

2、demo

2.1、定义js对象的2种方式（demo01）

说明：可以看到js有2种创建对象方式，写的是js代码不用引入vue.js文件，这是为了对比下面创建Vue对象的方式。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    function hello(){
        person.sayHello();
    }

    //定义js对象方式一：
    /*
    var person = new Object();
    person.pid = "p001";
    person.pname="jim";
    person.sayHello = function(){
        alert("HELLO world");
    }
    */
    //定义js对象方式二：
    var person = {
        "pid":"p001",
        "pname":"jim",
        "sayHello":function(){
            alert("HELLO world");
        }
    };
</script>
<div id="div0">
    <span>HELLO</span>
    <input type="button" value="打招呼" onclick="hello()"/>
</div>
</body>
</html>

2.2、vue声明式渲染（demo02）

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue.js文件-->
    <script language="JavaScript" src="script/vue.js"></script>
    <script language="JavaScript">
        window.onload=function(){//文档就绪事件函数

            /* new Vue({xxx}):创建Vue对象，里面的key加不加引号都可以。
                              里面的参数为{xxx}可以理解为一个对象
                 el: 用于指定Vue对象要关联的HTML元素。el就是element的缩写
                     通过id属性值指定HTML元素时，语法格式是：#id (选择器)
                 data: 设置了Vue对象中保存的数据
             */
            var vue = new Vue({
                el:"#div0",
                "data":{
                    msg:"hello!!!"
                }
            });
        }
    </script>
</head>
<body>
<div id="div0">
    <!-- 使用{{}}格式，指定要被渲染的数据 -->
    <span>{{msg}}</span>
</div>
</body>
</html>

说明：

  • 通过el属性指定选择器"#app"，来绑定属性值id="app"的div标签。
  • 通过data设置属性message和标签中的{{message}}进行绑定。
    在这里插入图片描述

3、查看声明式渲染的响应式效果

运行测试：
在这里插入图片描述

在这里插入图片描述
修改msg属性的值：
在这里插入图片描述
在这里插入图片描述

通过验证Vue对象的『响应式』效果，我们看到Vue对象和页面上的HTML标签确实是始终保持着关联的关系，同时看到Vue在背后确实是做了大量的工作。

第四节 Vue.js基本语法：绑定元素属性

第五节 Vue.js基本语法：双向数据绑定

第六节 Vue.js基本语法：条件渲染

第七节 Vue.js基本语法：列表渲染

第八节 Vue.js基本语法：事件驱动

第九节 Vue.js基本语法：侦听属性

第十节 Vue.js基本语法：简化写法

第十一节 练习

第十二节 Vue对象生命周期

相关文章