Vue的学习(一)

最新推荐文章于 2023-12-24 22:42:00 发布

未来.....

最新推荐文章于 2023-12-24 22:42:00 发布

阅读量487

点赞数 4

分类专栏： VUE 文章标签： vue html js

本文链接：https://blog.csdn.net/weixin_43451430/article/details/116170812

版权

VUE 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

今天接触了前端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>
        .active{border: 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="mask">
    <div class="center">
        <h2 class="title">
            图片切换
        </h2>
        <!-- 图片 -->
        <img v-bind:src="images[index]" alt="" />
        <!-- 左箭头 -->
        <a href="javascript:void(0)"  class="left" @click="prev" v-if="index>0">
            <img src="./images/prev.png" alt="" />
        </a>
        <!-- 右箭头 -->
        <a href="javascript:void(0)" class="right" @click="nx" v-show="index<images.length-1">
            <img src="./images/next.png" alt="" />
        </a>
    </div>
</div>
</body>
<script>
    var app=new Vue({
        el:"#mask",
        data:{
            //定义所有的图片
            images:[
                "images/00.jpg",
                "images/01.jpg",
                "images/02.jpg",
                "images/03.jpg",
                "images/04.jpg",
                "images/05.jpg",
                "images/06.jpg",
                "images/07.jpg",
                "images/08.jpg",
                "images/09.jpg",
                "images/10.jpg",
            ],
            //定义数组的下标
            index:0,
        },
        methods:{
            nx(){
                this.index++;
            },
            prev(){
                this.index--;
            }
        }
    })
</script>

这里就不放测试结果图了，简单说一下，图片在第一张的时候，向左的按钮消失，图片在最后一张的时候不能点击向右的按钮。

2、9 v-for：根据数据生成列表结构

<body>
<div id="app">
    <ul>
        <li v-for="item in arr":title="item">
            {{item}}
        </li>
        <li v-for="(item,index) in objArr">
            {{item.name}}
        </li>
    </ul>
</div>
</body>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            arr:[1,2,3,4,5],
            objArr:[
                {name:"你好呀"},
                {name:"嘻嘻"},
            ]
        }
    })
</script>

测试结果图：
在这里插入图片描述

小结：

v-for指令的作用是：根据数据生成列表结构。
数组经常和 v-for结合使用。
语法是 (item,index) in 数据。
item和index可以结合其他指令一起使用。
数组长度的更新会同步到页面上的，是响应式。

2、10 v-on(补充)：传递自定义参数，事件修饰符。

<body>
<div id="app">
    <button @click="addStudent">增加新同学</button>
    <ul>
        <li v-for="(item,index) in student":title="item.age">
            {{index+1}}---->{{item.name}}
        </li>
    </ul>
</div>
</body>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            student:[
                {name:"剑魔",age:18},
                {name:"劲夫",age:19},
                {name:"福星",age:20},
                {name:"盲仔",age:21},
            ],
        },
        methods:{
            addStudent:function () {
                var o={name:"龙魂",age:22};
                this.student.push(o);
            }
        }
    })
</script>

测试结果：点击按钮会增加人数。

小结：

事件绑定的方法写成函数调用的形式，可以传入自定义参数。
定义方法时需要定义形参来接收传入的实参。
事件的后面跟上.修饰符可以对事件进行限制。
.enter 可以限制触发的按键为回车。
事件修饰符有多种。

2、11 v-model：获取和设置表单元素的值(双向绑定)。

<div id="app">
    <button @click="changeName">点击</button><br>
    <!--v-model属于双向绑定，绑定的是表单元素。-->
    <input type="text" v-model="name" @keyup.enter="change"/><br>
    <textarea v-model="name"></textarea>

</div>
</body>
<script>
    const app=new Vue({
            el:"#app",
            //数据标志
            data:{
                name:"一板一眼就会滋生弱点。"
            },
            //方法的定义
            methods:{
                changeName(){
                    this.name="夜晚越黑暗，星星就越明亮。"
                },
                change(){
                    alert(this.name);
                }
            }
        }
    )
</script>

小结：

v-model指令的作用是便捷的设置和获取表单元素的值。
绑定的数据会和表单元素值相关联。
绑定的数据<-- -->表单元素的值。

未来.....

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue的学习(一)

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

扫一扫