Vue 学习笔记(一)初遇

时间  2019-12-27
标签 vue 学习 笔记 繁體版
原文   原文链接

为何要学VUE?

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

咱们用JavaScript作什么?

WEB前端有三层:html

HTML: 从语义的角度，描述页面结构
     CSS: 从审美的角度，描述样式（美化页面）
     JavaScript: JavaScript：从交互的角度，描述行为（提高用户体验）

我我的认为所谓的描述行为就是:前端

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

那写JavaScript很差吗？

很差，体验十分的不良好。好比一个Ajax请求，你要本身去适配不一样的浏览器，用原生JavaScript写是这样子的:vue

var xmlhttp;
//实例化XMLHTTPRequest对象
if(window.XMLHttpRequest)
{
    //针对ie7+、firefox、chrome等浏览器
    xmlhttp=new XMLHttpRequest();
}else
 {
        //针对ie五、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写是这样子的:java

$(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);
            }
        });
    });

有没有看到，咱们不用再本身适配各类浏览器了，是否是很开心啊。
并且，逻辑结构更为清晰。jquery

仅仅是书写很繁琐，代码量多和浏览器兼容性问题，就让我十分的厌烦写原生的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官网ajax

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

库、框架之间的区别

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

我我的以为库更像是一个工具集、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的值更新的时候，也能够出如今输入框中.
如上图所示

参考资料:

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程