1、Vue 笔记(初识 Vue 、Vue 的基本指令、事件修饰符)

文章目录

    • 什么是 Vue
    • 框架和库的区别
    • MVC 与 MVVM 的图解关系
    • 第一个 Vue 程序
    • el 挂载点
    • data 数据
    • Vue 中的 `v-text` 指令
    • Vue 中的 `v-html` 指令
    • Vue 中的 `v-on` 指令
    • Vue 中的 `v-show` 指令
    • Vue 中的 `v-if` 指令
    • Vue 中的 `v-bind` 指令
    • Vue 中的 `v-for` 指令
    • Vue 中的 `v-model` 指令
    • 事件修饰符(stop、prevent、capture、self、once)
    • Vue 指令之 `v-for` 和 `key` 属性

什么是 Vue

Vue 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用(SPA)提供驱动。


框架和库的区别

  • 框架:是一套完整的解决方案;对项目的侵入性较大,项目如果需要更换框架,则需要重新架构整个项目。
    • 例如:node 中的 express;

  • 库(插件):提供某一个小功能,对项目的侵入性较小,如果某个库无法完成某些需求,可以很容易切换到其它库实现需求。
    • 1、从Jquery 切换到 Zepto
    • 2、从 EJS 切换到 art-template

MVC 与 MVVM 的图解关系

1、Vue 笔记(初识 Vue 、Vue 的基本指令、事件修饰符)_第1张图片


第一个 Vue 程序

步骤:
1、导入开发版本的 Vue.js
2、创建 Vue 实例对象,设置 el 属性和 data 属性
3、使用简洁的模板语法把数据渲染到页面上

代码:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue基础title>
head>

<body>
    <div id="app">
        {
    {message}}
    div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> script>
    <script>
        var app = new Vue({
       
            el: "#app",
            data: {
       
                message: "Hello Vue!"
            }
        })

    script>
body>

html>

页面效果:
1、Vue 笔记(初识 Vue 、Vue 的基本指令、事件修饰符)_第2张图片


el 挂载点

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


data 数据

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


Vue 中的 v-text 指令

v-text 指令的作用是:设置标签的内容(textContent)
默认写法会替换全部内容,使用差值表达式 { { }} 可以替换指定内容

代码:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>
    <div id="app">
        <h2 v-text="message+'000'">123h2>
        <h2 v-text="info+'000'">123h2>
        <h2>{
    {message+'000'}}123h2>
    div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
    <script>
        var app = new Vue({
       
            el: "#app",
            data: {
       
                message: "Vue!",
                info: "ni hao a"
            }
        })

    script>
body>

html>

页面效果:
(其中使用 v-text 指令的第一个和第二个的 123 会被全部替换)
1、Vue 笔记(初识 Vue 、Vue 的基本指令、事件修饰符)_第3张图片


Vue 中的 v-html 指令

v-html 指令的作用是:设置元素的 innerHTML
内容中有 html 结构会被解析为标签
v-text 指令无论内容是什么,只会解析为文本

代码:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>

    <div id="app">
        <p v-html="content">p>
        <p v-text="content">p>
    div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
    <script>
        var app = new Vue({
       
            el: "#app",
            data: {
       
                content: "百度"
            },
        })

    script>
body>

html>

页面效果
1、Vue 笔记(初识 Vue 、Vue 的基本指令、事件修饰符)_第4张图片


Vue 中的 v-on 指令

基础:
v-on 指令的作用是:为元素绑定事件
事件名不需要写 on
指令可以简写为 @
绑定的方法定义在 methods 属性中
方法内部通过 this 关键字可以访问定义在 data 中的数据
补充:
事件绑定的方法写成函数调用的形式,可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上.修饰符可以对事件进行限制
enter可以限制触发的按键为回车
事件修饰符有多种

代码:
基础:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>
    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doIt">
        <input type="button" value="v-on简写" @click="doIt">
        <input type="button" value="双击事件" @dblclick="doIt">
        <h2 v-on:click="changeFood">{
    { food }}h2>
    div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
    <script>
        var app = new Vue({
       
            el: "#app",
            data: {
       
                food: "番茄炒鸡蛋"
            },
            methods: {
       
                doIt: function () {
       
                    alert("do It!");
                },
                changeFood() {
       
                    // console.log(this.food);
                    this.food += "很好吃";
                }
            },
        })

    script>
body>

html>

补充:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>
    <div id="app">
        <input type="button" value="点击" @click="doIt(666,'老铁')">
        <input type="text" @keyup.enter="sayHi">
    div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
    <script>
        var app = new Vue({
       
            el: "#app",
            methods: {
       
                doIt: function (p1, p2) {
       
                    console.log("do it!");
                    console.log(p1);
                    console.log(p2);
                },
                sayHi: function () {
       
                    alert("吃了没?");
                }
            },
        })

    script>
body>

html>

注意: v-on:click 可以简写为 @click


Vue 中的 v-show 指令

v-show 指令的作用是:根据真假切换元素的显示状态
原理是修改元素的 display ,实现显示隐藏
指令后面的内容,最终都会解析为布尔值
值为 true 元素显示,值为 false 元素隐藏

代码:
(本代码实现对图片的显示和隐藏,注意运行时要新建一个 img 文件夹 并保存一张图片,根据你的图片名称更换 名字)

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>
    <div id="app">
        <input type="button" value="切换显示状态" @click="changeIsShow">
        <img v-show="isShow" src="./img/1.png" alt="">
    div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
    <script>
        var app = new Vue({
       
            el: "#app",
            data: {
       
                isShow: false
            },
            methods: {
       
                changeIsShow: function () {
       
                    this.isShow = !this.isShow;
                }
            },
        })

    script>
body>

html>

Vue 中的 v-if 指令

v-if 指令的作用是:根据表达式的真假切换元素的显示状态
本质是通过操作 dom 元素来切换显示状态
表达式的值为 true ,元素存在于 dom 树中,为 false ,从 dom 树中移除
代码:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>
    <div id="app">
        <input type="button" value="切换显示" @click="toggleIsShow">
        <p v-if="isShow">Vuep>
    div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
    <script>
        var app = new Vue({
       
            el: "#app",
            data: {
       
                isShow: false
            },
            methods: {
       
                toggleIsShow: function () {
       
                    this.isShow = !this.isShow;
                }
            },

        })
    script>
body>

html>

注意:v-showv-if 都可以切换元素的显示状态,频繁切换用 v-show


Vue 中的 v-bind 指令

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

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .active {
       
            border: 1px solid red;
        }
    style>
head>

<body>
    <div id="app">
        <img v-bind:src="imgSrc" alt="">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive">
    div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
    <script>
        var app = new Vue({
       
            el: "#app",
            data: {
       
                imgSrc: "http://www.itheima.com/images/logo.png",
                imgTitle: "图片",
                isActive: false
            },
            methods: {
       
                toggleActive: function () {
       
                    this.isActive = !this.isActive;
                }
            },
        })
    script>
body>

html>

Vue 中的 v-for 指令

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

代码:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>
    <div id="app">
        <input type="button" value="添加数据" @click="add">
        <input type="button" value="移除数据" @click="remove">
        <ul>
            <li v-for="(item,index) in arr">{
    {index+1}} {
    { item }}li>
        ul>
        <h2 v-for="it in fruit" :title="it.name">{
    {it.name}}h2>
    div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
    <script>
        var app = new Vue({
       
            el: "#app",
            data: {
       
                arr: ["北京", "上海", "广州", "深圳"],
                fruit: [
                    {
        name: "apple" },
                    {
        name: "banana" }
                ]
            },
            methods: {
       
                add: function () {
       
                    this.fruit.push({
        name: "orange" });
                },
                remove: function () {
       
                    this.fruit.shift();
                }
            },
        })

    script>
body>

html>

页面效果:
1、Vue 笔记(初识 Vue 、Vue 的基本指令、事件修饰符)_第5张图片


Vue 中的 v-model 指令

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

代码:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>
    <div id="app">
        <input type="button" value="修改message" @click="setM">
        <input type="text" v-model="message" @keyup.enter="getM">
        <h2>{
    {message}}h2>
    div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
    <script>
        var app = new Vue({
       
            el: "#app",
            data: {
       
                message: "Vue"
            },
            methods: {
       
                getM: function () {
       
                    alert(this.message);
                },
                setM: function () {
       
                    this.message = "java";
                }
            },
        })
    script>
body>

html>

事件修饰符(stop、prevent、capture、self、once)

  • .stop 阻止冒泡
  • .prevent 阻止默认事件
  • .capture 添加事件侦听器时使用事件捕获模式
  • .self 只当事件在该元素本身(比如不是子元素)触发时触发回调
  • .once 事件只触发一次

代码:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .inner {
       
            height: 150px;
            background: darkcyan;
        }
    style>
head>

<body>
    <div id="app">
        
        <div class="inner" @click="divHandler">
            <input type="button" value="戳他" @click.stop="btnHandler">
        div>

        
        <a href="http://www.baidu.com" @click.prevent="linkClick">有问题,去百度a>

        
        <div class="inner" @click.capture="divHandler">
            <input type="button" value="戳他" @click="btnHandler">
        div>
        <br>

        
        <div class="inner" @click.self="divHandler">
            <input type="button" value="戳他" @click="btnHandler">
        div>

        
        <a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题,去百度a>

        
    div>

    <script src="lib/vue.js">script>
    <script>
        var vm = new Vue({
       
            el: "#app",
            data: {
       },
            methods: {
       
                divHandler() {
       
                    console.log("触发了div")
                },
                btnHandler() {
       
                    console.log("触发了btn")
                },
                linkClick() {
       
                    console.log("链接的点击事件")
                }
            },
        })
    script>
body>

html>

事件冒泡和事件捕获
事件冒泡是由IE开发团队提出来的,即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播。
当用户点击了

元素,click 事件将按照
—>—>—>document 的顺序进行传播。若在
上都定义了 click 事件点击
,将先输出 “div” ,再输出 “body” 。
1、Vue 笔记(初识 Vue 、Vue 的基本指令、事件修饰符)_第6张图片
事件捕获是由Netscape Communicator团队提出来的,是先由最上一级的节点先接收事件,然后向下传播到具体的节点。
用户点击了
元素,采用事件捕获,则 click 事件将按照 document—>—>—>
的顺序进行传播。若在
上都定义了 click 事件,点击
,将先输出“body”,再输出“div”。
1、Vue 笔记(初识 Vue 、Vue 的基本指令、事件修饰符)_第7张图片


Vue 指令之 v-forkey 属性

在组件中,使用 v-for 循环的时候,或者在一些特殊的情况中,如果 v-for 有问题,必须在使用 v-for 的同时,指定唯一的字符串/数字 类型 :key
注意: key 在使用的时候,必须使用 v-bind 属性绑定的形式,指定 key 的值
注意: v-for 循环的时候,key 属性只能使用 number 获取 string
代码:

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>Documenttitle>
head>

<body>
    <div id="app">
        <div>
            <label for="">Id:
                <input type="text" v-model="id">
            label>

            <label for="">Name:
                <input type="text" v-model="name">
            label>

            <input type="button" value="添加" @click="add">
        div>
        <p v-for="item in list" :key="item.id">
            <input type="checkbox" name="" id="">
            {
    {item.id}}---{
    {item.name}}
        p>
    div>

    
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
    <script>
        var vm = new Vue({
       
            el: '#app',
            data: {
       
                id: '',
                name: '',
                list: [
                    {
        id: 1, name: '李斯' },
                    {
        id: 2, name: '李四' },
                    {
        id: 3, name: '张三' },
                    {
        id: 4, name: '韩飞' },
                    {
        id: 5, name: '小汪' },
                ]
            },
            methods: {
       
                add() {
       
                    // this.list.push({ id: this.id, name: this.name });
                    this.list.unshift({
        id: this.id, name: this.name });
                }
            }
        });
    script>
body>

html>