🙂博主：锅盖哒
🙂文章核心：带你了解vue基础
目录
首先声明这仅仅只是个人理解而已，有什么错误或者缺少大家尽管在评论区发出来，共同学习，一起进步吗。
首先呢？我们要创建一个HTML基础代码，为什么呢？那就是要对接下来的属性进行学习了？希望大家保持神秘，不要往下翻，如果会的话就翻吧，接下来我会逐个讲解废话不多说正题开始了
插入一个表情包
基础HTML代码模板如下：他是比较关键的，是我们接下来了解的属性相关，可以直接复制拿来用的哈，它的意义就是搭载接下来的属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
那吗，需要在body中添加一个div，一定要注意这个id，很重要，这一步结束。
<div id="text">
</div>在线引入vue.js链接,放到div的下面即可。
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.js"></script>接下来这一块如下：
方法区：比如a=false，这个就是方法。
事件区：比如点击事件之类的就在methods里面写。
注意：这个id是否如上面一样，如果不同的话，他就不会执行，也有可能报错，将数据放在那个div的外边也是不管用的。
<script>
Vue.createApp({
data() {
return {
//方法
}
},
methods:{
//事件
}
}).mount('#text')
</script>这样下来一个简单且基础的架构就出来了。
下面就是一些基础的了
首先我们可以在return里面创建一个name：张三
name:'张三'并且在div中写上一个{{ name }}，起到一个拼接的作用
<div id="text">
{{ name }}
</div>效果图如下
那么如果在div的外边写呢？大家是不是很好奇，可以看一下效果，
所以写在外边是不合理的，他就会直接将这个标签给显示出来，而不是显示接口里面的数据。
大家是不是对这( {{}} ) 很好奇，双花括号( {{}} ) 就是对变量输出，当然他只是在标签中这样输出如果是在img标签的话直接写上数组的名字或者数组.属性值。
下方的属性用的是如下数据：他是一个已经拼接好的数据，不管是格式还是样式都是提前弄好的，只要下方属性标签可以解析就行。
不要着急，下方有说到，可以耐心的看下去，就会有答案。
str:'<p style=\"text-align: justify;\"><span style=\"font-size: 16px;\"><strong>活动流程：</strong></span></p><p style=\"text-align: justify;\"><span style=\"font-size: 16px;\">（1）展会现场观众持展会门票参加活动；</span></p><p style=\"text-align: justify;\"><span style=\"font-size: 16px;\">（2）每场现场组织20人（每场次大约30分钟）；</span></p><p style=\"text-align: justify;\"><span style=\"font-size: 16px;\">（3）主持人给每人发一个内容不同的秘密任务，任务时间30分钟以内，超时的淘汰；</span></p><p style=\"text-align: justify;\"><span style=\"font-size: 16px;\">（4）接到任务的每位观众需到5个不同的景区展位寻宝（如：“扫描关注二维码+景区的宣传语+景区拼图”或在“景区展位标致性地方自拍+景区宣传语+扫描关注二维码发到朋友圈</span></p>'v-text v-html v-bind
v-text简单来说他就是js中的innertext，他无法解析标签。
也就是在获取接口数据时，他是后端拼接好的，那么这个标签无法解析这里面的标签。
代码如下：
<div v-text="str"></div>效果图如下：
注意里面的标签，像div p span等很多标签。
v-html这个就相当于js中的innerhtml，这个非常的有用它可以解析接口数据里面的标签，就比如接口返回的数据中有已经拼接好的数据，自己拿来直接渲染就行。
代码如下：
<div v-html="str"></div>效果如下：
v-bind就是绑定的意思废话不多说，效果如下
<div v-for="(item,index) in obj" v-bind:key="index">{{ item.arr }}</div>简单小例子如下
obj:[{arr:'奥特曼'},{arr:'泰罗'},{arr:'迪迦'},{arr:'真的是'},{arr:'张三'},{arr:'李四'},{arr:'王五'}],vue中的点击事件
vue的点击事件就不像原生js那样是onclick,vue的点击事件是@click=xxx这样，不过原理都是相同的。
代码如下：
原生js版，大概就是这个样子。
<div onclick="a(参数)"></div>
<script>
function a(参数) {
//要执行的东西
console.log(123)
}
</script>vue版
说到这里就是点击事件了v-on原本是这样写的，后来改成简写@了非常方便。
<button @click="dianji">点击</button>
<script>
methods:{
//事件
dianji(){
console.log(123);
}
}
</script>v-if v-show
他们差不多，都是满足某些条件显示或者消失，v-show也是给他一个名字，推荐使用v-if他不会特别消耗性能，他就像是display：none一样就隐藏一下，而v-show特别消耗性能因为他是直接删除重新加载请求，你不知道后台到底有多少条数据所以v-show特别消耗性能。
<div>
<img src="../123.gif" alt="" v-if="a" style="width: 100px;height: 100px;">
</div>
<button @click="dianji" >点击</button>
<script>
Vue.createApp({
data() {
return {
//方法
a:false,
}
},
methods:{
//事件
dianji(){
this.a = true
}
}
}).mount('#text')//如果搞不清楚这个text，移步开头一目了然
</script>
837
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
