setup(props, context):初始化变量、函数

  • ref定义变量,可以用.value属性重新赋值
  • reactive定义对象,不可重新赋值,当他的值发生改变(一般是对象中的某一个属性改变)会将有使用这个对象的组件重新渲染一遍。
  • props存储父组件传递过来的数据
  • context.emit():触发父组件绑定的函数

vue 中通过 setup() 函数来初始化变量。setup函数写在 export default {} 中,可以用 setup = () => {} 即箭头函数的写法,也可以直接写作 setup()
例子:

export default {
name: 'UserProfileView',
components: {
    ContentBase,
    UserProfileInfo,
    UserProfilePosts
},
setup() {
    const user = reactive({
        id: 1,
        username: "heky",
        lastName: "he",
        firstName: "ky",
        followerCount: false,
    });

    return {
        user,
    }
}
}

这个例子中定义了一个user的变量对象,里面放着5各变量,之后将要用到的变量对象 user return出去

之后可以在子组件的标签中用 v-bind: 来绑定
例如:

<UserProfileInfo v-bind:user="user"/>

v-bind: 也可以省略为 : ,例如:

<UserProfileInfo :user="user"/>

等号后面的冒号可以传入一个表达式,这里将 user 传入

之后要在组件中使用,需要将用到的组件放到 export default{}propsprops 是一个对象。
例如:

export default {
    name: "UserProfileInfo",
    props: {
        user: {
            type: Object,
            required: true,
        },
    }
}

其中user也是作为一个对象来写,有两个值,一个是类型,另外一个是是否需要。
这样写完之后就可以在 template 中用了,使用时用两个大括号括起来 {{}}
例如:

<div class="username">{{ user.username }}</div>
<div class="fans">fans: {{ user.followerCount }}</div>

如果想作为属性的值进行使用,可以在对应的属性前面加上 :
例如:

<img :src="user.photo" alt="" class="img-fluid" >

这里的 user.photo 是一个变量而不是当作一个字符串,作用于src这个属性,所以src前面加上一个冒号( :v-bind: 的简写)

如果需要对变量进行计算然后实现动态变化,需要在组件中设置一个新的变量,以及用到vue中的 computed 函数
例如:

import { computed } from 'vue';

export default {
    name: "UserProfileInfo",
    props: {
        user: {
            type: Object,
            required: true,
        },
    },
    setup(props) {
        let fullname = computed(() => props.user.firstName + ' ' + props.user.lastName);
        return {
            fullname
        }
    }
}

这里setup函数传入一个变量props表示当前组件的props,然后在里面定义了一个新的变量 fullname 调用 computed 函数动态计算变量的值,注意 computed 函数接收一个函数,之后也是一样将要用到的变量return出去就可以了。
在template中使用:

<div class="username">{{ fullname }}</div>

使用 v-model 属性获取html标签内的内容示例:

<template>
    <textarea v-model="content" class="form-control" id="edit-post" rows="3"></textarea>
</template>

<script>
import { ref } from 'vue';
export default {
    name: "UserProfileWrite",
    setup() {
        let content = ref("");

        return {
            content,
        }
    }
}
</script>

变量对象可以用 reactive ,单个变量可以使用 ref 。示例中使用 v-model 将textarea中的内容绑定到content这个变量中,之后要取得这个值可以用 content.value 来取。之后如果要修改这个值也可以直接对 content.value 进行赋值。

注:其实用 reactive 也是可以赋值的,不过是对对象中的属性赋值,一般如果变量是对象就用 reactive 否则可能就用 ref

安装

安装 @vue/cli-plugin-router 插件

使用

注册路由

router 文件夹中的 index.js 中将路由添加到 routes 数组中例如:

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/login',
    name: 'login',
    component: LoginView
  },
  {
    path: '/register',
    name: 'register',
    component: RegisterView
  },
  {
    path: '/404',
    name: '404',
    component: NotFoundView
  },
]

注意:有使用到的组件要import进index.js中

重定向示例:

{
path: '/:catchAll(.*)',
redirect: '/404/',
}

:catchAll() 是关键字,括号里面接收正则表达式,这里的 . 表示任意字符, 表示任意多个 .* ,
redirect 表示重定向的链接。

使用参数的示例:

{
    path: '/userprofile/:userId/',
    name: 'userprofile',
    component: UserProflieView
}

这里 userId 是一个变量,在要当作变量的路由前面加上 : 即可。

在组件中使用路由参数,需要使用 useRoute 组件
示例:

import { useRoute } from 'vue-router';
export default {
name: 'UserProfileView',
components: {
    ContentBase,
},
setup() {
    const route = useRoute();
    console.log(route.params.userId);
}

对应的跳转:

<router-link class="nav-link" :to="{name: 'userprofile', params: {userId : 2,}}">用户动态</router-link>

需要在params对象中添加对应的参数。

跳转

<router-link class="navbar-brand" :to="{name: 'home', params: {}}">Myspace</router-link>

router-link 是vue中的一个组件,使用 : + 名称绑定属性,这里绑定一个to属性表示要跳转的组件,里面是一个对象,对象一个key是name,表示组件的名称

在函数中使用跳转示例:

import router from '@/router/index'
success() {
  router.push({name: 'userlist'});
},

使用 routerpush api 里面传的参数是一个对象,和 router-link:to 是一样的。

组件中路由的使用

使用 <router-view /> 表示这个标签通过链接的不同渲染不同的组件。
一般放在 App.vue 中, 例如:

<template>
  <NavBar />
  <router-view />
</template>

这里 NavBar 一直保持不变, router-view 根据链接的不同渲染不同页面。
一般链接中可能会带有参数,例如 /userprofile/65/userprofile/32 ,如果想要严格判断完整的路径可以给 router-view 加一个属性 :key="$route.fullPath"
例如:

<template>
  <NavBar />
  <router-view :key="$route.fullPath"/>
</template>

如果不加的话,/userprofile/65/userprofile/32 这两个页面可能显示一样的内容。(比如先访问 /userprofile/65 后访问 /userprofile/32 ,可能页面还是 /userprofile/65 的内容而不是 /userprofile/32 的内容,原因就是只匹配 userprofile 这个路径,而没有匹配后面的参数 )。

虽然退了,但是想要收鸡的心情却一直不消减,刚一直在刷论坛看到中了claw的另外一款vps,然后果断私聊,然后狠狠剁手😭。
之后打算慢慢把博客搬迁到新的vps上,然后现在博客在的这个vps就放生掉吧,(不然真的养不起那么多vps了😭

这几天claw有活动,有一个首年7刀的vps
刚好没有新加坡的节点,就上头下单了。
续费有点贵要到36刀,有点可惜,只能当年抛来用了,或者明年再看下?

每一个组件由三个部分组成分别是 template script style
其中style部分可以在头标签加上一个 scoped 字段,之后者部分的style就不会影响到其他组件
script部分需要export一个对象,这个对象有两个key,一个是name表示当前组件的名字,另外一个是components表示当前组件用到的组件。有用到的组件也同时需要在script标签中用import关键字来引入。引入之后的组件可以在template中通过标签的形式来使用。

例如:
App.vue

<template>
  <NavBar />
  <router-view/>
</template>

<script>
import NavBar from './components/NavBar.vue';
export default {
  name: "App",
  components: {
    NavBar
  }
}
</script>

<style scoped>
</style>

假如在一个组件内使用其他组件,且那个被使用的组件的标签中有其他的内容,在那个被使用的组件内可以使用 <slot></slot> 标签将传入的内容全部渲染出来
比如:
ContentBase.vue

<template>
    <div class="home">
      <div class="container">
        <div class="card">
          <div class="card-body">
            <slot></slot>
          </div>
        </div>
      </div>
    </div>   
</template>

<script>
export default {
    name: "ContentBase",
}
</script>

<style scoped>
.container {
    margin-top: 20px;
}
</style>