初识vue
此处及以下所讲的vue暂时为vue2.x版本，后续有vue3.x版本会再做声明
什么是vue
众所周知，vue是一种框架，那到底是什么框架，什么是框架，有什么用，能用来干什么，说到底很难有人说清楚，我作为一名初学者没办法理解那么高深，那就让我用初学者的角度来往后讲述我对vue的看法。
框架，是指对常见功能的封装，为了方便写代码而产生的可重用设计
== 而vue，简单来说，是基于js的一种单页面web应用框架==
这里有个新词：单页面
什么是单页面呢？
单页面是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入。
相比初学者看到这些肯定还是不够了解，不过会在vue的学习过程中逐渐理解什么叫做单页面应用，因为vue就是干这个的～
分割线～～～～
在学习vue的初期，我们并不能像大佬一样一上来就使用脚手架搭建项目，写一些🐂气哄哄的代码，对于初学者来说，我们的学习暂时是针对于html嵌入vue.js，话不多说，上实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>初识vue</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--定义一个容器-->
<div id="root">
<h1>Hello,{{name.toUpperCase()}},{{address}},{{Date.now()}}</h1>
</div>
<script type="text/javascript">
//关闭vue的生产提示，后面的代码都会有这一行
Vue.config.productionTip = false
//创建Vue实例
const x = new Vue({
//el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
el: '#root' ,
//data用于存储数据，数据供el所指定的容器去使用，值我们暂时写成一个对象
data: {
name: '张三',
address: '湖南',
}
})
</script>
</body>
</html>
在上述代码中可以看到，我们在head标签内部引入了一个叫做vue.js的外部文件，这就是我们写vue相关代码的大前提。
针对上述代码我做了如下解释：
<!--
1.想要Vue工作，就必须创建一个Vue实例，并且要传入一个配置对象；
2.root容器里的代码符合html规范，只不过混入了一些特殊的vue语法；
3.root容器里的代码被称为【Vue模板】；
4.vue实例和容器是一一对应的
5.真实开发中只有一个vue实例，并且配合组件一起使用
6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性,例如：
下方的{{name}}是一个字符串，则可以使用toUpperCase()函数去将字符串中的小写字母变成大写。
7.一旦data中的数据发生改变，那么模板（页面）中用到该数据的地方也会自动发生改变
注意区分：js表达式 和 js代码（语句）
1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的位置；
（1），a
（2），a+b
（3），demo(1)
（4），x==y ? 'a' : 'b'
2.js代码（语句）
（1）if(){}
（2）for(){}
-->
上述内容均为跟随尚硅谷老师学习所记下的笔记，纯手打，By the way
尚硅谷yyds~,♥️
2148
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
