vue入门:安装vscode及需要的插件后,支持页面动态改变

我们在学习vue的时候,知道其数据动态绑定,我们一改值,页面也会跟着改变,但是idea不容易做到这一点(我不知道怎么搞),于是就研究了一下vscode。

vscode 安装
我是mac版本的,直接在下载站下载的,官方太慢了,这个安装没什么困难的。

设置成中文
vscode是可以支持中文的,左边菜单栏最下面那个扩展商店,搜索chinese,安装重启后即可生效,菜单栏就会变成中文。


如果你不习惯用中文,可以卸载重启即可生效。

新建html页面
刚开始要新建页面的时候,我真是两眼一抹黑!这个新建就一个空的什么都没有的页面,然后去百度了一下。

新建文件后,直接保存,输入文件名.html,他就变成了一个html文件。

但是没有那些基础的框架,这个时候我们只需要输入一个英文的感叹号,然后按tab键就会生成了。

在浏览器打开
然后怎么在浏览器打开呢?好家伙又是两眼一抹黑。

这个还需要安装一个插件open in browser

然后在你的文件编辑区域右键就可以看到
然后我们选择 open in default browser,在默认浏览器打开。

第一个vue文件
然后开始编写第一个vue文件。

首先用cdn直接导入vue的开发版本包,就不用安装那些有的没的,还有提示警告等。

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
1
开始写代码,new一个Vue对象,在里面写几个元素。

<script>
const vm = new Vue({
el: "#app",
data:{
message: "hello vue344666777"
}
});
</script>
1
2
3
4
5
6
7
8
el表示的是element元素,#就是id选择器了,也就是id为app的元素就生效。

data就是放一些数据用的,代表着message的值为这个。

然后开始写标签

<div id="app">
{{message}}
</div>
1
2
3
因为这个div的id是app,所以就被我们上面new出来vue绑定了,所以里面的这种两个大括号就可以把data中的数据注入进去。

所以页面效果就变成了这样。


只要修改data中message的值,页面上就会跟着改变。

顺带提一嘴mac怎么双屏,在你的app左上角的绿色按钮是用来全屏的,长按就会多出来选项,这个时候就可以选择放在左边还是右边。

然后另外一边再选一个,就双屏了。

但是细心以及正在烦心的同学就会发现,页面并没有跟着刷新,是因为vscode不会自动保存。

需要手动保存。

当然光保存还不够,还要再安装一个插件,live server。

此时在右击代码,就会多出了一块open with Live server

但是打不开,右下角会报错,错我已经截不到了,因为我已经解决了。

但是我又搜索记录,大概就是这一段。

Open a folder or workspace... (File -> Open Folder)
1
但是我没找到解决的方法,瞎猫碰见死耗子,解决了。


然后每次修改后保存就会发现他跟着变了!是不是很快乐!ok,睡觉!
————————————————
原文链接:https://blog.csdn.net/weixin_45369440/article/details/117339186

 

posted @ 2023-02-21 16:33  imxiangzi  阅读(212)  评论(0编辑  收藏  举报