项目1 Vue快速入门

1.1编写”HelloWorld”程序Vue快速入门

onetaskVue简介目录CONTENTS什么是Vue1Vue时间线2Vue的优势31.什么是Vue一套用于构建用户界面的渐进式JavaScript框架Vue？Vue可以自底向上逐级的应用简单应用：只需要一个轻量的核心库复杂应用：可以引入各种各样的Vue插件1.什么是Vue主流的前端框架？2.Vue时间线受Angular框架启发，开发了一款轻量级框架—Seed，同年更名为Vue，版本0.6.0Vue正式对外发布，版本号0.8.0；Taylorotwell在Twitter上发动态，说自己正在学习Vue.js10月27日，正式发布1.0.0Evangelion（新世界福音战士）10月1日，正式发布Vue2.0.0GhostintheShell（攻壳机动队）9月18日，正式发布Vue3.0.0Onepiece（海贼王）201320142015201620203.Vue的优势轻量级框架1双向绑定2Vue生态3组件化4Vue相对于Angular框架，Vue是一个轻量级的框架，核心库才100k左右3.Vue的优势——组件化Blog.vueCategory.vueHot.vue4.总结Vue是一套用于构建用户界面的渐进式框架1Vue从2013年发展到现在，由Vue0发展到Vue32Vue是一个轻量级的前端框架，已经形成了完善的前端开发生态3Vue的两大特点：双向绑定和组件化开发4总结开发环境搭建目录CONTENTSVisualStudioCode编辑器1Vue的引入21.VisualStudioCode编辑器短小精悍，运行速度快，占用系统资源少提供语法高亮显示、智能代码补全等常用功能提供了丰富的插件，比如：Chinese、openinbrowser等——优势1.VisualStudioCode编辑器下载地址：https:///Download——安装1.VisualStudioCode编辑器插件：——安装1、Chinese：汉化工具2、openinbrowser：打开浏览器3、Vetur：Vue的重要插件4、Vue3Snippets：Vue代码补全插件5、ESLint：代码检查插件6、HTMLCSSSupport7、JavaScript（ES6）codesnippets2.Vue的引入方式一：直接CDN引入<scriptsrc="/vue@3/dist/vue.global.js"></script>方式二：下载到本地引入1.将Vue3库文件下载到本地2.引入：

<scriptsrc="vue.js"></script>编辑Vue模板：

1、文件->首选项->配置用户代码片段2、搜索html.json3、添加模板脚本2.Vue的引入总结VisualStudioCode编辑器的安装和使用1掌握vue的下载和引入方法2总结编写“HelloVue！”程序任务实现目录CONTENTS提出任务1分析任务2归纳总结4实施任务3本次课任务在页面中显示“HelloVue！”1.提出任务Vscode工具的使用Vue.js库文件的引入方法创建一个Vue实例data选项插值语法任务要点：案例效果：2.分析任务实践实现“HelloVue！”显示3.实施任务4.归纳总结总结创建Vue实例将Vue实