首先声明这仅仅只是个人理解而已，有什么错误或者缺少大家尽管在评论区发出来，共同学习，一起进步吗。
首先呢？我们要创建一个HTML基础代码，为什么呢？那就是要对接下来的属性进行学习了？希望大家保持神秘，不要往下翻，如果会的话就翻吧，接下来我会逐个讲解废话不多说正题开始了
插入一个表情包
基础HTML代码模板如下：他是比较关键的，是我们接下来了解的属性相关，可以直接复制拿来用的哈，它的意义就是搭载接下来的属性。
1. <!DOCTYPE html> 2. <html lang="en"> 3. <head> 4. <meta charset="UTF-8"> 5. <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7. <title>Document</title> 8. </head> 9. <body> 10. 11. </body> 12. </html>
那吗，需要在body中添加一个div，一定要注意这个id，很重要，这一步结束。
1. <div id="text"> 2. 3. </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的外边也是不管用的。
1. <script> 2. Vue.createApp({ 3. data() { 4. return { 5. //方法 6. } 7. }, 8. methods:{ 9. //事件 10. } 11. }).mount('#text') 12. </script>
这样下来一个简单且基础的架构就出来了。
下面就是一些基础的了
首先我们可以在return里面创建一个name：张三
name:'张三'
并且在div中写上一个{{ name }}，起到一个拼接的作用
1. <div id="text"> 2. {{ name }} 3. </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版，大概就是这个样子。
1. <div onclick="a(参数)"></div> 2. <script> 3. function a(参数) { 4. //要执行的东西 5. console.log(123) 6. } 7. </script>
vue版
说到这里就是点击事件了v-on原本是这样写的，后来改成简写@了非常方便。
1. <button @click="dianji">点击</button> 2. 3. 4. <script> 5. methods:{ 6. //事件 7. dianji(){ 8. console.log(123); 9. } 10. } 11. </script>
v-if v-show
他们差不多，都是满足某些条件显示或者消失，v-show也是给他一个名字，推荐使用v-if他不会特别消耗性能，他就像是display：none一样就隐藏一下，而v-show特别消耗性能因为他是直接删除重新加载请求，你不知道后台到底有多少条数据所以v-show特别消耗性能。
1. <div> 2. <img src="../123.gif" alt="" v-if="a" style="width: 100px;height: 100px;"> 3. </div> 4. <button @click="dianji" >点击</button> 5. 6. 7. <script> 8. Vue.createApp({ 9. data() { 10. return { 11. //方法 12. a:false, 13. } 14. }, 15. methods:{ 16. //事件 17. dianji(){ 18. this.a = true 19. } 20. } 21. }).mount('#text')//如果搞不清楚这个text，移步开头一目了然 22. 23. </script>
