Vue-00-笔记

Posted 2021-07-15 寻7

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue-00-笔记相关的知识，希望对你有一定的参考价值。

Vue-系列-笔记

一、Vue 快速入门
二、Vue的学习内容

一、Vue 快速入门

1.1、Vue的介绍

Vue是一套构建用户界面的渐进式前端框架。
只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。
通过尽可能简单的API来实现响应数据的绑定和组合的视图组件。
特点
易用：在有html、CSS、javascript的基础上，快速上手。
灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
性能：20kbmin+gzip运行大小、超快虚拟DOM、最省心的优化。

1.2、Vue和JQuery区别

Vue和JQuery是什么？
Vue是什么？

Vue.js是一个前端JavaScript框架，用于构建用户界面。它是开源的。当使用其他JavaScript库时，它还可以用作集成工具。它本质上是增量自适应的。Vue还用作Web应用程序框架，可以为单页面应用程序提供支持。它创建于2014年，是跨平台的。

从技术角度讲，Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来，通过对数据的操作就可以完成对页面视图的渲染。

Vue主要用于前端开发，如组件，声明性UI等。
JQuery是什么？

JQuery是一个跨平台的JavaScript库。它旨在简化HTML的客户端脚本。它也是开源的。许多分析表明它是最常用和广泛部署的JavaScript库。

JQuery语法旨在轻松导航文档，例如选择DOM元素，创建动画，处理事件和开发Ajax应用程序。它还可以用于在JavaScript库之上创建插件。
Vue和JQuery区别是什么？
1、两者的未来发展的区别

Vue的介绍：Vue是一个刚兴起不久的前端框架，有一套完整的体系，是一个精简的MVVM。从技术角度讲，Vue.js专注于MVVM模型的ViewModel层，通过双向数据绑定把Vue层和Model层连接起来，通过对数据的操作就可以完成对页面视图的渲染。Vue以它独特的优势简单、快速、组合、紧凑、强大而迅速崛起。

JQuery介绍：JQuery是一个类库，提供了很多方法，不能算框架。在过去和现在JQuery是最流行的web前端js库，可是现在无论国内还是国外，他的使用率正在渐渐被其他的js库所替代。随着浏览器厂商对H5规范统一遵循以及ECMA6在浏览器端的实现，JQuery的使用率会越来越低。
2、在操作思想上有本质的区别：

Vue是通过Vue对象将数据和View完全分离开的，对数据操作不在引用相应的DOM对象；主要是操作数据

Vue基于一种MVVM模式，使用数据驱动的方式，通过Vue对象将数据和View完全分离开来。对数据进行操作，不在需要引用相应的DOM对象，通过Vue对象，将数据和相应的DOM对象相互绑定起来。

jQuery是使用选择器（$）选取DOM对象，并对其进行赋值、取值、事件绑定等操作；主要是操作DOM

JQuery是直接操作DOM；使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作；和原生的js区别只在于可以更方便的选取和操作DOM对象；数据和界面是在一起，比如获取input标签的内容， $(‘input’).val();还是依赖DOM元素的值。
3、侧重点不同

Vue侧重数据绑定，可以应用于复杂数据操作的后台页面。如：表单填写页面

JQuery侧重样式操作，动画效果等；可以应用于一些html5的动画页面，一些需要js来操作页面样式的页面中。

1.3、Vue的快速入门

开发步骤

下载和引入vue.js文件。
编写入门程序。
视图：负责页面渲染，主要由HTML+CSS构成。
脚本：负责业务数据模型（Model）以及数据的处理逻辑。

代码实现

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>快速入门</title>
    </head>
    <body>
        <!-- 视图 -->
        <div id="div">
            {{msg}}
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        // 脚本
        new Vue({
            el:"#div",
            data:{
                msg:"Hello Vue"
            }
        });
    </script>
</html>

1.4、Vue快速入门详解

Vue 核心对象：每一个 Vue 程序都是从一个 Vue 核心对象开始的。
```
let vm = new Vue({
 选项列表;
});
```
选项列表
el选项：用于接收获取到页面中的元素。(根据常用选择器获取)。
data选项：用于保存当前Vue对象中的数据。在视图中声明的变量需要在此处赋值。
methods选项：用于定义方法。方法可以直接通过对象名调用，this代表当前Vue对象。
数据绑定
在视图部分获取脚本部分的数据。
{{变量名}}

1.5、Vue快速入门的升级

代码实现

<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>快速入门升级</title>
	</head>
	<body>
	    <!-- 视图 -->
	    <div id="div">
	        <div>姓名：{{name}}</div>
	        <div>班级：{{classRoom}}</div>
	        <button onclick="hi()">打招呼</button>
	        <button onclick="update()">修改班级</button>
	    </div>
	</body>
	<script src="js/vue.js"></script>
	<script>
	    // 脚本
	    let vm = new Vue({
	        el:"#div",
	        data:{
	            name:"张三",
	            classRoom:"黑马程序员"
	        },
	        methods:{
	            study(){
	                alert(this.name + "正在" + this.classRoom + "好好学习!");
	            }
	        }
	    });
	
	    //定义打招呼方法
	    function hi(){
	        vm.study();
	    }
	
	    //定义修改班级
	    function update(){
	        vm.classRoom = "传智播客";
	    }
	</script>
</html>