2-5 vue基础语法

一.vue基础语法

语法: {{msg}}
html赋值: v-html=""
绑定属性: v-bind:id=""
使用表达式: {{ok? "yes": "no"}}
文本赋值: v-text=""
指令: v-if=""
过滤器: {{msg | capitalize}}

条件渲染

v-if
v-else
v-else-if
v-show
v-cloak

vue组件

全局组件和局部组件
父子组件通讯-数据传递
Slot

 

二.路由基础介绍

1.前端路由 ==> 路由是根据不同的url地址展示不同的内容或页面
前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做, 之前是通过服务端根据url的不同返回不同的页面实现的

2.什么时候使用前端路由
在单页面应用, 大部分页面结构不变, 只改变部分内容的使用

3.前端路由有什么优点和缺点?
优点 ==> 用户体验好, 不需要每次都从服务器全部获取, 快速展现给用户

缺点 ==> 不利于SEO, 只有一张页面
使用浏览器的前进,后退键的时候会重新发送请求, 没有合理利用缓存
单页面无法记住之前滚动的位置, 无法在前进, 后退的时候记信滚动的位置

vue-router用来构建SPA

router-link当成a标签
<router-link></router-link>或者this.$router.push({path:""});
<router-view></router-view>

1.动态路由匹配
2.嵌套路由
3.编程式路由
4.命名路由和命名视图

1.动态路由匹配 (router/index.js)

import GoodsList from '@/views/GoodsList'

export default new Router({
  mode: "history",
  routes: [
    {
      path: '/goods/:goodsId/user/:name',
      name: 'HelloWorld',
      component: GoodsList
    }
  ]
})

GoodsList.vue

<template>
    <div>
        这是商品列表页面
        <span>{{$route.params.goodsId}}</span>
        <span>{{$route.params.name}}</span>
    </div>    
</template>

3.编程式路由
通过js来实现页面的路转

$router.push("name");
$router.push({path:"name"})
$router.push({path:"name?a=123"}) 或者 $router.push({path:"name", query:{a:123}})
$router.go(1);