Vue学习笔记（一）基础、本地应用

最新推荐文章于 2023-08-20 23:03:54 发布

Zijeak

最新推荐文章于 2023-08-20 23:03:54 发布

阅读量247

点赞数

分类专栏：前端文章标签： vue js html5

本文链接：https://blog.csdn.net/qq_18404993/article/details/107546011

版权

前端专栏收录该内容

53 篇文章 1 订阅

订阅专栏

1、第一个Vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
        message: 'Hello!'
        }
    })
</script>
</html>

el：挂载点，用来设置Vue实例挂载（管理）的元素
data：数据对象

<body>
    <div id="app">
        {{ message }}
        <h2>{{ school.name }}</h2>
        <h2>{{ school.mobile }}</h2>
        <ul>
            <li>{{campus[1]}}</li>
        </ul>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello!',
            school:{
                name:"northwest university",
                mobile:"029-83145678"
            },
            campus:["太白校区","长安校区","桃园校区"]
        }
    })
</script>

2、本地应用

2.1 内容绑定、事件绑定

2.1.1 v-text指令

设置标签的innerText

<body>
    <div id="app">
        <h2 v-text="message"></h2>
        <!-- 差值表达式写法 -->
        <h2>{{message}},World!</h2>
        <!-- 字符串拼接 -->
        <h2>{{message +" the wonderful"}},World!</h2>
         <h2 v-text="message+'!'"></h2>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello'
        }
    })
</script>

在这里插入图片描述

2.1.2 v-html指令

设置标签的innerHTML

<body>
    <div id="app">
        <p v-html="content"></p>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            content:"<button>巴啦啦能量！</button>"
        }
    })
</script>

2.1.3 v-on指令

为元素绑定事件
事件名不需要写on

<body>
    <div id="app">
        <button v-on:click="sayHello">sayHello</button>
        <button @click="sayGoodBye">sayGoodBye</button>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        methods: {
            sayHello:function(){
                alert("Hello!");
            },
            sayGoodBye:function(){
                alert("GoodBye!");
            }
        }
    })
</script>

2.1.4 双向数据绑定

<body>
    <div id="app">
        <p v-on:dblclick="changeFood">{{food}}</p>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            food:"蛋炒饭"
        },
        methods: {
            changeFood:function(){
                this.food = "西红柿炒鸡蛋";
            }
        }
    })
</script>

2.1.5 本地应用：计数器

<script>
    var app = new Vue({
        el: '#app',
        data:{
            num:0
        },
        methods: {
            sub:function(){
                if(this.num==0){
                    alert("已经达到最小数字了！");
                    return;
                }
                this.num--;
            },
            add:function(){
                if(this.num==10){
                    alert("已经达到最大数字了！");
                    return;
                }
                this.num++;
            }
        }
    })
</script>

在这里插入图片描述

2.2 显示切换、属性绑定

2.2.1 v-show指令

根据表达式的真假，切换元素的显示和隐藏
指令后面的内容都会解析为布尔值。
原理为控制display属性

v-show="isShow"
v-show="true"
v-show="1>2"

<body>
    <div id="app">
        <img src="https://www.baidu.com/img/donghx_47e731db3bb713f0802d572062d60cdf.gif" v-show="isShow">
        <img src="https://www.baidu.com/img/donghx_47e731db3bb713f0802d572062d60cdf.gif" v-show="age>=18">
        <button @click="changeState">显示/隐藏</button>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            isShow:true,
            age:19
        },
        methods:{
            changeState:function(){
                this.isShow = !this.isShow;
            }
        }
    })
</script>

在这里插入图片描述

2.2.2 v-if指令

根据表达式的真假，切换元素的显示和隐藏（操作DOM元素）
本质是通过操作操纵dom元素来切换显示状态
表达式的值为true，元素存在于dom树中，否则，从dom树中移除

<body>
    <div id="app">
        <img src="https://www.baidu.com/img/donghx_47e731db3bb713f0802d572062d60cdf.gif" v-if="isShow">
        <img src="https://www.baidu.com/img/donghx_47e731db3bb713f0802d572062d60cdf.gif" v-if="age>=18">
        <button @click="changeState">显示/隐藏</button>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            isShow:true,
            age:19
        },
        methods:{
            changeState:function(){
                this.isShow = !this.isShow;
            }
        }
    })
</script>

v-if和v-show都可以显示或隐藏元素，那么它们的区别在哪里？
v-if直接控制DOM元素是否出现在DOM树当中，而v-show控制的是元素的display属性，其一直在DOM树中存在。

2.2.3 v-bind

设置元素的属性（你如src,class,title）

绑定普通属性

<body>
    <div id="app">
        <img v-bind:src="imgSrc" :title="imgTitle">
        <button @click="showGoogle">谷歌</button>
        <button @click="showBaidu">百度</button>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            imgSrc:"",
            imgTitle:""
        },
        methods:{
            showGoogle:function(){
                this.imgSrc = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
                this.imgTitle = "谷歌";
            },
            showBaidu:function(){
                this.imgSrc = "https://www.baidu.com/img/donghx_47e731db3bb713f0802d572062d60cdf.gif";
                this.imgTitle = "百度";
            }
        }
    })
</script>

绑定对象

除了布尔值、表达式之外，还可以使用对象的方式：

<div :class="active:isActive,'text-danger': hasError"></div>

这句代码的意思是，active这个类名是否生效，取决于isActive这个属性的值是否为真。
绑定的数据对象不必内联定义在模板里：

<div :class="activeObject"></div>

data: {
  activeObject: {
    active: true,
    'text-danger': false
  }
}

绑定数组

v-bind也可以使用数组：

<div v-bind:class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

绑定内联样式

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
  activeColor: 'red',
  fontSize: 30
}

优化（直接绑定到一个样式对象）：

<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

2.3 列表循环、表单元素绑定

2.3.1 v-for指令

根据数据生成列表结构

<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in arr" :title="item">{{index+1}}.{{item}}</li>
            <hr/>
            <li v-for="(item,index) in objArr" :title="item">{{index+1}}.{{item.name}}</li>
        </ul>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            arr:["apple","xiaomi","huawei","vivo","oppo"],
            objArr:[
                {name:"xiaoming"},
                {name:"lihua"}
            ]
        }
    })
</script>

在这里插入图片描述

2.3.2 v-on指令补充

传递自定义参数，事件修饰符
事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接受传入的实参
事件的后面跟上**.修饰符**可以对事件进行限制

<body>
    <div id="app">
        <input type="button" @click="dolt(666)"/>
        <input type="text" @keyup.enter="sayhi"/>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        methods:{
            dolt:function(p1){
                alert(p1);
            },
            sayhi:function(){
                alert("hi");
            }
        }
    })
</script>

2.3.3 v-model

获取和设置表单元素的值（双向数据绑定）

<body>
    <div id="app">
        <input type="text" v-model="message"/>
        <h2>{{message}}</h2>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            message:"Hello,World!"
        }
    })
</script>

v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据《==》表单元素的值双向绑定

2.3.4 简易todoList待办事项组件案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            background-color: #EEEEEE;
        }
        .container{
            width: 500px;
            margin: 0 auto;
            text-align: center;
            margin-top: 50px;
        }
        h1{
            color: #CC3333;
            font-weight: 100;
            font-size: 50px;
        }
        input{
            width:490px;
            height: 50px;
            box-shadow: black;
            font-size: 20px;
            padding-left: 10px;
            border: none;
            border-bottom:1px solid #999999;
            font-weight: 100;
            font-style: italic;
            font-size: 16px;
        }
        .content{
            width:500px;
            margin-top: 50px;
            box-shadow: 1px 1px 50px 5px #CCCCCC;
        }
        .bar{
            text-align: left;
            background-color: #ffffff;
            height: 30px;
            line-height: 30px;
            padding-left: 10px;
            padding-right: 10px;
            font-size: 12px;
            font-weight: 100;
        }
        button{
            float:right;
            margin: 0;
            padding: 0;
            border: none;
            background-color: #ffffff;
            padding-top: 5px;
            font-weight: 100;
        }
        ul > li{
            height: 40px;
            line-height: 40px;
            font-weight: 100;
            text-decoration: none;
            list-style: none;
            text-align: left;
            padding-left: 10px;
            background-color: #ffffff;
            border-bottom:1px solid #999999;
        }
        ul > li > span{
            float: right;
            padding-right: 10px;
            display: none;
        }

        ul > li:hover span{
            display:block;
            cursor: pointer;
        }

    </style>
</head>
<body>
    <div id="app" class="container">
        <h1>乐乐记事本</h1>
        <div class="content">
            <input type="text" v-model="task" v-on:keyup.enter="add" placeholder="请输入任务"/>
            <ul>
                <li v-for="(item,index) in arr" @click="deleteItem(index)">{{index+1}}.{{item}}<span>×</span></li>
            </ul>
            <div class="bar">
                {{arr.length}} items left
                <button v-on:click="clear">Clear</button>
            </div>
        </div>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            arr:[
                "写代码",
                "吃饭饭",
                "睡觉觉"
            ],
            task:"",
            isShow:false
        },
        methods:{
            add:function(){
                this.arr.push(this.task);
            },
            clear:function(){
                this.arr = [];
            },
            deleteItem:function(index){
               this.arr.splice(index,1);
            }
        }
    })
</script>
</html>