跟着尚硅谷学vue-day1
前言：企业多用vue3,但是考虑到时间较充足,先学vue2,学vue3较为方便。
1.vue是什么？
一套用于构建用户界面的渐进式Javascript 框架
构建用户界面：数据->界面
渐进式：Vue可以自底向上逐层的应用 简单应用: 只需一个轻量小巧的核心库 复杂应用:可以引入各式各样的Vue插件 （核心库可以引入各式各样的vue插件）
2.vue的特点？
1.采用组件化模式，提高代码复用率、且让代码更好维护（可以引入xxx.vue）
2.声明式编码，让编码人员无需直接操作DOM，提高开发效率。与声明式相反的是命令式。
3.使用虚拟DOM+优秀的Diff 算法，尽量复用DOM节点。
原生js是通过直接操作DOM来实现的。
3.vue.js的下载，vue-devtools插件的下载
安装 — Vue.js
3.1 VueDemo
点击vscode页面html页面，点击open with five server ，进入chrome页面，ctrl+shift+l 进入开发者工具模式。
3.2 安装vue-devtools
安装较多人使用的Vue.js devtools (v5) 5.3.4，打开扩展程序进行安装，但是我的在chrome开发者工具当中没有发现Vue,采用了这个博主的文章，成功解决
完美解决Vue Devtools调试工具无法显示在F12的问题_f12没有vue devtool-CSDN博客
配置调试工具LiveServer服务器参数_liveserver软件英文界面请教设置、拓展设置的英文词汇-CSDN博客
4.Vue.config
Vue.config 是一个对象，包含 Vue 的全局配置。可以在启动应用之前修改 property
5.案例demo
1.html页面当中id不能重复，但是class可以重复，所以会出现多个模版（容器）对应一个实例，这是一个错误,结果就是只有第一个模版有解析，第二个模版语法没有解析
2.一个模版对应两个实例
3.总结，一个实例只能接管一个容器
4.在容器当中，用到模版语法的变量必须要在data当中存在。{{xxx}}中的xxx要号js表达式，且xxx可以自动读取到data中的所有属性
注意区分:
js表达式和js代码(语句)
1.表达式:一个表达式会产生一个值，可以放在任何一个需要值的地方，共同点是需要一个变量去接收这个值。
(1).a(2).a+b(3).demo(1)(4).x === y ?'a’ :'b’
2.js代码(语句)
(1). if(){} (2).for(){}
5.真实开发中只有一个Vue实例，并且会配合着组件一起使用
6.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新:
点击编辑之后，保存修改，可以看到页面上已经有修改值了。
6.代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 出现vue内置函数 --><script type="text/javascript" src="./js/vue.js"></script><!-- 相当于给全局引入vue的构造函数 -->
</head><body><div id="root"><h1>早上好，{{name}}</h1><h1>年龄，{{age}}</h1> <!-- 插值语法 --></div>{{name}}<script type="text/javascript">// 打开的时候，就已经在本机5500的端口上开了一台服务器，或者说，主机本来就是一台服务器。Vue.config.productionTip = true;new Vue({el:'#root',data:{name:'小红',age: 13} });//给vue传配置对象,css选择器document.getElemetByid #，用class的是 '.root'// 1.想让Vue工作，就必须创建一个Vue实例，且要传入个配置对象;// 2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法;// 3.root容器里的代码被称为【Vue模板】;</script>
</body></html>