专栏首页eclipse编程人类高质量vue学习笔记(一)

人类高质量vue学习笔记(一)

1. vue 简介

vue 官方

官网:https://cn.vuejs.org/

官方解释:Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。

特点:

  • 简单:基于html、css、js
  • 高效:开发前端页面效率非常高
  • 响应式:实时监听属性的改变,立即更新视图的数据

总结:咱们中国人尤雨溪开发的一个开源的、简单的、高效的、响应式的前端技术。

2. 快速入门

2.1 引入 vue.js

<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

2.2 HelloWorld

<div id="app">
    {{ msg }}
</div>

<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app", 
        data:{    
            msg:"hello world"
        },
        methods:{
          
        }
    });
</script>

运行结果:

关键点:

  • const:表明这是一个常量。
  • new Vue({}):表明这是一个vue 应用。
  • el:vue 绑定的作用域范围,这里绑定的 dom 元素是 id 为 app 的 div。
  • data:用来定义一些属性,这里的属性是 msg。
  • methods:用来定义一些方法。
  • {{}}:插值语法,用于输出属性的值。不过如果遇到网速慢等情况,就会出现插值闪烁的情况。

插值闪烁:遇到网速慢的情况,页面数据未加载完会显示原始的{{}}。上面的例子如果遇到插值闪烁,页面就会显示 {{msg}}。

3. 常用指令

3.1 v-text

  • v-text 指令将 data 中的数据以文本的形式渲染到指定标签中。
  • 如果包含 html 标签,则一并输出。
  • 直接在 v-text 标签中写 属性名,不用写 {{}}。
<div id="app">
    <p v-text="title"></p>
    <p v-text="content"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",  
        data:{      
            title:"我爱中国!",
            content:"<p> 哈哈哈哈 </p>"
        },
    })
</script>

运行结果:

3.2 v-html

  • v-html 指令先解析 html 标签再将数据渲染到指定标签中,类似 js 的 innerHTML
  • 直接在 v-html 标签中写 属性名,不用写 {{}}。
<div id="app">
    <p v-html="content"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",  
        data:{      
            content:"<p> 哈哈哈哈 </p>"
        },          
    })
</script>

运行结果:

3.3 v-if

  • 通过条件判断控制页面元素是否展示
<div id="app">
        <p v-if="age==18">我今年18岁!!!</p>
        <span v-if="show">
            如果 show 为 true 则显示,否则不显示!
         </span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            show: true,
            age: 18
        },
    });
</script>

运行结果:

3.4 v-show

  • 用来控制页面元素是否展示
<div id="app">
  <h2 v-show="show"> show 为 true 展示内容!</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            show: true
        }
    });
</script>

运行结果:

v-show 和 v-if 的区别:

  • v-if 是动态的添加或者删除 DOM 元素
  • v-show 是设置标签的 display 为 none 的时候,该元素隐藏。

3.5 v-on

  • v-on 用来绑定事件
  • 语法:v-on:click="方法(参数)"
  • 简写:@click="方法名(参数)"

3.5.1 v-on 基本语法

<div id="app">
    姓名:{{name}}
    <hr>
    年龄:{{age}}
    <br>
    <input type="button" value="点击年龄加1" v-on:click="addChange">
    <br>
    <input type="button" value="点击年龄减1" @click="subChange">
    <br>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            name:"张无忌",
            age:40
        },
        methods: {
            addChange(){
                this.age++;
            },
            subChange(){
                this.age--;
            },
            change(age,name){
                this.age=age;
                this.name=name;
            }
        }
    });
</script>

3.5.2 v-on 事件函数传参

<div id="app">
        姓名:{{name}}
        <hr>
        年龄:{{age}}
        <br>
        <!-- vue事件传参 -->
<input type="button" value="年龄改为25,姓名改为周芷若" @click="change(25,'周芷若')">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            name:"张无忌",
            age:40
        },
        methods: {
            change(age,name){
                this.age=age;
                this.name=name;
            }
        }
    });
</script>

总结:

  • this 指向我们创建的 vue 实例。
  • 事件函数两种写法:
    • change:function(){}
    • change(){}

3.6 v-bind

  • v-bind 用来绑定 html 属性,动态更新 html 属性值
  • 语法:v-bind:属性名,例如 v-bind:href=""
  • 简写::属性名,例如 :href=""

3.6.1 基本语法

<div id="app">
    <a v-bind:href="url" >百度一下</a>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            url: "https://www.baidu.com",
        },
    });
</script>

3.6.2 绑定对象

❝v-bind:class="active:isUse",我们这里绑定了元素的 class 选择器,属性值是一个对象。当对象里面的 isUse 为 true 时,该元素就拥有了该类名。

<!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>v-bind</title>
    <style>
        .active {
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <a v-bind:href="url" v-bind:class="{active:isUse}">百度一下</a>
        <hr>
        <input type="button" value="点击修改超链接的颜色" @click="changeColor">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                url: "https://www.baidu.com",
                isUse: true
            },
            methods: {
                changeColor() {
                    this.isUse = !this.isUse
                }
            }
        });
    </script>
</body>
</html>

3.7 v-for

❝用来循环遍历数组,数组里面的数据可以是普通元素,也可以是对象

<div id="app">
     <span>姓名:{{user.name}}</span>
     <br>
     <span>年龄:{{user.age}}</span>
     <hr>
     <!-- 通过v-for 遍历对象 -->
     <span v-for="(user, index) in users" :key="user.id">
          {{user.name}} {{user.age}} <br>
     </span>
     <hr>
     <!-- 通过v-for遍历数组 -->
     <span v-for="(a, index) in address" >
        {{index}}  {{a}} <br>
     </span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const  app = new Vue({
        el: '#app',
        data: {
            user:{name:"张无忌",age:25},
            users:[{name:"张三",age:21},{name:"李四",age:26}],
            address:["北京","广东","深圳"]
        },
    });
</script>

运行结果:

注意

  • 一定要使用:key ,key 给每个节点做一个唯一标识,遍历速度更加高效。
  • 不推荐同时使用 v-ifv-for,因为 v-for 具有比 v-if 更高的优先级。

3.8 v-model

  • 使用 v-model 可以实现数据的双向绑定。
  • 双向绑定:vue 实例中 data 数据变化导致表单中数据变化,表单中数据变化导致 vue 实例中 data 数据发生变化。
  • MVVM 架构,双向绑定的机制
    • Model:vue 实例中的 data 数据
    • VM:ViewModel,数据监听器
    • View:页面展示的数据
<div id ="app">
     <input type="text" v-model="msg"> 
     {{msg}}
     <hr>
     <input type="button" value="点击修改msg的值" @click="change">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
 const app = new Vue({
    el: '#app',
    data: {
        msg:"我爱中国,我热爱这片土地!"
    },
    methods: {
        change(){
            this.msg="哈哈哈哈哈!";
        }
    }
 });
</script>

运行结果:

4. 修饰符

  • 修饰符:和事件同时使用,可以修改事件的触发机制
  • 常见的事件修饰符:
    • stop
    • prevent
    • once

4.1 事件修饰符

4.1.1 stop 事件修饰符

❝用来阻止事件冒泡,举个例子:点击子 div ,父 div 事件也会被点击。

<div id="app">
    <div class="father" @click="divClick">
        <input type="button" value="按钮" @click.stop="btnClick">
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
      el: "#app",
      data: {
      
      },
      methods: {
          btnClick(){
              alert('button被点击了');
          },
          divClick(){
              alert('父div被点击了');
          }
      }
  });
</script>

4.1.2 prevent 事件修饰符

❝用来阻止标签的默认行为

<a href="http://www.baidu.com/" @click.prevent="btnClick">百度一下</a>

4.1.3 once 事件修饰符

❝让指定事件只触发一次

<a href="http://www.baidu.com/" @click.prevent.once="btnClick">百度一下</a>

4.2 按键修饰符

  • 与键盘中的事件绑定在一起
  • 常见按键修饰符
    • enter
    • tab

4.2.1 enter 回车键修饰符

❝回车键触发事件

<div id ="app"> 
        <input type="text" v-model="msg" @keyup.enter="keyups">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
 const app = new Vue({
    el: '#app',
    data: {
        msg:"我爱你中国"
    },
    methods: {
        keyups(){
            this.msg="我爱你中国共产党!";
        }
    }
 });
</script>

4.2.2 tab 键修饰符

❝tab 键触发事件

<div id ="app"> 
    <input type="text" v-model="msg" @keyup.tab="keyups">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
 const app = new Vue({
    el: '#app',
    data: {
        msg:"我爱你中国"
    },
    methods: {
        keyups(){
            this.msg="我爱你中国共产党!";
        }
    }
 });
</script>

-END-

本文分享自微信公众号 - eclipse编程(eclipsecamp),作者:一颗雷布斯

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2021-08-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 人类高质量vue学习笔记(四)

    说起路由大家可能会立即联想到家里的路由器,我们都知道那玩意是用来分发网络的。

    一颗雷布斯
  • 人类高质量vue学习笔记(二)

    我们知道可以通过「插值表达式」显示 data 属性中的值,例如{{username}}

    一颗雷布斯
  • 人类高质量vue学习笔记(三)

    一颗雷布斯
  • 人类高质量 Java 学习路线【一条龙版】

    大家好,我是鱼皮。现在网上的编程资料实在太多了,而且人人肯定都说自己的最好,那就导致大家又不知道怎么选了。大部分的博主推荐资源,也就是把播放量高的视频说一遍,水...

    程序员鱼皮
  • 《编写高质量代码》学习笔记(1)

    前言 看大神推荐的书单中入门有这么一本书,所以决定把这本书的精华(自认为很有用的点),或许是我自己现在能用到的点都提炼出来,供大家参考学习。 以下内容均出自《...

    我没有三颗心脏
  • 《编写高质量代码》学习笔记(2)

    写着写着发现简书提醒我文章接近字数极限,建议我换一篇写了。 ---- 建议52:推荐使用String直接量赋值 一般对象都是通过new关键字生成的,但是Str...

    我没有三颗心脏
  • 《编写高质量代码》学习笔记(3)

    建议125:优先选择线程池 在Java1.5之前,实现多线程比较麻烦,需要自己启动线程,并关注同步资源,防止出现线程死锁等问题,在1.5版本之后引入了并行计算框...

    我没有三颗心脏
  • React实战——从零搭建一款轻量级个人OA系统

    随着前端技术的飞速发展, 我们需要不断学习前端技术, 如React, Vue, Nodejs等, 为了让大家更快速的掌握前端技能, 进阶高级工程师, 笔者每个月...

    徐小夕
  • 跳槽?前端面试知识点目录大全~

    金三银四,又到了一年一度的跳槽季,相信大家都在准备自己的面试笔记,我也针对自己工作中所掌握或了解的一些东西做了一个目录总结,方便自己复习。详细内容会在之后一一对...

    苏南
  • 一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构

    本文内容讲解的内容:一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构。

    夜尽天明
  • 写技术博客那点事

    写文章是一个短期收益少,长期收益很大的一件事情,人们总是高估短期收益,低估长期收益。往往是很多人坚持不下来,特别是写文章的初期,刚写完文章没有人阅读会有一种挫败...

    Fundebug
  • 一统江湖的大前端(7)React.js-从开发者到工程师

    许多入职前端的开发者,都是从熟练使用框架进行业务逻辑开发而开始的。说到框架,Vue,React,Angular三大框架都已经圈定了自己的用户群,从粉丝的数量...

    大史不说话
  • java学习笔记(中级篇)—java实现高质量图片压缩

    使用java几十行代码实现一个高质量图片压缩程序,再也不用去自己找网络的压缩程序啦!而且很多网上的工具还有水印或者其他的限制,自己动手写一个简单的应用,是再合适...

    chlinlearn
  • N年程序员都在用的一些协作、开发相关的工具

    这篇文章给大家分享一些,个人日常开发、写作相关的一些工具。文章涉及的到一些软件可能是收费版本,大家需要的可以通过私下联系我来获取。

    A梦多啦A
  • 个人分享--web前端学习资源分享

    6月份开始出没社区,现在差不多9月了,按照工作的说法,就是差不多过了三个月的试用期,准备转正了!一般来说,差不多到了转正的时候,会进行总结或者分享会议!那么今天...

    守候i
  • 【Vue原理】响应式原理 - 白话版

    白话版,就是让大家不用花费太多脑力,不用消耗太多时间,就能轻松地看完并大致了解内容。

    神仙朱
  • 写给初中级前端的高级进阶指南(JS、TS、Vue、React、性能、学习规划)

    我曾经一度很迷茫,在学了Vue、React的实战开发和应用以后,好像遇到了一些瓶颈,不知道该怎样继续深入下去。相信这也是很多一两年经验的前端工程师所遇到共同问题...

    ssh_晨曦时梦见兮
  • 【码云周刊第 11 期】追踪代码大仓库? Git 的拿手好戏!

    每周为您推送最有价值的开源技术内参! 一周热门资讯回顾 ActFramework 1.0 正式发布, Java MVC 框架 TIOBE 3 月编程语言排行榜...

    码云Gitee
  • 2019 前端秋季社招面试经历总结(二年多经验)

    推荐阅读:前端硬核面试专题[6],内容包含:HTML + CSS + JS + ES6 + Webpack + Vue + React + Node + HTT...

    夜尽天明

扫码关注云+社区

领取腾讯云代金券