初识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~,♥️