胶州专业网站建设公司,创建公司网站需要准备哪些素材,新媒体运营的发展前景,最难进的十大央企Vue1、Vue 与其他框架的对比及特点1.1 Vue.js 是什么1.2 作者1.3 作用1.4 Vue 与其他框架的对比2、安装 Vue 的方法2.1 CDN 引入2.2 脚手架工具2.3 vue 开发者工具安装3、创建第一个实例4、理解 Vue 的 MVVM 模式5、数据双向绑定5.1 感受响应式实验总结1、Vue 与其他框架的对比…
Vue1、Vue 与其他框架的对比及特点1.1 Vue.js 是什么1.2 作者1.3 作用1.4 Vue 与其他框架的对比2、安装 Vue 的方法2.1 CDN 引入2.2 脚手架工具2.3 vue 开发者工具安装3、创建第一个实例4、理解 Vue 的 MVVM 模式5、数据双向绑定5.1 感受响应式实验总结1、Vue 与其他框架的对比及特点 官网 中文https://cn.vuejs.org/ 英文https://vuejs.org/ 1.1 Vue.js 是什么 Vue (读音 /vjuː/类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层不仅易于上手还便于与第三方库或既有项目整合。另一方面当与现代化的工具链以及各种支持类库结合使用时Vue 也完全能够为复杂的单页应用提供驱动。信息来源Vue 官网 1.2 作者 尤雨溪毕业于上海复旦附中在美国完成大学学业本科毕业于 Colgate University后在 Parsons 设计学院获得 Design Technology 艺术硕士学位任职于纽约 Google Creative Lab。信息来源百度百科 1.3 作用 Vue.js 框架的作用主要注重动态的构建用户界面前端工程化和模块化开发。 1.4 Vue 与其他框架的对比 Vue 是一个推陈出新的前端框架吸收了很多前端框架的优点。例如Vue 借鉴了 React 的组件化和虚拟 DOM 借鉴了 Angular 的模块化和数据绑定。因此我们以 Vue.js 作为入手以后深入学习其他框架你会发现他们的共通之处更好地高效地学习。 选择 Vue.js 的更多原因是就框架的 API 而言对比之下Vue 更加轻便简洁。Vue 自身拥有开箱即用的生态开发包Vuex、Vue-Router等复杂性低、学习成本低是一门比较好入门的前端框架。 2、安装 Vue 的方法
2.1 CDN 引入 不用下载到本地即引即用,推荐 2 个较稳定的 cdn以下任选其一 script srchttps://cdn.jsdelivr.net/npm/vue2.7.10/dist/vue.js/script
script srchttps://cdn.jsdelivr.net/npm/vue2.7.10/script由于非会员用户无法访问外网所以统一使用引用链接为
https://labfile.oss.aliyuncs.com/courses/1262/vue.min.js。2.2 脚手架工具 1、vue-cli 是基于 npm 的所以应该先安装 node 环境通过 node 官网http://nodejs.cn/ 下载系统对应的 node 安装程序。 注意 NPM 是随同 Node.js 一起安装的包管理工具。因此当我们安装好 Node.js 的时候也安装好了 NPM。 2、node 安装完毕使用npm 包管理工具安装 vue-cli。 npm i -g vue/cli-init3、命令行输入 vue出现 Usage 表示安装成功。 4、使用 vue create 命令来创建一个 Vue 项目。 vue create first-vue # 这里的 first-vue 项目名5、完成配置后使用以下命令将 Vue 项目运行起来。 cd first-vue
npm run serve6、成功执行命令行后我们打开右侧的 Web 服务即可访问项目的页面。 2.3 vue 开发者工具安装
注意 由于线上环境使用的是 Preview 或 Mini Browser 是一个轻量级的浏览器不支持插件安装如需安装请在自己的电脑上对应安装。 在使用 Vue 时推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。 1、下载对应浏览器的 Vue Devtools。
Get the Chrome Extension / (beta channel)Get the Firefox Addon / (beta channel)Get standalone Electron app (works with any environment!)
2、打开浏览器打开设置开发工具扩展程序将下载好的 Vue Devtools 拖到界面中即可完成安装(谷歌浏览器为例)。 3、你就可以在浏览器中轻松调试你的 vue 应用。
3、创建第一个实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例 开始的 var app new Vue({// 选项
});Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统我们新建一个 .html 后缀的文件输入以下代码运行右击文件 open with Preview 或 Mini Browser你就会看到 {{msg}} 被渲染成 hello。 !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /meta http-equivX-UA-Compatible contentieedge /titlesyl-vue-test/title!--引入 vue.js--script srcvue.min.js/script/headbodydiv idapp{{msg}}/divscriptvar app new Vue({el: #app, // dom 挂载点data: {// 数据项msg: hello syl,},});/script/body
/html说明 el 为实例挂载点上面表示挂载在 id 为 app 的 dom 元素中。data 选项为数据选项存放绑定数据。除了这两个之外还有实例选项methods实例方法、computed计算属性 等
4、理解 Vue 的 MVVM 模式 MModel 即数据逻辑处理。VView 即视图用户界面。VMViewModel 即数据视图用于监听更新View 与 Model 数据的双向绑定。 所以Vue 一大特点就是数据双向绑定另一大特点就是响应式接下来我们来看看它的魅力。 5、数据双向绑定 在 Vue 中数据双向绑定随处可见最常见的是表单数据中的双向绑定例如 !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /meta http-equivX-UA-Compatible contentieedge /titlesyl-vue/title!--引入 vue.js--script srcvue.min.js/script/headbody!-- 数据双向绑定 --div idappinput typetext v-modelmsg /p{{msg}}/p/divscriptvar app new Vue({el: #app, // el: 挂载点data: {// data:数据选项msg: hello,},});/script/body
/html在我们对文本框输入值时实例 data 中的 msg 值也随之变化。运行效果
5.1 感受响应式 上面我们了解到 Vue 是一个 MVVM 架构的框架成功创建了一个 Vue 应用看起来这跟渲染一个字符串模板非常类似但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联所有东西都是 响应式的。我们可以看看他是不是响应式的打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)并修改 app.msg 的值你将看到上例相应地更新更改数据也触发视图的相应更新。 实验总结
Vue 与其他框架的对比及特点安装 Vue 的方法node 的安装vue-cli 的安装Vue 开发者工具的安装Vue 创建实例Vue 数据的双向绑定及响应式
