vue基础语法-07day

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