Day02-WebStorm与Vue初识

WebStorm初识

路由的使用(单页面应用程序SPA)

后端路由：对普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源

前端路由：对于单页面应用程序来说，主要通过URL中的hash（#号）来实现不同页面间的切换

WebStorm快捷键

快捷键	说明
Ctrl+alt+L	格式代码
tab	代码导入
alt+enter	快捷导入
@/	表示从src文件夹下查找
ctrl+D	复制代码
ctrl+shift+Y	翻译
ctrl+alt+/ ctrl+alt+L	格式化代码
ctrl+alt+引号	自动起名字
ctrl+alt+；	acejump自动跳转

vue文件内的属性说明

属性	说明
template	标签里面只能有一个根标签
lang	声明的css预处理语言
scoped	样式隔离，给类名加上唯一标识

启动项目npm run sever

写项目流程：

运行项目流程：

• 右键在集成终端显示
• cd …/返回上一级，找到要运行的文件
• npm run serve 在package.josn文件中scripts中的serve用来启动项目
• 点击生成的local和network网址可以在本地和同局域网下打开项目页面
• src-router-index.js中有个rotes路由属性，设置了页面打开的网址
• 在src-views-App.vue中使用<router-link 设置了网站标签名，to属性中必须和src-router-index.js相对应 router-link to='跳转的链接’
• 在views中创建驼峰命名的vue文件，选择option.aip

使用路由的步骤

1. 引入路由 在index.js中import VueRouter from ‘vue-router’
2. 创建路由实例 在index.js中const router = new VueRouter(
3. 创建映射关系—数组里面是路由对象，对象里面有path：路由路径，name：名字，component：路由组件 在index.js中的routes变量中component: HomeView
4. 将映射关系挂载到路由上面 就是在实例中写上routes
5. 在App.vue中预留展示区域标签

vue的基础使用

v-for和:Key

v-for必须搭配key属性使用：

要求：必须是数字或者字符串, 必须是唯一值

作用：提高重排效率 就地复用 （diff算法）

<!--    遍历数组-->
    <div v-for="item in list" :key="item">{{ item }}</div>
    <!--    遍历对象-->
    <div v-for="(value,key,index) in obj" :key="index">
      {{ value }}==={{ key }}==={{ index }}
    </div>
    <!--    遍历数组对象-->
    <div v-for="item in list1" :key="item">
      {{ item.title }}
    </div>

v-if和v-show

相同点：显示和隐藏元素

不同点：v-if删除DOM元素，v-show是通过display：none,进行隐藏。

应用场景：只修改一次的时候可以使用v-if，频繁切换的时候可以使用v-show

 <div>hhh</div>
    <div v-if="flag">1</div>
    <div v-show="flag">2</div>
    <div v-if="!flag">3</div>
    <div v-else>4</div>
    <!--    <div v-if="flag"></div>-->
    <!--    <div v-else-if="!flag"></div>-->
    <!--    <div v-else="flag"></div>-->