初识vue vscode常用插件事件绑定

最新推荐文章于 2023-10-26 17:27:24 发布

tianmeng1999

最新推荐文章于 2023-10-26 17:27:24 发布

阅读量481

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_42448623/article/details/107134410

版权

vue 专栏收录该内容

58 篇文章 0 订阅

订阅专栏

目录结构

什么是vue

vue是一个前端开发框架，用于降低UI复杂度

vue特点

渐进式
响应式
组件化

体验vue代码

vscode常用插件

Auto Rename Tag 自动结束标签
Live Server 自动搭建本地服务器
Prettier Code formater 代码美化
Veter vue组件格式支持
vscode-icons 美化文件图标
Code Runner 运行代码片段右键 run code 运行

体验

vue2.0.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue2.0.js"></script>
</head>
<body>
    <div id="app">
        {{title}}
    </div>
    <script>
        let vm = new Vue({ // 配置
            el:"#app", // 配置模板
            data:{ // 配置数据
                title:'初试vue' 
            }
        })
    </script>
</body>
</html>

在这里插入图片描述
数据响应式

 vm.title = "数据响应式"

在这里插入图片描述

事件绑定

<div id="app">
    {{title}}
    <div @click="divClick">点击事件</div>
</div>
<script>
    let vm = new Vue({ // 配置
        el:"#app", // 配置模板
        data:{ // 配置数据
            title:'初试vue' 
        },
        methods:{
            divClick(){
                console.log("vue 点击事件绑定");
            }
        }
    })

    // 数据响应式
    vm.title = "数据响应式"
</script>

在这里插入图片描述

tianmeng1999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识vue vscode常用插件事件绑定

目录结构什么是vuevue特点体验vue代码vscode常用插件体验事件绑定什么是vuevue是一个前端开发框架，用于降低UI复杂度vue特点渐进式响应式组件化体验vue代码vscode常用插件Auto Rename Tag 自动结束标签Live Server 自动搭建本地服务器Prettier Code formater 代码美化Veter vue组件格式支持vscode-icons 美化文件图标体验vue2.0.js<!DOCTYPE html>&
复制链接

扫一扫