Vue进阶
1、VS code插件
2、ES6语法
let:和var 关键字语法基本一致,没有变量提升
模板字符串:使用 · ·包裹文本,在需要替换的位置使用 ${ } 占位,并填入内容即可
对象简化赋值:如果属性名和变量名相同,可以简写。方法可以省略function关键字
function省略掉,替换为 =>
参数只有一个时,可以省略()
函数体只有一行时,可以省略 { }
函数体只有一行,并且有返回值时,如果省略了 { } ,必须省略 return
箭头函数的this:创建时的this是谁,运行的时候this就是谁
2、单文件组件
后缀名是 .vue,可以同时写结构,逻辑和样式
template标签中写结构,script标签中写逻辑,style标签中写样式
安装了 vetur 插件可以通过 <vue 生成基础结构
3、快速原型开发
环境配置:安装node.js全部使用默认的设置,一路下一步即可。打开命令行工具,输入命令node -v 以及 npm -v 检查是否安装成功。通过命令 npm install -g @vue/cli-service-global 安装一个小工具
基本使用:环境配置成功之后,在 .vue 文件所在的路径下打开终端,输入 vue serve 文件名,等待解析,然后在浏览器访问出现的地址即可。
注意:template中必须有一个根节点。script中的data写成函数,内部返回一个对象。如果要使用写好的样式,直接import即可。使用npm下载别人写好的包(模块、库),例如axios,下载命令为 npm install axios 或者缩写为 npm i axios 。在要使用的组件中,使用import导入下载的包(模板、库),例如axios,导入代码是 import axios from 'axios'
组件抽取:创建components文件夹,创建一个 .vue文件,把要抽取的代码剪切进去,并调整图片、css文件的路径,在App.vue中 使用import导入组件,在components中添加(注册)组件,页面中使用的 注册名字 可以直接当标签名使用
4、vue-cli脚手架
环境配置:保证node.js安装成功的情况下,通过命令 npm install -g @vue/cli安装一个工具,如果失败,先输入 npm install -g cnpm,成功之后再输入 cnpm install -g @vue/cli 来安装 vue-cli
创建项目:在想要创建项目的文件夹下输入 vue create 项目名,调整一下设置,然后回车。如果成功了,依次输入最后出现的 提示代码,稍等片刻,在浏览器输入出现的地址即可访问。
5、vue-router
管理多个组件切换关系的工具,用它可以做SPA(Single Page Application)单页面应用
安装:在项目的根目录打开终端,通过命令 npm install vue-router 下载。main.js中 导入、use一下、创建路由、挂载到Vue实例上
配置规则:通过 routes属性 配置 地址 和路由管理的组件关系。main.js中 导入组件、routes属性中进行配置关系、path:设置地址 、component:设置组件、可以设置多个。
路由出口:希望匹配到的组件显示在哪里,就在哪里设置一个 router-view 标签
声明式导航:通过 router-link 标签 设置 to属性为地址,可以实现点击切换
编程式导航:组件通过 this.$router.push(地址) 实现切换
路由传参:在地址的后面写上 ?分隔,通过 key=value&key2=value 的方式添加参数,组件中通过 this.$route.query 访问对应的 key 即可获取数据
6、Element-ui
安装:在项目的根目录打开终端,通过命令 npm i element-ui 下载。main.js中 导入Element-ui、导入样式、use一下。