Vue基础入门-01

cycyong

已于 2023-05-11 11:40:04 修改

阅读量473

点赞数 1

分类专栏： # 前端文章标签： vue.js javascript 前端

于 2023-05-10 21:35:06 首次发布

本文链接：https://blog.csdn.net/cycyong/article/details/130588619

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Vue基础入门-01

1 介绍
2 入门案例
3 备忘录案例

1 介绍

vue是一个构建用户界面UI的渐进式javascript框架，渐进式的框架是指可以一步一步的由浅入深的去使用这个框架，该框架可以逐步引入项目。

vue官网传送门

文章配套源码传送门

什么是MVVM？

MVVM是一种更好的UI模式解决方案，MVVM通过数据双向绑定让数据自动地双向同步。

标签	解释
MVVM	M-V-VM
M	Model数据模型，json格式的数据
V	view视图，JSP，HTML
VM	ViewModel视图模型，把Model和View关联起来的就是ViewModel，ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model

2 入门案例

2.1 el、data

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>{{msg}}</div> // cycyong
    <div>{{msg.toUpperCase()}}</div> // 变大写:CYCYONG
    <div>{{msg == 'cycyong'}}</div>  // true
    <div>{{msg.length}}</div> // 7
    <div>{{count}}</div> // 0
    <div>{{count+1}}</div> // 1
    <div>{{count++}}</div> // 1
</div>

<script src="statics/vue.js"></script>
<script>
    new Vue({
        el:'#app',// el:element 元素作用范围，代表vue实例的作用范围
        data:{
            msg:"cycyong",
            count:0
        }// 自定义数据
    })// 创建一个vue实例
</script>
</body>
</html>

总结：

一个页面中只能存在一个vue实例不能创建多个vue实例
vue实例中el代表vue实例的作用范围，日后在vue实例作用范围内可以使用{ {data属性中变量名}}直接获取data中变量名对应属性值
vue实例中data用来给当前vue实例绑定自定义数据,日后绑定数据可以在vue实例作用范围内直接使用{{变量名}}方式获取
进行数据获取时,可以在{{}}取值语法中进行算数运算逻辑运算以及调用相关类型的相关方法
vue实例中el可以书写任何css选择器，但是推荐使用id选择器因为一个vue实例只能作用于一个具体作用范围

2.2 定义对象、数组复杂数据

Demo02.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <div>{{ msg }}</div> //hello vue
    <div>{{ user }}</div> // { "id": 20, "username": "qwe", "age": 23, "address": "广州" }
    <div>{{ user.address }}</div> // 广州
    <div>{{ users[0].age }}</div> // 21
    <div>{{ address[2] }}</div> // 深圳

</div>

<script src="statics/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data:{
            msg:'hello vue',
            count:0,
            user:{id:20,username:"qwe",age:23,address:"广州"},
            users:[
                {id:21,username:"cyc",age:21,address:"北京"},
                {id:22,username:"zxc",age:22,address:"南京"},
                {id:23,username:"asd",age:11,address:"上海"}
            ],
            address:['北京','上海','深圳','广州']
        }
    });
</script>
</body>
</html>

输出结果：

hello vue
{ "id": 20, "username": "qwe", "age": 23, "address": "广州" }
广州
21
深圳

2.3 v-text、v-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>{{ msg }}</h1>
    <h1 v-text="msg"></h1>
    <span v-text="content"></span><br>
    <span v-html="content"></span>
</div>

<script src="statics/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            msg:"hello vue",
            content:'<a href="http://www.baidu.com">点我打开百度</a>'
        }
    })
</script>
</body>
</html>

输出结果：

hello vue
hello vue
<a href="http://www.baidu.com">点我打开百度</a>（文本）
点我打开百度（链接）

在这里插入图片描述
总结：

v-text、v-html作用：用来获取vue实例中data定义的属性变量
{{}}取值和v-text取值区别
- {{}}取值不会将标签原始数据清空﹑使用v-text取值清空标签原始数据,{{}}这种方式取值插值表达式
- {{}}取值存在插值闪烁v-text v-html取值不存在插值闪烁
v-text和v-html的区别
- 使用v-text取值:直接将获取数据渲染到指定标签中，类似于innerText
- 使用v-html取值:先将获取数据进行html标签解析，解析之后再渲染到指定标签，类似于innerHTML

2.4 v-on

2.4.1 简单使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button v-on:click="test">点击</button>
</div>

<script src="statics/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        methods:{
            test:function () {
                alert("点击")
            }
        }
    })
</script>
</body>
</html>

输出结果：
点击按钮，弹出提示框！

在这里插入图片描述
总结：

js事件(event)的事件三要素：

事件源：发生特定动作的html标签
事件：发生特定动作的事件，onclick、onmouseover、onblur…
监听器：时间处理程序，一般在js中是事件处理函数 function()

v-on ：给页面中的标签绑定事件用的语法：在对应的标签上使用v-on：事件名=“事件处理函数”

2.4.2 Vue实例中的this使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>{{count}}</h1>
    <button v-on:click="test">点击</button>
</div>



<script src="statics/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            count:0
        },
        methods:{
            test:function () {
                console.log(this);
                this.count++;
                this.test2();
            },
            test2:function () {
                console.log("aaa");
            }
        }
    })
</script>
</body>
</html>

查看this输出Vue的实例

发现data属性中的变量和methods中函数都暴露在Vue实例中

在这里插入图片描述
输出结果：

每点击一下count就+1
在这里插入图片描述
总结：

在vue定义的事件中this指的就是当前的Vue实例,在事件中通过使用this获取Vue实例中相关数据

2.4.3 传递参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>{{msg}}</div>
    <div><span>年龄</span><span>{{age}}</span></div>
    <button v-on:click="test1">+1</button>
    <button v-on:click="test2">+10</button>
    <button v-on:click="test3(30,'您好')">+age,并打印msg</button>
    <button v-on:click="test4({age:20,msg:'您好呀'})">+age,并打印msg</button>
</div>


<script src="statics/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            msg:"hello vue",
            age:0
        },
        methods:{
            test1:function () {
                this.age++
            },
            test2:function () {
                this.age +=10
            },
            test3:function (age,msg) {
                this.age +=age
                this.msg = "Hello vue" + msg
            },
            test4:function (parms) {
                this.age +=parms.age
                this.msg = parms.msg
            }
        }
    })
</script>
</body>
</html>

总结：

传递参数既可以是变量也可以是对象，对象的属性直接点出来就行

2.4.4 简化写法

将2.4.3的案例进行简化如下，实现功能完全一致：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>{{msg}}</div>
    <div><span>年龄</span><span>{{age}}</span></div>
    <button @click="test1">+1</button>
    <button @click="test2">+10</button>
    <button @click="test3(30,'您好')">+age,并打印msg</button>
    <button @click="test4({age:20,msg:'您好呀'})">+age,并打印msg</button>
</div>



<script src="statics/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            msg:"hello vue",
            age:0
        },
        methods:{
            test1() {
                this.age++
            },
            test2() {
                this.age +=10
            },
            test3(age,msg){
                this.age +=age
                this.msg = "Hello vue" + msg
            },
            test4(parms){
                this.age +=parms.age
                this.msg = parms.msg
            }
        }
    })
</script>
</body>
</html>

总结：

定义事件的两种写法
- 函数名:function(){}
- 函数名(){}
绑定事件时可以通过@符号形式简化v-on的事件绑定

2.5 v-if、v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--修改css:display=none-->
    <div name="show" v-show="isShow">{{msg}}</div>
    <!--修改dom树-->
    <div name="if" v-if="isShow">{{msg}}</div>
</div>

<script src="statics/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            msg:"hello vue",
            isShow: false
        },
        methods:{
        }
    })
</script>
</body>
</html>

我们来看看v-show和v-if是如何改变标签的：

在这里插入图片描述
可以看到v-show是通过改变css样式的display属性进行修改的，而v-if则直接操作dom删除该标签。

总结：

v-if底层通过控制dom树上元素节点实现页面标签展示和隐藏（dom树）
v-show底层通过控制标签css中display属性实现标签展示和隐藏（css样式）
需要频繁切换，使用v-show，很少改变则使用v-if

2.6 v-bind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <img :src="src" :width="width" @mouseover="change1" @mouseout="change2">
</div>
<script src="statics/vue.js"></script>
<script>
  new Vue({
    el:"#app",
    data:{
        src:"https://img0.baidu.com/it/u=741268616,1401664941&fm=253&fmt=auto&app=138&f=JPEG?w=748&h=500",
        width: 300
    },
    methods:{
        //鼠标经过----沙漠
        change1(){
            this.src = "https://img1.baidu.com/it/u=3648946557,216093598&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"
            this.width = 500
        },
        //鼠标移开----湖泊
        change2(){
            this.src = "https://img0.baidu.com/it/u=741268616,1401664941&fm=253&fmt=auto&app=138&f=JPEG?w=748&h=500"
            this.width = 300
        }
    }
  })
</script>
</body>
</html>

输出结果：

鼠标放在图片和离开图片发生变化！！
在这里插入图片描述

v-bind总结：

作用：用来绑定html标签中某个属性交给vue实例进行管理
好处：一旦属性交给vue实例进行管理之后，可以通过修改vue实例中绑定属性达到动态修改标签属性的效果
语法:对应标签上v-bind: 属性名="属性值",简化写法:属性名="属性值"

2.7 v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--1.遍历对象-->
    <span v-for="(value,key,index) in user">
        ({{index}}=={{key}}=={{value}})
    </span>
    <!--2.遍历数组-->
    <span>
        <li v-for="(addr,index) in address">({{index}}---{{addr}})</li>
    </span>
    <!--3.遍历数组中的对象-->
    <table border="1" width="30%">
        <tr>
            <th>index</th>
            <th>id</th>
            <th>name</th>
            <th>address</th>
            <th>do</th>
        </tr>
        <tr v-for="(user,index) in users" :key="user.id">
            <td>{{index}}</td>
            <td>{{user.id}}</td>
            <td>{{user.name}}</td>
            <td>{{user.address}}</td>
            <td>
                <a href="#">修改</a>
                <a href="#">删除</a>
            </td>
        </tr>
    </table>
</div>
<script src="statics/vue.js"></script>
<script>
  new Vue({
    el:"#app",
    data:{
        user:{id:101,name:"cycyong",address:"北京"},
        address: ['北京','上海','深圳','天津'],
        users:[
            {
                id:101,
                name:'cyc',
                address:'北京'
            },
            {
                id:102,
                name:'asd',
                address:'上海'
            },
            {
                id:103,
                name:'zxc',
                address:'深圳'
            },
            {
                id:104,
                name:'bnm',
                address:'天津'
            }
        ]
    },
    methods:{
    }
  })
</script>
</body>
</html>

运行结果：
在这里插入图片描述
总结：

作用:用来在页面中实现vue中定义数据的遍历
语法:直接在对应标签上加入v-for指令
遍历对象：v-for="(value,key,index) in data中变量名"
遍历数组：v-for="(item,index) in data中的变量名",item代表普通元素
遍历数组对象：v-for="(item,index) in data中的变量名" :key="唯一标识字段",item代表对象
注意:在使用v-for建议尽可能提供 key-attribute,key属性唯一

2.8 v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<form>
    用户名:<input type="text" v-model="user.username"><br>
    密码:<input type="password" v-model="user.password"><br>
    邮箱:<input type="email" v-model="user.email"><br>
    qq:<input type="text" v-model="user.qq"><br>
    验证码:<input type="text" v-model="user.code">
</form>
    <button @click="submit" >提交</button>
</div>

<script src="statics/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
        msg:"hello vue",
        user:{},
    },
    methods:{
        submit() {
            console.log(this.user)
        }
    }
  })
</script>
</body>
</html>

代码解析：

v-model实现value的双向绑定，以后我们在使用ajax的时候，不用再一个一个去取值，直接在data中声明一个对象接收即可。
该例子中，在data声明了一个空对象user，在form表单中，v-model绑定了user里面的属性，虽然user对象中没有这些属性，但是vue是允许这样声明对象属性的。

运行结果：

在这里插入图片描述
v-model 和 v-bind的区别

v-bind是单向绑定，用来绑定数据和属性以及表达式，数据只能从data流向页面。
v-model是双向绑定，数据能从data流向页面，也能从页面流向data。
v-bind可以给任何属性赋值，v-model只能给表单类，也就是具有value属性的元素进行数据双向绑定，如text、radio、checkbox、selected。

什么是双向绑定? 下面给出一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="msg_1" v-on:input="show_1">
    <input type="text" v-bind:value="msg_2" v-on:input="show_2">
</div>
<script src="statics/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
        msg_1:"hello vue1",
        msg_2:"hello vue2",

    },
    methods:{
        show_1(){
            console.log("v-model的内容:"+this.msg_1)
        },
        show_2(){
            console.log("v-bind的内容:"+this.msg_2)
        }
    }
  })
</script>
</body>
</html>

运行结果：

我们看到使用v-bind进行文字填写，data中的msg_2始终不发生变化，而使用v-model进行文字填写，data中的msg_1随着我们填写的内容发生变化。
对于msg_1我们成为单向绑定，msg_2我们成为双向绑定。

在这里插入图片描述

3 备忘录案例

功能要求：

实现备忘录的添加、删除
添加完成之后，清空输入框
统计备忘录中数目条数
能够一键删除备忘录中的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        请输入内容: <input type="text" v-model="msg"> <button @click="addMsg">添加到备忘录中</button><br>
        <ul>
            <li v-for="(item,index) in list">{{index+1+'.'}}{{item}}<a href="javascript:;" @click="delMsg(index)">删除</a></li>
        </ul>
        <a v-show="list.length!==0" href="javascript:;" @click="clear">清空备忘录</a>
        <h3 v-if="list.length!==0">当前备忘录:一共{{list.length}}条记录</h3>
        <h3 v-else style="color: pink">没有数据！</h3>
    </div>
<script src="statics/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"",
            list:['今天记得看电视！','今天记得要学习！','今天记得打游戏！'],
        },
        methods:{
            // 空串"" 和 null 和 0 和 undefined 判断都是为false
            addMsg(){
                if(!this.msg){
                    alert("请输入内容！！！")
                    return false
                }
                this.list.push(this.msg)
                this.msg = ""
            },
            delMsg(index){
                this.list.splice(index,1)
            },
            clear(){
                this.list = []
            }
        }
    })
</script>
</body>
</html>

代码解析：

在a标签中添加javascript:; 就是去掉a标签的默认行为，跟href=”javascript:void(0)”是一样的，void 是JavaScript 的一个运算符，void(0)就是什么都不做的意思
空串"" 、 null 、 0 、 undefined 判断都是为false
JS中清空数组有三种方法：
- splice(0,array.length),第一个参数为其实index，第二个参数为要删除的数量
- length赋值为0
- 赋值为[ ]

运行结果：
在这里插入图片描述