setup基本用法

首先setup自动执行的

可以把某一功能的数据，函数都放在里面，但是中间一定不要加逗号或者分号，否则就会报错

import { ref } from 'vue'
export default {
  setup() {
  	const isShow1 = ref(true)
	const isShow2 = ref(false)

	function btn() {
    	isShow1.value = !isShow1.value
    	isShow2.value = !isShow2.value
	}
      
    return {
      isShow1,
      isShow2,
      btn
    }
  }
}

ref，toref，torefs

ref的本质上拷贝一份原数据，脱离了与原数据的交互
ref函数将对象中的属性变成响应式数据，修改响应式数据不会影响到原设计，但是会更新视图层
toRef的本质是引用，修改响应式数据会影响到原数据，但是不会更新视图层
toRef使用场景：只想让数据在js逻辑层进行更新，但是不想在页面上更新
toRefs和toRef差不多，但是它可以批量设置多个数据为响应式数据
toRefs使用场景：如果有很多对象，可以省略对象名，直接用第二层数据即可

import {toRef} from 'vue'
export default({
	setup() {
		const obj = {name:'花花'，age：817}
		const res = toRef(obj,'name')
		function btn() {
			res.value='huahua'
			console.log(obj)
		}
	}
})

<template>
    <h1>name</h1>
	<h1>age</h1>
	<h1>a</h1>
	<h1>d.e</h1>
</template>
<script>
import {toRefs} from 'vue'
export default({
	setup() {
		const obj = {name:'花花',
                     age:817,
                     a:1,
                     b:2,
                     c:3,
                     d:{e:'90'}
                    }
		const news = reactive(obj)
		function btn() {
			res.value='huahua'
			console.log(obj)
		}
        return {...toRefs(news)}
	}
})
</script>

vue3渲染markdown

way one

使用markdownIt

安装

npm install markdown-it --save

使用

<template>
  <h1>vue中markdown转html</h1>
  <textarea type="text" cols="30" rows="10" v-model="content"></textarea>
  <p>{{ content }}</p>
  <p>{{ markdown }}</p> //转成html后的
</template>

<script>
import MarkdownIt from "markdown-it"; //引入markdown-it
export default {
  computed: {
    markdown() { //使用markdown-it
      const md = new MarkdownIt();  
      const result = md.render(this.content);
      return result; //返回使用结果
    },
  },
  data() {
    return {
      content: "",
    };
  },
};
</script>

<style>
</style>

效果

后面再加样式即可，但是这个markdown是手写输入的，如果有导入md文件的需求，就不是很方便，这个时候我们来看看方法二。

way two

参考文章：https://www.jianshu.com/p/ddaa84604f2a

安装依赖

npm i vue-loader vue-template-compiler -D

npm i vue-markdown-loader -D

ps: 如果出现了dismatch错误，就是vue-loader版本太高了，可以适当降级

配置vue.config.js

module.exports = {
  chainWebpack: config => {
    config.module.rule('md')
      .test(/\.md/)
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('vue-markdown-loader')
      .loader('vue-markdown-loader/lib/markdown-compiler')
      .options({
        raw: true
      })
  }
}

使用

<template>
  <div>
    <markdown></markdown>
  </div>
</template>

<script>
import markdown from '/README.md'
export default {
  components: {
    markdown
  }
}
</script>

增加样式

强烈推荐

npm install github-markdown-css

也可以再自己微调一些

微调格式：

.markdown-body {
   padding: 20px;
   min-width: 200px;
   max-width: 900px;
   font-size: 12px;
   h2 {
      font-size: 18px;
      margin: 1em 0 15px;
      padding-top: 0.8em;
      padding-bottom: 0.8em;
   }
   h3 {
      font-size: 14px;
      margin: 22px 0 16px;
   }
}

效果

如果md不是本地路径，而是url，这时需要用require。待续。。。

vue3中使用resetFields

因为element-ui中只有ts用法，在 Vue 2.x 中用实例上的 $refs 属性获取模版元素中 ref 属性标记 DOM 或组件信息，但是在vue3中不能使用this来获取到ref，所以可以参考以下方法

使用unref()

如果参数是一个 ref 则返回它的 value，否则返回参数本身。

<el-form
        ref="addFormRef"
        :model="addForm"
        status-icon
        :rules="addFormRules"
        label-width="70px"
      >
        <el-form-item label="学号" prop="stuStuId">
          <el-input
            v-model="addForm.stuStuId"
            type="text"
            width="70px"
            autocomplete="off"
          />
        </el-form-item>
        <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="submitForm(ruleFormRef)"
            >提交</el-button
          >
          <el-button @click="reset">重置</el-button>
        </span>
      </template>
</el-form>
<script>
import {ref, unref } from 'vue'
export default {
    //ref对象
    let addFormRef = ref()
	
     //重置表单数据
    const reset = () => {
      const form = unref(addFormRef)
      form.resetFields()
    }
    return {
      addFormRef,
      reset
    }
  }
}
</script>