后续有更新 Vue基础知识点n
https://blog.youkuaiyun.com/weixin_44195250/article/details/97239922
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
{{msg}}
</div>
</body>
</html>
<script src="vue.js"></script>
<script>
let vm = new Vue({
//代表Vue作用的范围
el:"#app",
//当前Vue所需要的一些属性。 当前组件所需要的一些状态
data:{
msg:1910
}
})
</script>
br
v-text与v-html区别
v-html:值为data中的数据
1、解析data中的数据
2、可以解析JS的表达式
v-html的底层原理是应用的innerhtml
v-text的底层原理是应用的innerText
v-html与v-text其实是一样的 只不过v-html可以解析html标签
v-text简写:{{}}
<h2 v-text="p"></h2>
<h2 v-html="p"></h2>
v-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h2 v-show="flag">{{msg}}</h2>
<h2 v-if="flag">{{msg}}</h2>
<hr>
<div v-if="num==1">111</div>
<div v-else-if="num==2">222</div>
<div v-else>333</div>
</div>
</body>
</html>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:"1910",
flag:true,
num:10
}
})
/*
v-show:显示/隐藏
当值为true的时候为显示 false的时候为隐藏
底层原理是操作元素的display属性
v-if:显示/隐藏
当值为true的时候为显示 false的时候为隐藏
底层是操控元素的创建/销毁
配合v-if使用的指令
v-else
v-else-if
当使用v-else / v-else-if的时候必须要使用v-if
面试题:
v-if与v-show的区别?以及使用的场景?
v-show底层是操作元素的display属性,v-if底层是操控元素的创建/销毁
场景:
v-if:场景--》权限校验的时候
v-show:展示页面 类似于一些选项卡等
*/
</script>
v-bind 简写 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-bind:id="myId" :title="name" :class="myclass3" :style="myStyle"></div>
<img v-bind:src="mySrc" :alt="des">
<a :href="link">百度</a>
<input :type="type">
</div>
</body>
</html>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
myId:"box",
mySrc:"https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png",
link:"http://www.baidu.com",
name:"1910",
type:'password',
des:"百度",
myclass:"box box1",
myclass2:["box111","box222"],
myclass3:{
boxA:true,
boxB:false
},
myStyle:{
width:"100px",
height:"100px",
background:"red"
}
}
})
/*
v-bind:
用来给元素绑定属性
语法:v-bind:属性 = 属性值
简写: :属性
常用的属性有哪些?
class
id
src
href
title
type
alt
*/
</script>