1、v-for 里要加 v-bind:key="item.id" ,不加也能正常运行,但是会有警告
注意:不能使用index当唯一,index索引永远不会改变
区别:改变`数据`和`dom`节点
`动态绑定是为了改变为数字类型 等于一个唯一id 或者其它字符:key="item.id"`
//实例
v-form="item in todos" v-bind:key="item.id"
路由:
- 路由跳转: 编程式导航(如何适应javascript 进行路由跳转) this.$router.push('路由')
- 动态路由(相同规则的路径都匹配) 参数 :
动态路径`参数` 以冒号开头
{ path: '/user/:id', component: User }
获取动态路由的`参数`----
$route.params.id
打包命令:
npm run buid
1 `打包完成之后,会有一个dist文件,都是压缩后的文件夹`
2 `检查:是否都运行`
安装: npm i -g serve
启动服务:serve -s dist
检测版本:serve --version
是一个命令行静态服务器,很块就能打开(通过)
3 压缩一下 `交给运维`
路由懒加载
加载组件路由的方式两种方式
//将所有路由组件打包到一起,初始的时候,一起加载
路由加载 import home from './home.vue'
//将不同的路由组件打包不同的资源文件,看哪里加载哪里
路由懒加载:const home = () => import('./home')
export default new VueRouter({
{component:()=> import('路径')}
})
Vue项目实战PC端
技术栈:
- vue.js vue搭建脚手架
- vue-router 路由
- element 饿了吗组件
- axios 后端交互
- Vuex //会讲一些简单的用法,之后补充
- vue CIL 脚手架
- echarts 可视图
- lodash
- nprogrrss 进度条
- ouil
语法样式:
- 代码风格统一,看是用的哪个具体看官网文档
- 例如代码风格官网有:
JavaScript Standard Style
、Rules
校验方式:
- 每当代码文件保存的时候进行格式校验 --下载的时候选择这两个
line on save
lint and fix on commt
总结:
代码风格:Rules
项目的使用的技术需要安装的:
初始化 npm init -y
安装 npm install -g @vue/cli
创建文件 vue create hello
切换文件 cd hello
启动 npm run serve
安装 npm i vue
安装 npm i bootstrap
安装 npm i vue-router
安装 npm i axios
安装 npm i element-ui