Vue 学习笔记(一)初遇

北冥有只鱼

为什么要学VUE?

考虑到有些同学还在用原生的JS,不知道Jquery,这里我先介绍一下Jquery.在介绍Jquery我大致的介绍一下JavaScript。

我们用JavaScript做什么?

WEB前端有三层:

     
     HTML: 从语义的角度,描述页面结构
     CSS: 从审美的角度,描述样式(美化页面)
     JavaScript: JavaScript:从交互的角度,描述行为(提升用户体验)    

我个人认为所谓的描述行为就是:

  • 对HTML的结点(就是HTML文件中的标签,比如Div)增删查改。
  • 改变结点属性和样式,比如背景的颜色,改变类样式。
  • 制作一些动画,比如滑入或淡出。
  • 监听事件,在某一事件被触发之后,对HTML的结点做上面两点的操作
  • Ajax(异步请求)

那写JavaScript不好吗?

不好,体验十分的不良好。比如一个Ajax请求,你要自己去适配不同的浏览器,用原生JavaScript写是这样子的:

 var xmlhttp;
//实例化XMLHTTPRequest对象
if(window.XMLHttpRequest)
{
    //针对ie7+、firefox、chrome等浏览器
    xmlhttp=new XMLHttpRequest();
}else
 {
        //针对ie5、6
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
  }
xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
                 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
    xmlhttp.send();

Jquery写是这样子的:

  $(function(){
        //请求参数
        var list = {};
        //
        $.ajax({
            //请求方式
            type : "POST",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : "http://127.0.0.1/admin/list/",
            //数据,json字符串
            data : JSON.stringify(list),
            //请求成功
            success : function(result) {
                console.log(result);
            },
            //请求失败,包含具体的错误信息
            error : function(e){
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    });

有没有看到,我们不用再自己适配各种浏览器了,是不是很开心啊。
而且,逻辑结构更为清晰。

仅仅是书写很繁琐,代码量多和浏览器兼容性问题,就让我十分的厌烦写原生的JavaScript。有更简单的,为什么我还要记这一套复杂的。
在学了Jquery之后,我就选择性的忘记了原生方式写Ajax。

Jquery是什么?

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.-----引自Jquery官网

Jquery是一个体积小、速度快、特性丰富的JavaScript库。它使得一些对HTML的遍历、处理,甚至是操纵结点、制作动画更为简单,同时提供了一些更加简单实用的API,并且是能够跨平台的。

库、框架之间的区别

框架与库之间最本质区别在于控制权: You call Library.Framework calls you.(控制反转)

我个人觉得库更像是一个工具集、API的仓库,就像一个建筑队一样的仓库里存放了许多工具,建筑工人可以根据自己的需要取出自己想要的工具,去完成自己想要完成的操作。当然你也可以不用。就像你引入了Jquery库,写Ajax的时候,你仍然可以用原生JavaScript的那一套。没有一个整体贯穿的思想。

框架的话,更像是一种解决方案,有一套整体贯穿的思想,致力于去解决的问题。
比如说Spring框架,在刚开始学Spring的时候,很多的都会先去讲解耦合.讲Hibernate和MyBatis之前会先讲JDBC,在用过Hibernate和MyBatis之后, 你就会觉得JDBC十分的不好用。Hibernate和MyBatis进入官网之后,官方在介绍自己的时候,就会有明确的定位。

那Jquery不好吗?

  • 挺好的,前提是你的页面相对来说比较简单,在知乎上看一个Yox(一个前端框架)的作者在提到在页面有大量的表单的情况下,Jquery写起来太复杂了,你知道复杂的话,往往需要时间,而企业开发是注重效率的。
  • 还有就是速度,Jquery是基于选择器,直接对DOM结点进行操作,这是非常消耗资源的。为什么直接对DOM结点操纵会非常消耗资源啊? 这个解释起来有一点那么的复杂,大致上是这样子的: 操作HTML结点的时候,需要遍历DOM树,页面比较复杂的时候,比较消耗内存,第二点直接对结点操作,操作完之后,浏览器会再重新组织HTML的结点。

那什么叫DOM?

JavaScript基础分为三个部分:
- ECMAScript:JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
- DOM:文档对象模型(Document object Model),操作网页上的元素的API。比如让盒子移动、变色、轮播图等
- BOM:浏览器对象模型(Browser Object Model),操作浏览器部分功能的API。比如让浏览器自动滚动。
结点(Node):

构成 HTML 网页的最基本单元。网页中的每一个部分都可以称为是一个节点,比如:html标签、属性、文本、注释、整个文档等都是一个节点。
虽然都是节点,但是实际上他们的具体类型是不同的。常见节点分为四类:

  • 文档节点(文档):整个 HTML 文档。整个 HTML 文档就是一个文档节点。
  • 元素节点(标签):HTML标签。
  • 属性节点(属性):元素的属性。
  • 文本节点(文本):HTML标签中的文本内容(包括标签之间的空格、换行)。
  • 节点的类型不同,属性和方法也都不尽相同。所有的节点都是Object。

DOM(Document Object Model): 文档对象模型
DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。
浏览器解析过程: HTML加载完毕,渲染引擎会在内存中把HTML文档,生成一个DOM树,getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性(实际的过程比这个更复杂)。

DOM树:(一切都是节点)

DOM的数据结构如下:
image.png

总结

一切都是因为页面在逐渐的变的复杂,虽然页面变的复杂,追求速度仍然是程序员的目标,不断的优化,不断的前进。

MVVM模式

MVVM是Model-View-ViewModel的简写。
image.png
MODEL: 数据
View: 视图(可以理解为HTMl结点)
VM: view-model负责业务逻辑处理(比如Ajax请求等),对数据进行加工后交给视图展示
通过VM,数据可以在视图中显示出来,这叫数据绑定(Data Bindings)。
通过VM,数据可以取出View中的数据, 这叫 DOM监听(DOM LIsteners),

Vue的定位

  • 渐进式的javaScript框架(可插拔、可扩展)

    • 渐进式:核心库非常小,根据功能扩大,不断的增加新库
    • 响应式的: 数据在发生变动的时候,Vue会帮你更新所有网页中用到它的地方

一个响应式的很好例子:
image.png
当我把17改为25的时候,第五行的和就会自动跟着变
image.png

Vue初体验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
      <!-- 首先你需要引入Vue,Vue版本:v2.6.10-->
    <script src = "../lib/vue.js"></script>
</head>
<body>
<!--这个div区域就是MVVM中的 View-->
     <div id="app">
            <h1>{{name}}</h1>
    </div> 
</body>
<script>
    <!--myVue就是MVVM中的VM-->
    var myVue = new Vue({
        el:'#app' <!--当前Vue对象接管的区域-->,
        data:{
            name:'你好啊 Vue',
            <!--Data是MVVM中的MODEL部分-->
        },
    
    });
</script>
</html>

取值方式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- <script src = "../lib/vue.js"></script> -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
<div id="app">
    {{message}}
    <h1 v-text="message"></h1>
    <h1 v-html="message"></h1>
    <h1 v-html="message2"></h1>
    <h1 v-html="message3"></h1>
  </div>
</body>
<script>
  var app2 = new Vue({
    el: '#app',
    data: {
      message: '<a href="https://www.baidu.com/?tn=78040160_5_pg&ch=1">百度</a>',
      message2:'a',
      message3:'<a href="https://www.baidu.com/?tn=78040160_5_pg&ch=1"百度</a>'
    }
  })
</script>

</html>

效果:
image.png
通过效果我们可以看出:

  • {{data中的数据名}}: 原样输出(即使数据具备HTML标签的语义,message中数据是一个a标签)
  • v-text: 原样输出数据
  • v-html: 对具备HTML标签语义的数据进行渲染。我们姑且可以可以将渲染理解为将数据变成HTML的结点。

假如该数据不是HTMl的标签, 原样输出,假如是HTML标签,但是标签不完整(比如缺少了<),Vue就无法判断你这是一个普通的数据还是HTML标签,就不显示。
v-text特性被称为指令。指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性

V-bind指令绑定元素特性

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- <script src = "../lib/vue.js"></script> -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    {{message}}
    <h1 v-text="message"></h1>
    <h1 v-html="message"></h1>
    <h1 v-html="message2"></h1>
    <h1 v-html="message3"></h1>


    <span v-bind:title="titleMessage">
      鼠标悬停几秒钟查看此处动态绑定的提示信息!
    </span>
    <!-- 省略版的写法 -->
    <br/>
    <span :title="titleMessage">
      鼠标悬停几秒钟查看此处动态绑定的提示信息!
    </span>
    <img  v-bind:src="img">
  </div>
</body>
<script>
  var app2 = new Vue({
    el: '#app',
    data: {
      message: '<a href="https://www.baidu.com/?tn=78040160_5_pg&ch=1">百度</a>',
      message2:'a',
      message3:'<a href="https://www.baidu.com/?tn=78040160_5_pg&ch=1"百度</a>',
      titleMessage:'页面加载于 ' + new Date().toLocaleString(),
      img:'aa.jpg'  
    }
  })
</script>
</html>

效果:
image.png
aa.jpg和该页面同级。
title 属性规定关于元素的额外信息,这些信息通常会在鼠标移到元素上时显示一段工具提示文本(tooltip text)。
V-bind指令可以将html标签的属性和数据绑定在一起。

监听事件和双向绑定

Vue中v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。
例子:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="../lib/vue.js"></script>
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
</head>
<body>
  <div id="app">
    <button v-on:click="welcome">Greet</button>
    <button v-on:click="greet">Greet</button>
    双向绑定:<input type="text" v-model="message">
    <h1>{{message}}</h1>
  </div>
</body>
<script>
  var app2 = new Vue({
    el: '#app',
    data: {
      message: 'Vue.js',
    },
    methods: {
      welcome() {
        alert('Hello' + this.message + '!');
      },
      greet: function (event) {
        // `this` 在方法里指向当前 Vue 实例
        alert('Hello ' + this.name + '!')
        // `event` 是原生 DOM 事件
        if (event) {
          alert(event.target.tagName)
        }
      }
    }
  })
</script>
</html>

效果:
image.png
折腾了半天,还是没办法上传Gif,只好一张,一张的贴。
image.png
image.png
image.png
v-model指令可以实现标签和数据的双向的绑定。
什么意思呢? v-model可以将文本的框数据取出更新message的值。
然后message的值更新的时候,也可以出现在输入框中.
如上图所示

参考资料:

阅读 1.4k
25 声望
11 粉丝
0 条评论
25 声望
11 粉丝
文章目录
宣传栏