Vue的学习

Posted 2022-12-01 未来.....

tags:

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

今天接触了前端VUE，听起来很简单，简单引用了一下官网的介绍。

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

官网链接：https://cn.vuejs.org/v2/guide/installation.html

1、简单来说VUE具有一下特点：

1.易用：

学习曲线平缓，api简洁，容易上手。

2.灵活：

如果你已经有一个现成的服务端框架，你可以将vue作为其中的一部分嵌入，带来更加丰富的交互系统，或者你希望将更多业务逻辑放到前端来实现，那么vue的核心库及其生态系统也可以满足你的各式需求。
vue允许你将网页分割成可复用的组件，每个组件都可以包含自身的html,css,js文件，以用来渲染网页中相应的地方。
Vue.js通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件（component）中，我们只要先在父级应用中写好各种组件标签（占坑），并且在组件标签中写好要传入组件的参数（就像给函数传入参数一样，这个参数叫做组件的属性），然后再分别写好各种组件的实现（填坑），然后整个应用就算做完了。

3.高效：

虚拟dom：其数据全部在内存中，只有js引擎参与其中，在计算完毕才真正将DOM操作提交，将DOM操作变化反映到DOM树上。
而真实dom会有浏览器渲染层在其中

3.响应式数据驱动：

Vue是首先把值和js对象进行绑定，然后修改js对象的值，Vue框架就会自动把dom的值就行更新。
开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图的。
vue 目前通过 Object.defineProperty 来实现数据响应式

VUE可以在好多软件上面写：IDEA，VScode，WS。。等等都可以，这里我使用了WS(WebStorm)，他和IDEA非常相似，使用起来没有任何不适感。

1、1 开始来写第一个Vue程序，采用Html页面编写：

这里因为网速问题，所以将Vue的js拷贝到本地了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello world</title>
    <!--①引入vue的库-->
    <script src="./js/vue.js"></script>
</head>
<body>
    <!--②创建一个双标签并为该标签起id-->
    <div id="app">
        <!--显示数据-->
        message
    </div>

    <!--③创建自己的js代码-->
   <script>
        /*创建一个Vue对象*/
        var app=new Vue(
            el:"#app",
            data:
                message:"我也会Vue了",
            
        );
   </script>
</body>
</html>

1、2 el:挂载点

通过上面的代码，可以发现有一个叫做el：的代码，里面跟了一个“#app”，学过前端的都知道，这个是id选择器，那么问题来了。

Vue实例的作用范围是什么呢？
是否可以使用其他选择器？
是否可以设置其他的dom元素呢？

还有el：挂载点是什么呢？

开始测试：
标签选择器：

<body>
    <span>message</span>
</body>
<script>
      const app=new Vue(
           el:"span",
           data:
                message:"我是span标签...."
           
      );

class选择器：

<body>
    <div class="mash">
        message
        <span>message</span>
    </div>
</body>
<script>
      const app=new Vue(
           el:".mash",
           data:
                message:"我是span标签...."
           
      );
</script>

现在解析上面的问题：

Vue实例的作用范围是什么呢？
Vue会管理el选项命中的元素及其内部的后代元素。
是否可以使用其他选择器？
可以使用其他的选择器，但是建议使用ID选择器。
是否可以设置其他的dom元素呢？
可以使用其他的双标签，但是不能使用HTML和Body

el：挂载点:

el是用来设置Vue实例挂载(管理)的元素。
Vue会管理el选项命中的元素及其内部的后代元素。
可以使用其他的选择器，但是建议用ID选择器。
可以使用其他的双标签，但是不能使用HTML和Body。

1、3 Data数据对象：

我们看过el之后，又发现了一个关键词，data，顾名思义：数据的意思，上面采用了单条数据，那么想想可以使用对象或者集合吗？
开始测试：

<body>
<div id="app">
    <!-- 显示数据-->
    message
    <br>
    <span>person.name</span><br>
    <span>person.age</span><br>
    <span>list[0].name</span><br>
    <span>list[1].name</span><br>
</div>
<!--3创建自己的js代码-->
<script>
    /**
     * 创建一个vue对象
     */
    var app = new Vue(
        el: "#app",
        data: 
            message: "我也会vue了",
            person: 
                name: "yth",
                age: "18"
            ,
            list: [
                name: "暗裔剑魔",
                name: "沙皇",
            ]
        
    );
</script>
</body>

这里使用了对象和list集合进行了测试，测试结果：

小结：

Vue中用到的数据定义在data中。
data中可以写复杂类型的数据。
渲染复杂类型数据时，遵守js的语法即可。

2、经过上面的初步练习，大概掌握了基本语句，下面开始Vue指令学习：

Vue指令简介：

通过Vue实现常见的网页效果。
Vue指令指的是，以v-开头的一组特殊语法。

2、1常用的Vue指令：

大致分为三类：
一、内容绑定，事件绑定。

v-text
v-html
v-on基础

二、显示切换，属性绑定。

v-show
v-if
v-bind

三、列表循环，表单元绑定。

v-for
v-on补充
v-model
以上就是常用的基本命令，具体如何使用，下面将分类讲解。

2、1 V-text：设置标签的文本值(textContext)

<body>
<div id="app">
    <span v-text="message+',真的吗'">你好呀</span>
    <br>
    <span>你好呀!message+"，哈哈哈哈"</span>
    <br>
    <p v-text="context"></p>
</div>
</body>
<script>
    const app = new Vue(
            el: "#app",
            //数据标志
            data: 
                //基本数据类型和字符串
                message: "你好，嘿嘿",
                context: "<p style='color: red'>时间不在于你拥有多少，而在你如何使用</p>"
            
        
    )
</script>

发现context中的标签语句不能被正确解析，不要慌，下面有解决方法。

小结：

v-text指令的作用是：试着标签的内容(textContent)。
默认写法会替换全部内容，使用差值表达式，可以替换指定内容。
内部支持写表达式。

2、2 V-html：设置标签的innerHTML

<body>
<div id="app">
    <span v-text="message+',真的吗'">你好呀</span>
    <br>
    <span>你好呀!message+"，哈哈哈哈"</span>
    <br>
    <p v-text="context"></p>
    <!--与v-text:的区别就是可以解析html标签的内容-->
    <p v-html="context"></p>
</div>
</body>
<script>
    const app = new Vue(
            el: "#app",
            //数据标志
            data: 
                //基本数据类型和字符串
                message: "你好，嘿嘿",
                context: "<p style='color: red'>时间不在于你拥有多少，而在你如何使用</p>"
            
        
    )
</script>

此时发现，context中的内容被正确解析出来。

小结：
-v-html指令的作用是：设置元素的innerHTML。

内容中有html结构会被解析为标签。
v-text指令无论内容是什么，指挥解析为文本。
解析文本使用v-text，需要解析v-html结构使用v-html。

2、3 V-on(基础)：为元素绑定事件。

<body >
<div id="app">
     <input type="button" value="点击事件" v-on:click="doIm"/>
    <!--建议大家使用@绑定事件,程序员是能少一个字母就少一个字母-->
     <input type="button" value="点击事件" @click="doIt"/>
     <input type="button" value="点击事件" @dblclick="doIt"/>
    <br>
    message
</div>
</body>
<script>
    const app=new Vue(
          el:"#app",
          //数据标志
          data:
             message:"嘻嘻",
          ,
          //方法的定义
          methods:
              //基本数据类型和字符串
              doIt()
                 this.message="你好呀..."
              ,
              doIm()
                  this.message="嘻嘻..."
              ,
          
        
    )
</script>

结果就不展示了，不会制作动图。。。。

小结：

v-on指令的作用是：为元素绑定事件。
事件名不需要写on。
指令可以简写为@。
绑定的方法定义在methods属性中。
方法内部通过this关键字可以访问定义在data数据中。.

2、4 练习----计算器

<body>
<!-- html结构 -->
<div id="app">
    <!-- 计数器功能区域 -->
    <div class="input-num">
        <button @click="decr">
            -
        </button>
        <span v-html="num"></span>
        <button @click="incr">
            +
        </button>
    </div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<!-- 编码 -->
<script>
    var app = new Vue(
        el: "#app",
        data: 
            num: 0,
            max: 10,
            min: 0
        ,
        methods: 
            //加
            incr() 
                if (this.num >= this.max) 
                    alert("别点了，到头了!");
                 else 
                    this.num++;
                
            ,
            //减
            decr() 
                if (this.num <= this.max) 
                    alert("别点了，到底了!");
                 else 
                    this.num--;
                

            
        
    )
</script>
</body>

2、5 v-show：根据表达式的真假，切换元素的显示和隐藏

<body>
<div id="app">
<img src="images/00.jpg" v-show="true">
<img src="images/01.jpg" v-show="isShow">
<img src="images/01.jpg" v-show="age>=16">
</div>
</body>
<script>
    var app = new Vue(
        el:"#app",
        data:
            isShow:false,
            age:16
        
    )
</script>

测试结果：发现 v-show是将样式改成了隐藏。

小结：

v-show指令的作用是：根据真假切换元素的显示状态。
原理是修改元素的 display，实现显示隐藏。
指令后面的内容，最终都会解析为布尔值。
值为true元素显示，值为false元素隐藏。
数据改变之后，对应元素的显示状态会同步更新。

2、6 v-if：根据表达式的真假，切换元素的显示和隐藏(操作dom元素)

<body>
<div id="app">
    <p v-if="true">我是一个标签</p>
    <p v-if="isShow">我是第二个标签</p>
    <p v-if="age>18">我是第三个标签</p>
</div>
</body>
<script>
    var app = new Vue(
        el:"#app",
        data:
            isShow:false,
            age:19
        
    )
</script>

测试结果：发现v-if将这一行给隐藏掉了。

小结：

v-if指令的作用是：根据表达式的真假切换元素的显示状态。
本质是通过操纵dom元素来切换显示状态。
表达式的值为true，元素存在于dom树中，表达式的值为false，从dom树中移除。
频繁的切换使用v-show,反之使用v-if，前者的切换消耗小。

2、7 v-bind：设置元素的属性(比如:src,title,class等)

<body>
<div id="app">
    <img v-bind:src="imgSrc" v-bind:title="imgTitle+'gfgf'">
    <!--    <img >-->
</div>
</body>
<script>
    var app = new Vue(
        el:"#app",
        data:
            imgSrc:"./images/00.jpg",
            imgTitle:"123",
        
    )
</script>

这里就不放测试结果了，还是因为不会制作动图。。。。他会实现你把鼠标放在图片上，会显示你设置的title名称。

v-bind:class作用：条件1:条件2
如果条件2成立，那么条件1会被设置成class类名。
如果条件2不成立，那么class就不会设置类名。

<style>
        .activeborder: 9px solid red
    </style>
<body>
<div id="app">
    <img v-bind:src="imgSrc" v-bind:title="imgTitle+'gfgf'">
    <img v-bind:src="imgSrc" v-bind:class="active:isActive">
    <!--    <img >-->
</div>
</body>
<script>
    var app = new Vue(
        el:"#app",
        data:
            imgSrc:"./images/00.jpg",
            imgTitle:"123",
            isActive:false,
        
    )
</script>

测试结果：条件2成立，条件1被设置上去了。

小结：

v-bind指令的作用是：为元素绑定属性。
完整写法是： v-bind:属性名。
简写的话可以直接省略 v-bind,只保留 :属性名。
需要动态的赠删 class建议使用对象的方式。

做个小练习：

2、8 图片切换

<body>
<div id以上是关于Vue的学习的主要内容，如果未能解决你的问题，请参考以下文章 
 vue学习
 vue教程1-05 事件 简写事件对象冒泡默认行为键盘事件
 vue基础 —— 单网页版的Vue学习 基础
 vue基础 —— 单网页版的Vue学习 基础
 vue基础 —— 单网页版的Vue学习 基础
 vue属性绑定和属性简写