1 下载vue.js

　　进入官网　　

 下载两个版本的vue.js

开发版本和生成版本的区别

　　开发版本体量更大，包含完整的警告和调试模式

　　生成版本体量更小，删除了警告

2 打开VSCode

　　新建一个空文件夹vuebase，用vscode打开

　　在下面新建两个文件夹，一个用来放代码文件，一个放vue.js文件，如下图

3 新建一个html文件

　　文件名：初识vue.html

3.1 引入vue.js

"en">

    "UTF-8">
    "X-UA-Compatible" content="IE=edge">
    "viewport" content="width=device-width, initial-scale=1.0">
    

    
    





    

 两个script标签

1）引入vue.js

2) 阻止 vue 在启动时生成生产提示(不重要)

如果我们把这个去掉，右键open with live sever从浏览器打开文件

 f12进入控制台，发现它有个提示，如下图

意思是说，你用的是开发版本的vue.js，在生产环境中最好要用生产版本的vue.min.js

其实这个提示无所谓，不影响什么，如果看着不爽，那么设置Vue.config.productiontip = false就可去掉这个提示

 加上这个设置后，再看控制台，发现这个提示没有了

3.2 写一个容器和一个实例

    


"root">
    
hello {{name}}

上面代码中

看效果

3.2.1 容器

1）id

　　id唯一

"root">
    
hello {{name}}

2){{}}数据绑定

　　和vue实例中的data属性对应

3.2.2 实例

　1）el属性，用来对应容器，'#xxx'，表示通过id值来对应,'.xx表示'通过class值来对应

　　通过id

 　　通过class

 　　2）data属性，用来绑定容器中的{{}}

3.3 关于{{}}说明

　　里面能填入js表达式
　　如果这里填的是变量，那么vue实例data属性中必须有对应的属性，不然会报错

 　　示例

      效果

4 小结