Vue基础入门

编程入门行业动态更新时间:2024-10-15 10:20:15

Vue基础<a href=https://www.elefans.com/category/jswz/34/1770026.html style= 入门"/>

Vue基础入门

Vue基础入门-01

1 介绍
2 入门案例
- 2.1 el、data
- 2.2 定义对象、数组复杂数据
- 2.3 v-text、v-html
- 2.4 v-on
- - 2.4.1 简单使用
  - 2.4.2 Vue实例中的this使用
  - 2.4.3 传递参数
  - 2.4.4 简化写法
- 2.5 v-if、v-show
- 2.6 v-bind
- 2.7 v-for
- 2.8 v-model
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="">点我打开百度</a>'}})
</script>
</body>
</html>

输出结果：

hello vue
hello vue
<a href="">点我打开百度</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 +=agethis.msg = "Hello vue" + msg},test4:function (parms) {this.age +=parms.agethis.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 +=agethis.msg = "Hello vue" + msg},test4(parms){this.age +=parms.agethis.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:"=741268616,1401664941&fm=253&fmt=auto&app=138&f=JPEG?w=748&h=500",width: 300},methods:{//鼠标经过----沙漠change1(){this.src = "=3648946557,216093598&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"this.width = 500},//鼠标移开----湖泊change2(){this.src = "=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 判断都是为falseaddMsg(){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
- 赋值为[ ]

运行结果：

更多推荐

Vue基础入门

本文发布于:2024-03-06 08:49:00，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1714887.html