Vue | Vue.js 高级语法系列

JavaScript
// 在template中
<!-- 方式一 默认方法 -->
<!-- <input type="text" ref="inputRef"> -->
<!-- 方式二 封装hooks -->
<!-- <input type="text" ref="inputRef"> -->
//  在setup中

// 方式一: 默认方法 拿到 焦点  但是在很多的时候 就需要写很多
// import { onMounted, ref } from 'vue';
// const inputRef = ref()
// onMounted(()=>{
//   inputRef.value?.focus()
// })

// 方式二 封装 hooks
import useInput from './hooks/useInput'
const { inputRef } = useInput()
// 方式一跟方式二 都是 定义ref 绑定到input中 调用focus

// 封装的hooks中
import { onMounted, ref } from 'vue';
export default function useInput() {
    const inputRef = ref()
    onMounted(() => {
        inputRef.value?.focus()
    })

    return { inputRef }
}

JavaScript
// Options API中
<script>
  export default {
    directives:{
      focus:{
      // 生命周期函数(自定义指令)
        mounted(el){
          el.focus()
        }
      }
    }
  }
</script>

// 在setup当中
// 必须以 v 加 大写字母开头的自定义名称
const vFocus = {
  mounted(el) {
    el.focus()
  }
}

JavaScript
// 全局 自定义指令
app.directive('focus',{
    mounted(el) {
        el.focus()
    }
})

JavaScript
 <!-- 这里的 james 是参数 .abc.cba是修饰符  -->
<!-- 1 参数 修饰符 值 -->
<!-- <h2 v-Xiong:james.abc.cba="msg">哈哈哈</h2> -->
// ---------------------------------------
const vXiong = {
  mounted(el, bindings) {
    // console.log(bindings) // 是一个对象
    // el.textContent = 'xxx'
    el.textContent = bindings.value
  }
}

JavaScript
// 方式一 : 传入对象的情况
app.use({
    install:function(app) {
        // app.***ponent()......
        console.log("传入对象的install被执行:",app)
    }
})

JavaScript
// 方式二 : 传入函数的情况
app.use(function(app) {
    console.log("传入的函数直接被执行:",app)
})

JavaScript
export default {
    name:"xXiong",
    install(app,options) {
        console.log("插件被安装:",app,options)
        console.log(this.name)
    }
}

JavaScript
export default function(app,options) {
    console.log("插件被安装:",app,options)
}

JavaScript
// {Sting | Object | Function} tag
// 一个HTML 标签名 一个组件 一个异步组件 或 一个函数式组件
// 必须的
'div',

JavaScript
// {Object} props
// 与attribute  prop 和事件相对应的事件
// 我们会在模版中使用
//
// 可选
{},

JavaScript
// {String | Array | Object} children
// 子VNodes 使用h() 构建
// 或使用字符串获取 '文本 VNode' 或 有插槽的对象
//
// 可选
[
    'Some text ***es first',
    h('h1','A headline'),
    h(My***ponent,{someProp:'foobar'})
]

JavaScript
import { h } from 'vue';

export default {
    render() {
        // h传递3个参数  (标签名) ({ 对应的属性 })  (内容)
        // 如果 有 子标签的话 就在第三个参数里 写对象
        // 写一个计数器 案例
        return h("div", { class: "app" }, [
            h("h2", null, `当前计数:${this.counter}`),
            h("button", { onClick: this.increment }, "+1"),
            h("button", { onClick: this.decrement }, "-1"),
            // 渲染组件
            h(Home)
        ])
    }
}

JavaScript
// setup中
import { h, ref } from 'vue';
import Home from './Home.vue'

export default {
    // 在setup函数
    setup() {
        const counter = ref(0)

        const increment = () => {
            counter.value++
        }
        const decrement = () => {
            counter.value--
        }

        return () => h("div", { class: "app" }, [
            h("h2", null, `当前计数:${counter.value}`),
            h("button", { onClick: increment }, "+1"),
            h("button", { onClick: decrement }, "-1"),
            // 渲染组件
            h(Home)
        ])

    }
}

JavaScript
npm install @vue/babel-plugin-jsx -D

JavaScript
module.exports = {
    presets:['@vue/cli-plugin-babel/preset'],
    plugins:['@vue/babel-plugin-jsx']
}

JavaScript
npm install @vitejs/plugin-vue-jsx -D