vue2.0 常见功能 (v-for 配置路由 组件渲染)

v-for(循环):

v-for="(item,index) in sort" v-bind:key="item.id"

图片渲染:

created() //钩子函数

methods: //执行方法 

组件渲染:
import xxx from ' xxxxx'
export default{
  components:{
 xxx //组件名
 },
}
html部分:<组件名></组件名>

路由跳转:

配置路由:
// index.js
import Vue from 'vue'
import Router from 'vue-router'

// 导入knowshop路由
import KnowshopRouter from './KnowshopRouter'

Vue.use(Router)
export default new Router({
routes: [
...KnowshopRouter,
{
path: '/',
name: 'index',
redirect: '/twicehands',
}
]
})
建立router路由:
import Index from '@/components/twicehands/Index'
import Detail from '@/components/twicehands/Detail'
export default [
{
path: '/twicehands',
name: 'twicehands-index',
component: Index,
},
{
path: '/twicehands/detail/:id',
name: 'twicehands-detail',
component: Detail,
}

]

原文地址:https://www.cnblogs.com/httpL/p/8884607.html