了解vue
1、vue关注的是视图,那么开发者只需要将你的精力集中在数据上面。因为vue是通过数据进行驱动的。(自己写一个小型vue)
2、vue和JS不是完全互通。
3、vue的特征:双向绑定,虚拟DOM
4、vue当中:指令,过滤器,计算属性,侦听器,组件等
5、当数据发生变化时,挂载的元素会被重置
如何使用vue
1、vue引入
2、创建vue实例,new vue({})
3、通过 el 属性指定vue所要挂载的元素
new Vue({
el:"div",// 指定要挂载的元素。 指定ID,class,标签名,DOM元素。不允许挂载到html 和body
data:{// 用于存储实例当中的数据
num:1// 定义了一个名字为num的数据
}
})
vue的注意事项
1,当多个实例指定同一个元素时,以第一次出现为主
<div id="root">
{{num}}{{age}}
</div>
new Vue({
el:"#root",
data:{
num:1,
age:2
}
})
new Vue({
el:"#root",
data:{
num:2
}
})
2,一个实例挂载的元素有多个,只能挂载到第一个满足条件的元素上
<div class="root">{{num}}</div>
<div class="root">{{num}}</div>
new Vue({
el:".root",
data:{
num:1
}
})
{{}}中可以写 1、输出内容 2、可以写表达式
<div id="root">
{{userName}} | {{sex===1?"男":"女"}} | {{str.split("").reverse().join("")}}
</div>
new Vue({
el:"#root",
data:{
userName:"xiaozhao",
sex:1,
str:"我爱你中国,我亲爱的母亲"
}
})
一个页面多个vue实例
同一个页面可以出现多个VUE实例。el需要指定不同的元素。
指定的元素不可以是其它vue指定元素所包含的元素。
<div id="root">
{{str}}
</div>
<div id="wrap">
{{str}}
</div>
new Vue({
el:"#root",
data:{
str:"root"
}
})
new Vue({
el:"#wrap",
data:{
str:"wrap"
}
})
指令
是以v-开头,对元素属性的扩展。分为内置指令和自定义的指令。
v-model:用于将数据与表单元素进行绑定
<div id="root">
<input type="text" v-model="num">
{{num}}
<p>{{num}}</p>
</div>
new Vue({
el:"#root",
data:{
num:1
}
})
v-if:值是一个布尔。为true渲染,否则不渲染
<div id="root">
<input type="text" v-model.number="sex">
<div v-if="sex===1">男</div>
<div v-if="sex===2">女</div>
</div>
new Vue({
el:"#root",
data:{
sex:1
}
})
v-if v-else
v-else-if:值是一个布尔值,需要与v-if结合使用。true渲染,否则不渲染
v-else:需要与v-if或v-else-if结合使用。当上面的条件不满足时,会渲染该指令所在的元素
<div id="root">
<div v-if="isLogin">欢迎xxx的到来</div>
<div v-else>请登陆先</div>
<input type="text" v-model.number="sex">
<div v-if="sex===1">男</div>
<div v-else-if="sex===2">女</div>
<div v-else>未知</div>
</div>
new Vue({
el:"#root",
data:{
isLogin:true,
sex:1
}
})
v-show:用于实现显示与隐藏。通过更改display样式来实现的
<div id="root">
<div v-show="num===1">您现在学习的是v-show指令</div>
</div>
new Vue({
el:"#root",
data:{
num:2
}
})
v-bind:是用于将属性与数据进行绑定的。它的简写(冒号) :
<div id="root">
<img src="https://www.baidu.com/img/bd_logo1.png" alt="">
<img :src="'https://www.baidu.com/img/bd_logo1.png'" alt="">
<p>{{imgSrc}}</p>
<img v-bind:src="imgSrc"alt="">
<img :src="imgSrc"alt="">
</div>
new Vue({
el:"#root",
data:{
imgSrc:"https://www.baidu.com/img/bd_logo1.png"
}
})
v-for:可以实现遍历:数组,对象,数字,字符串
<div id="root">
1,遍历数组
<div v-for="item in arr">{{item}}</div>
<div v-for="(value,index) in arr">{{value}}|{{index}}</div>
2,遍历对象
<div v-for="item in obj">{{item}}</div>//item指value
<div v-for="(value,key) in obj">{{value}}|{{key}}</div>
3,遍历数字(从1开始)
<div v-for="item in pageSum">{{item}}</div>
<div v-for="(a,b) in pageSum">{{a}}|{{b}}</div>//a是item,b是index
4,遍历字符串
<div v-for="item in str">{{item}}</div>
<div v-for="(a,b) in str">{{a}}|{{b}}</div>//a是item,b是index
</div>
new Vue({
el:"#root",
data:{
arr:[1,2,3,4,8,9],
obj:{
userName:"laotie",
age:12
},
pageSum:12,
str:"我确定你就是那只匹着羊皮的狼"
}
})
v-for补充
<div id="root">
<div v-for="item in bookList">
<p>{{item.author}}:{{item.bookName}}</p>
</div>
</div>
new Vue({
el:"#root",
data:{
bookList:[
{
author:"唐家三少",
bookName:"斗罗大陆"
},
{
author:"猫腻",
bookName:"庆余年,将夜"
}
]
}
})
v-on:指定事件。事件的值可以是一个函数,也可以是一条多条JS语句。简写 @
<div id="root">
<input type="button" value="显示与隐藏" @click="isShow=!isShow">
<div v-show="isShow" style="width:200px;height:300px;background:red;">
莫欺少年穷!
</div>
</div>
new Vue({
el:"#root",
data:{
isShow:true
}
})
<div id="root">
<input type="button" value="加1" v-on:click="num++">
<input type="button" value="加2" v-on:click="num+=2">
<input type="button" value="加3" v-on:click="function(){num+=3}">
<input type="button" value="加4" v-on:click="()=>{num+=4}">
<input type="button" value="加5" v-on:click="addFive">
<input type="button" value="加" v-on:click="add(6)">
<input type="button" value="加" v-on:click="alert(100)">
<h3>{{num}}</h3>
</div>
new Vue({
el:"#root",
data:{
num:0
},
methods:{
alert(n){
alert(n);
},
add(n){
this.num += n;
},
addFive(){
this.num += 5;
console.log("执行了addFive")
}
}
})
v-html v-text {{}}
v-html:可以让你的浏览器识别HTML标签,会覆盖标签内原有内容。当你要在指定的元素内支持HTML
v-text:以文本的形式输出,会覆盖标签内原有内容。指定元素内的内容。
{{}}:只是输出。:当你只是在元素内的某个位置输出。
<div id="root">
<input type="text" v-model="str">
<div>龙{{str}}虫</div>
<div v-html="str">ASDFASDFASDF</div>
<div v-text="str">DAFASFASDFASDF</div>
</div>
<script>
new Vue({
el:"#root",
data:{
// 指定你的数据属性
str:"你今天学习了吗?"
},
methods:{
// 指定方法
},
mounted(){
// 当你的实例在页面当中挂载完毕之后会执行。
}
})
</script>
v-once v-pre
v-once: 数据只会在初始渲染时响应。(只会响应一次)
v-pre: 指定的区域不会受到数据的影响。
<div id="root">
<input type="text" v-model="str">
<div>{{str}}</div>
<div v-once>{{str}}</div>
<div v-pre>121212{{str}}12121222</div>
</div>
<script>
new Vue({
el:"#root",
data:{
// 指定你的数据属性
str:"你们现在还好吗?"
},
methods:{
// 指定方法
},
mounted(){
// 当你的实例在页面当中挂载完毕之后会执行。
}
})
</script>
style
<body>
<div id="root">
<p style="color:yellow;background:red;">你现在好吗?心情快乐吗?</p>
<p :style="abc">你现在好吗?心情快乐吗?</p>
<p :style="fn()">你现在好吗?心情快乐吗?</p>
<p :style="'color:yellow;background:red;'">你现在好吗?心情快乐吗?</p>
<p :style="{background:'green',color:'blue'}">你现在好吗?心情快乐吗?</p>
<p :style="[{background:'green'},{color:'blue'}]">你现在好吗?心情快乐吗?</p>
<p :style="[co,bg]">你现在好吗?心情快乐吗?</p>
</div>
</body>
<script>
new Vue({
el:"#root",
data:{
co:{color:'orange'},
bg:{background:'blue'},
abc:"color:green;background:gold;"
},
methods:{
fn(){
return "color:green;background:gold;"
}
}
})
</script>
class
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.co{
color:greenyellow;
}
.bg{
background:lightskyblue;
}
.abc {
background:green;
}
</style>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
<p class="bg co">又成同学啦,好久不见呀</p> //有class co,bg的样式
<p :class="'bg co'">又成同学啦,好久不见呀!</p> //有class co,bg的样式
<p :class="abc">又成同学啦,好久不见呀!</p> //没有样式的.data中没有abc属性名
<p :class="['bg','co']">又成同学啦,好久不见呀!</p> //有class co,bg的样式
<p :class="[bg,'co']">又成同学啦,好久不见呀!111111</p> //有co的样式
<p :class="{bg:true}">最后一个</p> //有 class bg的样式
<p :class="myBg">走一下</p> //有 class abc的样式
<p :class="1===2?myBg:myAbc">走一下</p> //有class co,bg的样式
<p :class="{abc:true}">走一下</p> //有 class abc的样式
</div>
</body>
<script>
new Vue({
el:"#root",
data:{
myAbc:"bg co",
myBg:"abc"
}
})
</script>
v-model修饰符
.number:将数据转为number类型
.trim:去除左右两侧的空格
.lazy:当失去焦点时,数据才会受到影响。
<body>
<div id="root">
<input type="text" v-model.number="a">+
<input type="text" v-model.number="b">{{a+b}}
<input type="text" v-model.trim="str">
<p>青龙{{str}}白虎</p>
<input type="text" v-model.lazy="userName">
<p>{{userName}}</p>
</div>
</body>
<script>
new Vue({
el:"#root",
data:{
a:0,
b:0,
str:"廖志浩",
userName:"许家量"
}
})
</script>
用多种方式进行tab切换
1,原生js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#root input{
padding:5px;
margin:5px;
}
#root input.active{
background:red;
}
#root div{
width:200px;
height:200px;
background:yellow;
}
</style>
</head>
<body>
<div id="root">
<input type="button" value="娱乐">
<input type="button" value="体育">
<input type="button" value="财经">
<div>娱乐新闻</div>
<div>体育新闻</div>
<div>财经新闻</div>
</div>
</body>
<script>
const btns = document.querySelectorAll("#root input");
const myDiv = document.querySelectorAll("#root div");
let index = 2;
for(let i=0;i<btns.length;i++){
myDiv[i].style.display = "none";
btns[i].onclick = function () {
hide();
index = i;
show();
}
}
show();
function hide() {
btns[index].className = null;
myDiv[index].style.display = "none";
}
function show(){
btns[index].className = "active";
myDiv[index].style.display = "block";
}
</script>
</html>
2,面向对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#root input{
padding:5px;
margin:5px;
}
#root input.active{
background:red;
}
#root div{
width:200px;
height:200px;
background:yellow;
}
</style>
</head>
<body>
<div id="root">
<input type="button" value="娱乐">
<input type="button" value="体育">
<input type="button" value="财经">
<div>娱乐新闻</div>
<div>体育新闻</div>
<div>财经新闻</div>
</div>
</body>
<script>
// 面向对过程---》面向对象:将之前的变量作为对象的属性,将之前的函数,作为对象的方法
function Tag() {
this.btns = document.querySelectorAll("#root input");
this.myDiv = document.querySelectorAll("#root div");
this.index = 2;
this.init = function () {
for(let i=0;i<this.btns.length;i++){
this.myDiv[i].style.display = "none";
this.btns[i].onclick = () => {
console.log(1111111111,this);
this.hide();
this.index = i;
this.show();
}
}
this.show();
}
this.show = function () {
this.btns[this.index].className = "active";
this.myDiv[this.index].style.display = "block";
}
this.hide = function () {
this.btns[this.index].className = null;
this.myDiv[this.index].style.display = "none";
}
}
const tag = new Tag();
tag.init();
</script>
</html>
3,vue方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#root input{
padding:5px;
margin:5px;
}
#root input.active{
background:red;
}
#root div{
width:200px;
height:200px;
background:yellow;
}
</style>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
<input :class="{active:index===0}" type="button" @click="index=0" value="娱乐">
<input :class="{active:index===1}" type="button" @click="index=1" value="体育">
<input :class="{active:index===2}" type="button" @click="index=2" value="财经">
<div v-show="index===0">娱乐新闻</div>
<div v-show="index===1">体育新闻</div>
<div v-show="index===2">财经新闻</div>
</div>
</body>
<script>
new Vue({
el:"#root",
data:{
index:0,// 用于决定当前选中项。
}
})
</script>
</html>
4,豪华版切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#root input{
padding:5px;
margin:5px;
}
#root input.active{
background:red;
}
#root div{
width:600px;
height:200px;
background:yellow;
}
</style>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
<input type="button"
:class="{active:index===i}"
v-for="(item,i) in newsList"
@click="index=i"
:value="item.type"/>
<div v-show="index===i" v-for="(item,i) in newsList">
<p v-for="info in item.arr">
<a :href="info.newsHref">{{info.newsTitle}}</a>
</p>
</div>
</div>
</body>
<script>
new Vue({
el:"#root",
data:{
index:0,// 选 中项
newsList:[
{
type:"娱乐",
arr:[
{
newsTitle:"许绍洋与交往7年女友分手,43岁的他黯然搬离昔日爱巢",
newsHref:"https://new.qq.com/omn/20200318/20200318A01CN300.html"
},
{
newsTitle:"许绍洋与交往7年女友分手,43岁的他黯然搬离昔日爱巢2222",
newsHref:"https://new.qq.com/omn/20200318/20200318A01CN300.html"
}
]
},{
type:"体育",
arr:[
{
newsTitle:"中国职业足坛首例!中甲梅州巴西球员确诊新冠",
newsHref:"http://sports.qq.com/a/20200318/018486.htm"
},
{
newsTitle:"中国职业足坛首例!中甲梅州巴西球员确诊新冠222222",
newsHref:"http://sports.qq.com/a/20200318/018486.htm"
}
]
},{
type:"财经",
arr:[
{
newsTitle:"一个留观酒店经理的记“疫”:这一次,希望酒店空荡荡",
newsHref:"https://new.qq.com/omn/20200318/20200318A0E7ZX00.html"
},
{
newsTitle:"一个留观酒店经理的记“疫”:这一次,希望酒店空荡荡22222",
newsHref:"https://new.qq.com/omn/20200318/20200318A0E7ZX00.html"
}
]
}
]
}
})
</script>
</html>
5,豪华增强版切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#root input{
padding:5px;
margin:5px;
}
#root input.active{
background:red;
}
#root div{
width:600px;
height:200px;
background:yellow;
}
</style>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
<input type="button"
:class="{active:index===i}"
v-for="(item,i) in newsList"
@click="index=i"
:value="item.type"/>
<div v-show="index===i" v-for="(item,i) in newsList">
<p v-for="info in item.arr">
<a :href="info.newsHref">{{info.newsTitle}}</a>
</p>
</div>
</div>
</body>
<script>
new Vue({
el:"#root",
data:{
index:0,// 选中项
newsList:[]
},
// vue 生命周期。
mounted(){
// 当刷新页面以后,并生成VUE实例以后,会执行该函数。
// 当页面挂载完毕以后会执行该函数。钩子函数
const xhr = new XMLHttpRequest();
xhr.open("get","data.json"); //data.json中有如4中的newList中的形式差不多的但是是json数据的数据
xhr.send();
xhr.onload = () => {
this.newsList = JSON.parse(xhr.responseText)
}
}
})
</script>
</html>