vue学习1.0

转载

mb5fd33fb726faf 2021-08-12 17:07:00

文章标签 ico html 数据 javascript web前端 文章分类 Java 后端开发

初识vue

Vue

视频学习：【尚硅谷】Web前端迅速上手Vue教程丨vue3.0入门到精通

https://www.bilibili.com/video/BV1Zy4y1K7SH

Vue简介

一套用于构建用户界面的渐进式JS框架
采用组件化模式，提高代码复用率、且让代码更好维护
声明式编码
AwesomeVue

初识Vue

VSCode插件 LiveServer 将项目文件夹运行至端口号为5500的本地服务器上
网页标签404（favicon.ico）

解决：添加一个favicon.ico于文件根目录即可

在线生成ico：https://www.bitbug.net/
阻止vue在启动时生成生产提示
```
Vue.config.productionTip = false
```

helloworld小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初识Vue</title>
    <!--引入Vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--  准备好一个容器  -->
    <div id="root">
        <h1>Hello,{{name}}</h1>
    </div>


</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示

    //创建Vue实例
    new Vue({
        el: "#root",     //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串，也可以用document操作
        data : {    //data用于存储数据，供el指定的容器使用
            name:"World",
        }
    })
</script>
</html>