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

目录结构

什么是vuevue特点体验vue代码vscode常用插件体验事件绑定

什么是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>