Vue基础1-如何创建一个vue实例

时间:2024-12-19 22:29:47

1.首先打开官方网站

网址:/

2.下载一个开发版本

路径:学习-教程-下载,然后点击开发版本

 

3.在D盘新建一个vue目录,然后用webstorm打开

4.在vue目录下,新建一个文件,把刚下载的文件内容复制到这里

 

5.在Vue目录下,新建文件

接下来第一次使用,用创建一个实例,然后编写一段最简单的代码。

 

6.打开页面

7.继续编辑代码

打开页面

注意看vue的实例已经接管了<div ></div>标签的内容,或者说已经和标签做了绑定,那么在这个标签上就可以使用vue实例里面msg数据

看下页面效果

附录:

1.以前的写法在js里面,("root")获取到root这个标签,然后把它定义到一个变量里面

var dom = ("root")

= "hello world"

2.在没有vue之前我们再写源生或Jquery都是这么写的,手动处理dom

3.可是在vue里面就不需要这么写,只需要在标签里面需要使用msg这样一个数据下面创建了一个vue实例,定义好了msg数据,然vue的实例,通过el和上面的标签做一个绑定,msg的内容就会自动显示的div标签里面.