河北路泰建设工程有限公司网站,vi设计的作用及意义,做网站安全认证,潜江官方新闻目录
一. Vue脚手架(Vue CLI)
1.1 安装新版本的Vue脚手架vue/cli
1.2 用命令创建Vue项目
1.2.1 命令创建vue项目
1.2.2 默认创建
1.2.3 自定义创建
1.2.4 基于ui界面创建Vue项目
1.3 分析Vue脚手架生成的项目结构及代码执行
1.3.1 默认创建文件结构
1.3.2 分开放置文…目录
一. Vue脚手架(Vue CLI)
1.1 安装新版本的Vue脚手架vue/cli
1.2 用命令创建Vue项目
1.2.1 命令创建vue项目
1.2.2 默认创建
1.2.3 自定义创建
1.2.4 基于ui界面创建Vue项目
1.3 分析Vue脚手架生成的项目结构及代码执行
1.3.1 默认创建文件结构
1.3.2 分开放置文件的文件含义
1.3.3 主要文件及含义
assets和public目录的区别:
1.3.4 项目架构的了解
1.4 webpack和vue脚手架的关系
1.5 Vue脚手架的自定义配置
1.5.1 通过单独的配置文件进行配置创建vue.config.js
1.5.2_eslint了解
1.5.3 单vue文件讲解
1.6 vscode插件安装
脚手架使用总结
步骤
1.7 Yarn(补充)
1.7.1 Yarn是什么
1.7.2 Yarn和npm(Node Package Manager)命令对比
1.7.3 npm的未来npm5.0之后
1.7.4 npm和yarn切换包管理器
二.v-bind
2.1 绑定 href/src
2.2绑定class(重要)
1) 绑定数组
2) 绑定对象
3) 总和
2.3 绑定style
1对象
2属性
3数组
2.4 动态属性(了解)
三. 分支结构(重点)
3.1 v-if 使用场景
3.2 v-if和v-show的区别
四. 循环结构 v-for(重点)
4.1 普通数组
4.2 对象
4.3 数组对象
4.4 字符串
4.5 数值
4.6 v-for 中的key值
4.7 不推荐同时使用 v-if 和 v-for 一. Vue脚手架(Vue CLI)
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,通过 vue/cli 实现的交互式的项目脚手架,脚手架是为了保证各施工过程顺利进行而搭设的工作平台。
工程化开发方式这是最推荐, 企业常用的方式 vue/cli的好处 不需要配置打包设置 babel支持 less支持 开发服务器支持
1.1 安装新版本的Vue脚手架vue/cli
Vue Cli官网
npm install -g vue/cli
npm install -g vue/cli4 查看vue脚手架版本
vue -V 总结: 如果出现版本号就安装成功, 否则失败 1.2 用命令创建Vue项目
1.2.1 命令创建vue项目
vue create 项目名
#其中my-project为项目名
vue create my-project
注意: 项目名不能带大写字母, 中文和特殊符号或者和下载的包依赖名称相同
1.2.2 默认创建 1.2.3 自定义创建 选择Manually select features(选择特性以创建项目) 勾选特性可以用空格进行勾选。 选择版本 ESLint选择ESLint Standard config ESLint with error prevention only 指仅用于错误预防 ESLint Airbnb config 指ESLint 和Airbnb代码规范 ESLint Standard config 指ESLint 和Standard代码规范 ESLint Prettier 指ESLint 和Prettier代码规范 何时进行ESLint语法校验Lint on save babelpostcss等配置文件如何放置 In dedicated config files 独立文件放置 In package.json 放package.json里 是否保存为模板n 进入脚手架项目下, 启动内置的热更新本地服务器 npm run serve
# 或
yarn serve
1.2.4 基于ui界面创建Vue项目
输入命令vue ui
在自动打开的创建项目网页中配置项目信息。 1.3 分析Vue脚手架生成的项目结构及代码执行
1.3.1 默认创建文件结构 my-project # 项目目录├── node_modules # 项目依赖的第三方包├── public # 静态文件目录├── favicon.ico# 浏览器小图标├── index.html # 单页面的html文件(网页浏览的是它)├── src # 业务文件夹├── assets # 静态资源└── logo.png # vue的logo图片├── components # 组件目录└── HelloWorld.vue # 欢迎页面vue代码文件 ├── App.vue # 整个应用的根组件├── main.js # 入口js文件├── .gitignore # git提交忽略配置├── babel.config.js # babel配置文件--babel是一个JS编译器兼容低版本浏览器引入babel将es6转为es5├── jsconfig.json #如果想要更改默认的webpack配置时,可以通过jsconfig.json文件├── package.json # 依赖包列表├── README.md # 项目说明├── packge-lock.json # 项目包版本锁定├── vue.config.js #vue文件编译时的配置文件
1.3.2 分开放置文件的文件含义
.browserslistrc:在使用脚手架搭建项目时会自动生成.browserslistrc文件该文件是配置兼容浏览器
.editorconfig:配置和格式化代码
.eslintrc.js:是一个名为eslint的工具的配置文件
1.3.3 主要文件及含义
node_modules:依赖包目录
public静态资源目录
src源码目录
src/assets:静态资源目录
src/components组件目录
src/App.vue:根组件
src/main.js:入口js
babel.config.js:babel配置文件--babel是一个JS编译器兼容低版本浏览器引入babel将es6转为es5 assets和public目录的区别: assets和public两个目录都可以用来放置静态资源通常将外部引入的第三方的文件放在public中自己的文件放在assets中。 1、public文件夹 1路径设置时无需添加 /public默认加载 public 文件夹下的文件 2public文件夹下的资源会直接编译而不经过 webpack 2、assets文件夹 1assets目录中的文件会被webpack处理解析为模块依赖 2大多数用来存放js、css等 1.3.4 项目架构的了解 1.4 webpack和vue脚手架的关系
vue是一套渐进式就是你需要什么就用什么不需要什么就可以不用强制你遵守的规则很少自底向上增量开发就是根据系统和硬件编写出基层的基本需求代码再慢慢增加模块由于他要求遵守的规则较少你可以引不同自己需要的东西就需要配合webpack打包工具把引入的不同模块的东西打包。
webpack是一个工具俗称打包工具就是把所以浏览器不能识别的东西如lessscss等转换为浏览器可以识别的语言如css因为vue中需要引入大量的各种各样的模块,所以依赖webpack ,在webpack看来一切皆模块。
1.5 Vue脚手架的自定义配置
1.5.1 通过单独的配置文件进行配置创建vue.config.js
module.exports {devServer:{//项目的主机名:localhost,127.0.0.1或者具体ip地址host: 127.0.0.1,//项目的端口号port:8881,//项目启动自动打开浏览器open:true}
}
1.5.2_eslint了解
eslint的作用, 它是一个代码检查工具,代码不严谨会出现错误,页面加载不出来
方式1: 手动解决掉错误, 以后项目中会讲如何自动解决
方式2: 暂时关闭eslint检查(因为现在主要精力在学习Vue语法上), 在vue.config.js中配置后重启服务 module.exports {// ...其他配置lintOnSave: false // 关闭eslint检查}
1.5.3 单vue文件讲解 单vue文件好处, 独立作用域互不影响 Vue推荐采用,vue文件来开发项目,vue文件-独立模块-作用域互不影响 template里只能有一个根标签 style配合scoped属性, 保证样式只针对当前template内标签生效 Vue文件打包起来插入到index.html, 然后在浏览器运行
!-- template必须, 只能有一个根标签, 影响渲染到页面的标签结构 --
templatediv欢迎使用vue/div
/template!-- js相关 --
script
export default {name: App
}
/script!-- 当前组件的样式, 设置scoped, 可以保证样式只对当前页面有效 --
style scoped
/style1.6 vscode插件安装
vue文件代码高亮插件-vscode中安装 脚手架使用总结 步骤 第一步进行全局安装仅第一次执行警告忽略 npm install -g vue/cli第二步切换到需要创建项目的目录使用命令行创建项目 vue create xxx第三步启动项目 npm run serve1.7 Yarn(补充)
1.7.1 Yarn是什么
Yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具 正如官方文档中写的Yarn 是为了弥补 npm 的一些缺陷而出现的。
安装: 通过安装包安装,也可以通过npm安装:npm install yarn -g 通过安装包安装
1.7.2 Yarn和npm(Node Package Manager)命令对比
npmyarnnpm installyarnnpm install vueyarn add vuenpm uninstall vueyarn remove vuenpm install vue --save-dev/-Dyarn add vue --devnpm install -g vue/cliyarn global add vue/cli
1.7.3 npm的未来npm5.0之后
有了yarn的压力之后npm做了一些类似的改进。 默认新增了类似yarn.lock的 package-lock.json git 依赖支持优化这个特性在需要安装大量内部项目或需要使用某些依赖的未发布版本时很有用。在这之前可能需要使用指定 commit_id 的方式来控制版本。 文件依赖优化在之前的版本如果将本地目录作为依赖来安装将会把文件目录作为副本拷贝到 node_modules 中。而在 npm5 中将改为使用创建 symlinks 的方式来实现,这将会提升安装速度。目前yarn还不支持。
1.7.4 npm和yarn切换包管理器 用户目录下找到 将 packageManager: npm -- 修改为 packageManager: yarn, 二.v-bind
v-bind 指令被用来响应地更新 HTML 属性
2.1 绑定 href/src v-bind:href 可以缩写为 :href;
!-- 绑定一个属性 --
a v-bind:hrefurl百度/a
img v-bind:srcimageSrc
!-- 缩写 --
a :hrefurl百度/a
img :srcimgLog alt
script//导入
import logosrc from ./assets/logo.png
export default {name: App,components: {},data() {return {msg1:hello , vue!!!,msg2:http://www.baidu.com,imageSrc:https://cdn4.buysellads.net/uu/1/41334/1550855391-cc_dark.png,imgLog:logosrc};},
};
/script
2.2绑定class(重要) 我们可以给v-bind:class 一个对象以动态地切换class。 注意v-bind:class指令可以与普通的class特性共存
v-bind 中支持绑定一个对象 如果绑定的是一个对象,则键对应的类名值为对应data中的数据
1) 绑定数组
v-bind 中支持绑定一个数组,数组中classA和 classB 对应为data中的数据
这里的classA 对用data 中的 classA 这里的classB 对用data 中的 classB
ul classbox :class[classA, classB]li学习Vue/lili学习Node/lili学习React/li
/ul
script
...
data() {return {classA: a,classB: b,};},
/script
2) 绑定对象
ul classbox li :class{a:true}学习Vue/lili :class{a:false}学习Node/lili :class{a:flag}学习React/li
/ul
script
...
data() {return {flag:true};},
/script
3) 总和
ul classbox li :classclass1学习Vue/lili :classclass2学习Node/lili :classclass3学习React/li
/ul
script
...
data() {return {class1:a,class2:[a,b],class3:{a:true,b:true,c:false}};},
/script
2.3 绑定style
1对象
div v-bind:stylestyleObject绑定样式对象/div
script
data() {return {styleObject:{width:200px,height:200px,backgroundColor:red}
}
/script
2属性
!-- CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case记得用单引号括起来) --div v-bind:style{ color: activeColor, fontSize: fontSize,background:red }内联样式/divscript
data() {return {activeColor:blue,fontSize:20px
}
/script
3数组
!--组语法可以将多个样式对象应用到同一个元素 --
div v-bind:style[styleObject, styleObj2]/div
script
data() {return {styleObject:{width:200px,height:200px,backgroundColor:red},styleObj2:{border:10px solid black}
}
/script
2.4 动态属性(了解)
div :[attrname]attrvalue动态属性名称绑定/div
scriptdata() {return {attrname:id,attrvalue:1};},
/script
三. 分支结构(重点)
3.1 v-if 使用场景 1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素 2- 进行两个视图之间的切换 divdiv v-ifscore 90优秀/divdiv v-else-ifscore 80良好/divdiv v-else-ifscore 60及格/divdiv v-else不及格/div/divdivspan v-ifsex男男/spanspan v-else-ifsex女女/spanspan v-else保密/span/div
3.2 v-if和v-show的区别 v-if是动态的向DOM树内添加或者删除DOM元素 v-if切换有一个局部编译/卸载的过程切换过程中合适地销毁和重建内部的事件监听和子组件 v-show本质就是标签display设置为none控制隐藏 v-show只编译一次后面其实就是控制css而v-if不停的销毁和创建某些情况下v-show性能更好一点。
span v-showflag隐藏显示/span
四. 循环结构 v-for(重点)
4.1 普通数组 用于循环的数组里面的值是普通元素
li v-foritem, index in items :keyindex
{{item}} ---------- {{ index}}
/li
scriptdata() {return {items: [张三, 李四, 王五],}}
/script
4.2 对象
li v-for( value, key, index) in obj :keyindex
{{ value }} ---------- {{ key }} -----------{{ index }}
/li
scriptdata() {return {obj: {name: 张三,age: 12,sex: 男,clazz: 火花225,},}}
/script
4.3 数组对象
li v-for( item, index) in items :keyitem.id
{{ item.id }} ---{{item.name}}--------{{ index }}
/li
scriptdata() {return {items: [{id:1,name:张三1},{id:2,name:张三2},{id:3,name:张三3},{id:4,name:张三4},],}}
/script
4.4 字符串
li v-for( item, index) in str :keyindex
{{ item }} ---------{{ index }}
/li
scriptdata() {return {str:hello world,}}
/script
4.5 数值
li v-for( item, index) in str :keyindex
{{ item }} ---------{{ index }}
/li
scriptdata() {return {num:20,}}
/script
4.6 v-for 中的key值
Vue实现了一套虚拟DOM使我们可以不直接操作DOM元素只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法我们将在下节详细讲解key值得意义。
4.7 不推荐同时使用 v-if 和 v-for 当 v-if 与 v-for 一起使用时v-for 具有比 v-if 更高的优先级。
