TP Facade、多应用与Vue3(三)

发布于：2022-05-14 14:09:06  栏目：技术文档

Facade

Facade类容器中的（动态）类提供了一个静态调用接口，系统已经为大部分核心类库定义了Facade，可以通过Facade来访问这些系统类，也可自己编写facade:

class MyClass extends Facade
{
    /**
     * 获取当前Facade对应类名（或者已经绑定的容器对象标识）
     */
    protected static function getFacadeClass()
    {
        return 'myclass';
    }
}

多应用

需要执行命令composer require topthink/think-multi-app

Vue3

安装nodejs安装vue

// npm
npm install -g @vue/cli @vue/cli-service-global @vue/cli-service

# 1、创建一个项目
vue create vuecli
# 2、选择：用vue2，vue3，手动配置。 vue2，vue3除了基本语法， 还有下面2个功能
# 2.1、babel 把es6的语法，转成es5的语法，可以做到兼容
# 2.2、eslint 语法检查，约束你的代码习惯
# 3、手动选择功能：Choose Vue version、Babel、CSS Pre-processors
# 4、选择版本：3.x
# 5、选择css预处理器版本：dart-sass
# 6、配置文件：In package.json
# 7、是否保持此项目配置：都行，保存的话，起个名字
App.vue内代码结构：template里面只能有一个根节点
<template></template> 对应 html 代码
<script></script> 对应 js 代码
<style></style> 对应 css 代

练习指令

<template>
<div>
  <div v-once>HelloWorld{{zolo}}</div>
  <div>{{ test() }}</div>
  <input type="text" v-model="zolo">
  <div v-text="zolo"></div>
  <div v-html="html"></div>
  <div>{{html}}</div>
  <div v-pre>{{html}}</div>
  <a v-bind:href="url">v-bind-url1</a>
  <a href="https://www.baidu.com">原生url2</a>
  <hr>
   <a :href="url" :title="title">v-bind</a>
   <a :href="url" :style="style">v-bind</a>
</div>
</template>
<script>
export default{
  data(){
    return{
      zolo:'佐罗',
      html:"<h2>佐罗</h2>",
      url:"https://www.baidu.com",
      title:'zolo',
      style:'color:green',
    }
  },
  methods:{
    test(){
      return '123';
    },
    fun1(){
      return '456';
    }
  }
}
</script>
<style>
</style>

相关推荐