Vue 的简单入门案例以及vue谷歌插件下载安装 vscode插件安装

最新推荐文章于 2024-04-29 15:45:02 发布

Kiteyy

最新推荐文章于 2024-04-29 15:45:02 发布

阅读量163

点赞数 1

分类专栏：每天的学习笔记文章标签： vue js html

本文链接：https://blog.csdn.net/weixin_46554504/article/details/107598735

版权

每天的学习笔记专栏收录该内容

63 篇文章 0 订阅

订阅专栏

Kite学习历程的第三十六天

1. 引入依赖：

首先输入：npm -init -y
输入： npm install vue 进行vue的安装

2. 在vscode上安装相应的插件，以及谷歌浏览器安装插件

vue代码提示插件
在这里插入图片描述
vue代码高亮插件

谷歌安装vue-devtools
插件下载地址：添加链接描述
提取码：sb6b
下载解压后在谷歌浏览器中进行安装

3. 创建index.html 页面进行简单测试


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id = "app">
        <!-- 插值表达式 ： 还可以实现双向绑定： 模型变换，视图变化-->
        <input type="text" v-model="num">
        <!-- 事件处理 -->
        <button v-on:click="num++">点赞</button>
        <button v-on:click="cancle">取消点赞</button>
        <h1>{{name}}, 非常帅！有{{num}}为他点赞！</h1>
    </div>

    <!-- 引入vue依赖 -->
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        // 创建以vue去管控一个对象,申明渲染
        /**
         * 
        */
        let vm = new Vue({
            // 指明控制的对象
            el: "#app",
            data: {
                name: "Kite",
                num: 1
            },
            //方法存放区
            methods:{
                cancle(){
                    this.num--;
                }
            }
        });
    </script>

    
</body>
</html>