VUE快速入门
Vue quick start
学前基础
HTML
CSS
JavaScript
AJAX
开发工具
VS Code +Live Servier插件（代码保存，浏览器自动刷新）
课程安排
Vue基础、本地应用、网络应用、综合应用
第一章：Vue基础
Vue基础-简介
-
JavaScript框架
-
简化Dom操作
-
响应式数据驱动
Vue基础-第一个Vue程序
Vue作者尤雨溪 官方文档：https://cn.vuejs.org
第一个Vue程序：官方文档----起步
| <!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vue基础</title> </head>
<body> <div id="app"> { { message }} </div> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ message:" 你好 小黑! " } }) </script> </body>
</html> |
| 你好 小黑! |
| Vue使用步骤：
|
导包：
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者：
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
Vue基础-el挂载点
Vue实例的作用范围是什么？
Vue会管理el选项命中的元素及其内部的后代元素。
是否可以使用其他选择器？
可以使用，但建议使用ID选择器，#。
是否可以设置其他dom元素？
可以说hi用其他双标签，但不能使用TML和BODYy
Vue基础-data数据对象
Vue中用到的数据定义在data中
Data中可以写复杂类型的数据，如对象、数组等
渲染/调用复杂类型数据时，遵循js的语法即可
| <!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>data:数据对象</title> </head>
<body> <div id="app"> { { message }} <h2> { { school.name }} { { school.mobile }}</h2> <ul> <li>{ { campus[0] }}</li> <li>{ { campus[3] }}</li> </ul> </div> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ message:"你好 小黑!", school:{ name:"清华大学", mobile:"400-618-9090" }, campus:["北京校区","上海校区","广州校区","深圳校区"] } }) </script> </body>
</html> |
视频：https://www.bilibili.com/video/BV12J411m7MG?from=search&seid=488807520486206024
笔记：https://gitee.com/ikunsdc/vue-quick-start/blob/master/VUE%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8.pdf