网站建设的对比分析,做百度移动网站点击软,开发wordpress插件如何防破解,陕西住房城乡住房建设厅网站一、单页面应用程序
单页面应用程序#xff08;英文名#xff1a;Single Page Application#xff09;简 称 SPA#xff0c;顾名思义#xff0c;指的是一个 Web 网站中只有唯一的 一个 HTML 页面#xff0c;所有的功能与交互都在这唯一的一个页面内完成。
二、vue-cli …一、单页面应用程序
单页面应用程序英文名Single Page Application简 称 SPA顾名思义指的是一个 Web 网站中只有唯一的 一个 HTML 页面所有的功能与交互都在这唯一的一个页面内完成。
二、vue-cli 脚手架
什么是脚手架
vue -cli 是 Vue.js 开发的标准工具。它简化了程序员基于webpack 创建工程化的 Vue 项目的过程
引用自 vue -cli 官网上的一句话程序员可以专注在撰写应用上而不必花好几天去纠webpack 配置的问题 安装和使用
1、脚手架基于 node 下才可安装
node -v 检测 node 版本安装成功 自带 npm 工具 npm install -g cnpm - -registryhttps://registry.npm.taobao.org 注意npm 安装失败建议先用 npm 安装一下 cnpm 用淘宝镜像安装
2、安装脚手架
vue -cli2.x np m i vue -cli -g vue -cli3.x npm install -g vue/cli 注 两个版本不能同时存在
卸载 np m un vue -cli 或 vue/cli 验证vue -cli 安装成功 vue -V
3、利用 vue -cli 搭建项目 Vue in it 模板名称 项目名称1.x 2.x Vue create 项目名称 3.x 4.x 4、启动开发环境 Npm serve vue 项目的运行流程
在工程化的项目中vue 要做的事情很单纯通过 main.js把 App.vue 渲染到 index.html 的指定区域中。
其中 ① App.vue 用来编写待渲染的模板结构
② index.html 中需要预留一个 el 区域
③ main.js 把 App.vue 渲染到了 index.html 所预留的区域中
三、组件化开发 什么是组件化
组件化开发指的是根据封装的思想把页面上可重用的 UI
结构封装为组件从而方便项目的开发和维护。
vue 是一个支持组件化开发的前端框架。
vue 中规定组件的后缀名是 .vue。之前接触到的
App.vue 文件本质上就是一个 vue 的组件
使用组件
. 组件开发三步曲声明、注册、使用不搭脚手架
组件的使用事项
1.组件必须要有一个根元素
2.当组件在使用中标签中不需要嵌套东西可以使用单标签
3.在组件复用的时候就使用双标签
组件开发三步曲声明、注册、使用
① vue 组件的三个组成部分搭脚手架
每个 .vue 组件都由 3 部分构成分别是
template - 组件的模板结构
script - 组件的 JavaScript 行为
style - 组件的样式
其中每个组件中必须包含 template 模板结构而 script行为和 style 样式是可选的组成部分。
② vue 组件的使用
声明组件、注册组件、使用组件
③ 通过 components 注册的是私有组件
通过 components 注册的是私有子组件
④ 全局组件
在vue项目的main.js入口文件中通过vue.component()方法可以注册全局组件 组件中的 props
① 什么是 props
props是组件的自定义属性在封装通用组件的时候合理地使用props可以极大的提高组件的复用性! ② prop 是只读属性 要想修改props的值可以把props的值转存到data中因为data中的数据都是可遗可写的!
③ prop 的默认值 default
在声明自定义属性时可以通过defau性来定义属性的默认值。 ④ prop 的 type 值类型
在声明自定义属性时可以通过1ype来定义属性的值类型 Required 的意思时谁用我这个组件就必须要传递 init 的值如果不传就会报错
