从0开始学VUE(一)

时间：2021-05-25 12:20:00 阅读：9 评论：0 收藏：0 [点我收藏+]

官网

官方地址:https://cn.vuejs.org/
文档地址:https://cn.vuejs.org/v2/guide/

安装Vuejs

CDN引入(一般不用)

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

下载到本地

地址:https://cn.vuejs.org/v2/guide/installation.html
下滑找到
对图标右键链接另存为(使用开发版本,只有上线采用生产版本)
下载成功

IDEA安装VUE插件

本身IDEA是不支持VUE的,需要安装插件,在file->settings->plugins中搜索VUE安装即可

技术分享图片

IDEA 创建JS项目(IDEA,2021)

新建项目

找一个位置新建一个文件夹

技术分享图片

到此就可以得到一个空项目,接下来将VUE导入项目中

在项目下创建JS文件夹,将vue.js拷贝进去

技术分享图片

完成

体验Vuejs

Hello Vuejs

创建目录和 HelloVuejs.html

技术分享图片

编写代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    引入VUE.JS-->
    <script src="../../js/vue.js"></script>
</head>
<body>
<!--    用于挂载Vue的根节点-->
    <div id="app">
<!--        {{数据key}} 使用双大括号获取下面定义的值-->
        <div>{{ message }}</div>
    </div>
</body>
<script>
    // 创建vue
    const vue = new Vue({
        // 挂载要管理的数据
        el: ‘#app‘,
        // 定义数据
        data: {
            // 定义一个名字为message的数据,值为 hello vue js!
            message: ‘hello vue js!‘
        }
    })
</script>
</html>

运行

技术分享图片

可以在浏览器中访问,也可以直接在IDEA中查看

点击IJ

技术分享图片

可以看到展示的是下面定义的数据,IDEA内部展示,不需要切换到浏览器窗口,方便修改代码实时查看效果,非常好用

Vue显示列表

新建ViewList.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div>{{ list }}</div>
<!--        采用v-for 展示数组-->
        <ul v-for="item in list">
            <li>{{item}}</li>
        </ul>
    </div>
</body>
<script>
    // 创建vue
    const vue = new Vue({
        el: ‘#app‘,
        data: {
            // 定义数组
            list: [‘Spring‘,‘SpringMvc‘,‘SpringBoot‘,‘SpringCloud‘]
        }
    })
</script>
</html>

运行,通过v-for循环展示数组,如果通过双大括号,那么展示的就是字符串

技术分享图片

案例:实现计数器

新建Number.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
<div id="app">
    <div>
      <!-- @click 用于绑定点击事件 -->
        <input type="button" @click="incr" value="+">
        <span>当前数字为:{{num}}</span>
        <input type="button" @click="decr" value="-">
    </div>
</div>
</body>
<script>
    // 创建vue
    const vue = new Vue({
        el: ‘#app‘,
        data: {
            num: 1
        },
      // 用于定义方法
        methods: {
            incr(){
                this.num++;
            },
            decr(){
                this.num--;
            }
        }
    })
</script>
</html>