Vue(一)

Vue基础

简介

  • JavaScript框架
  • 简化Dom操作
  • 响应式数据驱动

第一个Vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data: {
                message: "Hello Vue!"
            }
        })
    </script>
</body>
</html>

image-20220322171340388.png

步骤

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

el:挂载点

Vue实例作用范围:管理el选项命中的元素及其内部的后代元素

id:    el:"#app"
class:    el:".app"

建议使用id选择器

vue不能挂载到html、body标签上

data数据对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue</title>
</head>
<body>
    <div id="app">
        <h1>{{ info.message }} by {{ info.author }}</h1>
        <h2>from {{ loc[0] }}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data: {
                info:{
                    message: "Hello Vue!",
                    author: "Xherlock"
                },
                loc:["成都","北京","上海","郑州","伦敦","威尼斯"]
            }
        })
    </script>
</body>
</html>
  • Vue中用到的数据定义在data中
  • data中可以写复杂类型的数据
  • 渲染复杂类型数据时遵守js语法即可

本地应用

v-text

设置标签的文本值(textContent),差值表达式:{{}}

eg:<h1 v-text="message"></h1>,想要加入其他字符在双引号中+'xxx'单引号包含要加的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue</title>
</head>
<body>
    <div id="app">
        <h1 v-text="message+'?'"></h1>
        <h2 v-text="author+'!'"></h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data: {
                message: "Hello Vue!",
                author: "Xherlock"
            }
        })
    </script>
</body>
</html>

image-20220322174031909.png

v-html

设置标签的innerHTML

eg:<p v-html="content"></p>

<body>
    <div id="app">
        <p v-html="content"></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data: {
                content: "<a href='http://xherlock.top'>Hello Vue!</a>",
                author: "Xherlock"
            }
        })
    </script>
</body>

image-20220322174453612.png

v-on

为元素绑定事件

eg:

<input type="button" value="事件绑定" v-on:click="方法">
<input type="button" value="事件绑定" v-on:monseenter="方法">
<input type="button" value="事件绑定" v-on:dblclick="方法">
methods:{    // 不要少了s
    doIt:function(){
        // 逻辑
    }
}
<body>
    <div id="app">
        <input type="button" value="v-on指令" v-on:click="show()">
        <input type="button" value="v-on简写" @click="show()">
        <input type="button" value="双击事件" @dblclick="show()">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            methods: {
                show:function(){
                    alert("Xherlock");
                }
            }
        })
    </script>
</body>

image-20220322193320081.png

  • 事件名不需要写on
  • 指令可以简写为@
  • 绑定的方法定义在methods属性中
  • 方法内部通过this关键字可以访问定义在data中的数据

计数器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue</title>
  
</head>
<body>
    <div id="app">
        <div class="calc">
            <button @click="sub">
                -
            </button>
            <span>{{num}}</span>
            <button @click="add">
                +
            </button>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data: {
                num: 0
            },
            methods: {
                sub:function(){
                    if(this.num>0){
                        this.num--;
                    }else{
                        alert("别减了,到底了!")
                    }
                
                },
                add:function(){
                    if(this.num<10){
                        this.num++;
                    }else{
                        alert("别加了,到顶了!")
                    }
                }
            }
        })
    </script>
</body>
</html>

image-20220322195534460.png

image-20220322195546292.png

v-show

根据表达值的真假,切换元素的显示与隐藏

eg:<img v-show="false" src="./xxx.png">,不显示图片

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

image-20220322200341940.png

image-20220322200330450.png

  • 原理是修改元素的display,实现显示和隐藏
  • 指令后面的内容,最终都会解析成布尔值
  • 值为true元素显示,false元素隐藏
  • 数据改变之后,对应元素的显示状态会同步更新
最后修改:2022 年 03 月 29 日
如果觉得我的文章对你有用,请随意赞赏