vuejs 单文件组件

thinkcmf(thinkphp)引用vue，解决组件引用问题

一.使用场景

1)使用thinkcmf，不使用webpack

2)直接页面里引用vue.js（一个模板页里引用一次vue）

二.需解决问题

1)在当前HTML页面(thinkcmf模板视图)引用组件

三.解决方法实例

先定义个组件 my-header   保存为一个js文件（比如header.js）

var headerTemplate = '<div> my-header HTML 代码</div>'
Vue.component('my-header', {
    template: headerTemplate,
    methods: {}
    // ...
})　　

 

当前HTML页面里引用

<script src="/themes/admin_simpleboot3/recruit/class_edit/header.js?v20180703-01"></script>

 

HTML源代码

备注：这里就没有别的标签了比如<template>标签包括在最外面是不行的

 

<div id="list1">
<my-header></my-header>
</div>

 

JS代码

<script>
new Vue(

{
el: '#list1'
}

)

</script>

 

路由组件间跳转--vue-router

还是在直接引用vue和vue-router的情况下，

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>

当前页面使用的HTML代码

 

<div id="list1">
   
    <router-link to="/foo">添加分类</router-link>
    <router-link to="/bar">添加分类2</router-link>
    <router-view></router-view>

</div>

 

 

使用路由跳转组件代码（JS代码都写在<script>标签里）

 

 

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
    routes // (缩写) 相当于 routes: routes
})

const app = new Vue({
    router
}).$mount('#list1')

实际效果图，开始默认是没有选中状态的

 

 

 

vue axios 发送请求

用script的方式引入vue的情况，怎么impor其他的.vue文件作为组件使用？

 

 

单文件组件 官方文档

https://cn.vuejs.org/v2/guide/single-file-components.html

vue组件的3种书写形式