什么是vue
vue是一个前端开发框架,用于降低UI复杂度
vue特点
- 渐进式
- 响应式
- 组件化
体验vue代码
vscode常用插件
- Auto Rename Tag 自动结束标签
- Live Server 自动搭建本地服务器
- Prettier Code formater 代码美化
- Veter vue组件格式支持
- vscode-icons 美化文件图标
- Code Runner 运行代码片段 右键 run code 运行
体验
<!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>