久违的更新 - VueJs学习记录

2021-01-24

字数统计: 912字 | 阅读时长≈ 3分钟

久违的更新！

在经历了一年的风风雨雨之后，终于结束了考研的艰苦岁月，同时也终于有机会去实现一直存于心中的遗憾，2021年初的开局好像比2020年来的更温和一些（希望是这样！），在考完研的那天，心心念念的姑娘向我发来了讯息，这令我激动万分！于是就这样我们抓住了2020的尾巴，在2020年年末的时候走到了一起，到目前为止，我们十分甜蜜希望我们有机会可以把这份甜蜜的序曲变成轰轰烈烈的生活交响曲。

我想和你一起生活,

在某个小镇，

共享无尽的黄昏,

和绵绵不绝的钟声。

正式开始今天的更新

今天是正式进军前端的第一天，也是拜女朋友所赐，才有机会可以系统的学习到这些理论和知识（来自廉价劳动力的叹息哎~），这次学的是Vue.Js，选他的目的是看中了其前景以及目前的应用场景，从UNI-APP到Hybrid开发，都可以看见Vue的身影

IDE的选择：这里我选择了使用最为简单的VSCode

Lesson 101 :

快速建立HTML5标准模板：
打开VSCode新建一个文件，在编辑栏输入!,按Tab自动补全Html5模板，十分方便！
body页面的处理：
Vue作为JS引擎，具有强大的处理能力，任何编程语言的第一课都是从hello world开始，可是我今天打算表白我的女朋友，哈哈哈哈
1
2
3
<body>
<div id='root'></div>
</body>
我们在body页面引入一个id为root的div标签，通过操作vue对其进行插入操作
创建Vue实例：
Vue.createApp({}).mount('#root');
这一步是将实例挂载在id为root的dom元素上

添加内容：

Vue.createApp({
     data(){
         return {
             content:1
         }
     },
     mounted(){
         setInterval(() => {
             this.content=this.content+1;
         }, 1000)
     },//页面加载完成后执行
     template:'<div>{{content}}</div>'
 }).mount('#root');

在将实例挂载到root的标签后，向其内部加入template标签内的内容但是 {content}为JavaScript的替换符，在data内我们定义了返回content:1的变量，因此此时标签被替换为<div>1</div>,但是mounted的意思是指在页面加载完成之后所要执行的内容：setInterval()设定了一个定时器，定时器的执行时间是1000ms一次，定时器要执行的操作是this.content = this.content + 1;，也就是对于data中定义的content进行一个自加的操作，因此页面就完成了一个基本的Counter的功能

彩蛋 & 总结：
- 学会了VueJs的基本技巧，同时还写了第一个Vue代码
  ![First Vue](https://api.radiology.link/static/pic/firstvue.png ‘’I Love Niki’’)
- 今天是她和我在一起心情最差的一天，而且晚上我还火上浇油，想要给她惊喜但是考虑的实在不（粥），拜钱多多所赐，要不然我们就打起来了！
- 最最最后，今天也是她~~第三次~~（好多次）![Complain](https://api.radiology.link/static/pic/complain.png ‘’I Love Niki’’)
  鼓起勇气跟她父亲去说我们俩关系的日子，在我编辑这段文字的时候，我的微信正在不断的发来消息提示，希望是好消息哦！~~虚惊一场，原来是阿姨要换手机~~
最后祝大家新年快乐！2021开局顺利！

周佳璇，我喜欢你 ❤

版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！

久违的更新 ！

正式开始今天的更新

久违的更新！