Vue.js初学者教程：从基础到实践-CSDN博客

本文链接：https://blog.csdn.net/qq_38403590/article/details/121179875

vue学习。参考百度，要啥功能就去百度搜，这样开发最快了。

1.下载hbuilderX，然后新建一个vue的项目，然后要装npm（npm是js的包管理器）

2.。。。然后不会了

还是稳扎稳打，打好基础吧，跟着官网来吧https://v3.cn.vuejs.org/guide/introduction.html#vue-js-%E6%98%AF%E4%BB%80%E4%B9%88https://v3.cn.vuejs.org/guide/introduction.html#vue-js-%E6%98%AF%E4%BB%80%E4%B9%88

引入vue，在最最最上头的位置加一个script

<script src="https://unpkg.com/vue@next"></script>

vue核心，先来了解一下。

它能用【很简洁的语法】，从javaScript里面【把数据】放到【你画的页面】中。

代码开头易，先显示个hello，gays! 举个例子，用来映衬上面的核心。

首先画个你的页面（我写个p的标签），然后通过javaScript把他放进去。（有js基础的同学都知道，我得在js里面声明一个Dom，并且给p标签一个选择器，如id、class选择器等，然后通过一个事件，比如点击，或者初始化事件，把p标签里面的内容给替换掉，如inner操作等，这样就实现了数据的更替）。

先打开index.html（随便的一个网页），然后代码画个屁出来，然后给这个屁加一点颜色，作为标记，比如给他个id叫做xiangP（里面的其它代码都是从hbuilderX新建的一个vue3项目自动生成的，我就加了个p）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
	<p id="xiangP"></p>
	
	
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

然后在你的标签后面的代码中给他一个vue。

	<script>
	const PClass = {
	  data() {
	    return {
	      xiangP: 'hello,gays!'
	    }
	  }
	}
	
	Vue.createApp(PClass).mount('#xiangP')
	</script>

我首先定义了一个PClass种类，然后在里面塞数据，P类中我觉得有很多屁，而xiangP只是其中之一，我给了xiangP的数据叫做hello,gays。

然后在这个类外头，通过Vue创建一个这样的P类，并且将他用id选择器与我画的p标签进行绑定。

但是问题出现了，朋友们！如果我这个Vue对象还有臭屁的属性，那么他怎么区分。于是就尤大神（vue的创造者）就定义了一个这个格式，用来分辨是哪个Vue对象的数据和哪个数据{{属性}}。