vue3中在setup中并没有this,所以路由跳转和传参的方式都要有所改变1.路由跳转1.1 引入import { useRouter } from ‘vue-router‘1.2在setup中创建路由对象 ,语法以前vue2类似,这里携带id的路由参数setup(){ const router = useRouter(); function goSeekHelpDetail (){ router.push({ name:‘taskSeekHelpDetail‘, query:{ id: ‘1‘ } }) }; return{ } }2.这里获取路...
retive的错误用法<template><div>司藤的信息==>{{ objInfo }}<button @click="handerHttpServe">获取远端的值</button></div>
</template>
<script>
import { reactive } from ‘@vue/reactivity‘
export default {setup () {let objInfo=reactive({ })function handerHttpServe(){setTimeout(()=>{objInfo={name:‘司藤‘,sex:‘女‘,}},400)}return {objInfo,handerHttpServe}}
}
</script>
为什么无法更新视图呢??我们都知道...
Test1.vue<template><div class="test1"><h1>This is a test1 page</h1><Test1Top :add-person="addPerson"/><Test1Center :persons="persons":del-person="delPersonWithIndex":selected-all-persons="selectedAllPerson"/><Test1Bottom :persons="persons":del-checked-persons="delCheckedPersons"/></div></template><script>// @ is an alias to /srcimport Test1Top from ‘@/components/Test1Top.vue‘;
import Test1Center...
刚开始我用vue create hello-world 命令新建项目然后用向下箭头选中Manually select features配置项,最后点击Enter,没起作用,项目还是按照默认的配置default(babel,eslint)走;解决方法:按官网提示的 使用winpty vue.cmd create hello-world 命令创建项目,向下箭头选中Manually select features配置项,最后点击Enter会弹出可配置项。官网提示:如果你在 Windows 上通过 minTTY 使用 Git Bash,交互提示符并不工作。你必须...
非父子组件的通信Provide和InjectProvide和Inject基本使用Provide和Inject函数的写法处理响应式数据A pp.vue<template><div><home></home><button @click="addName">+name</button></div>
</template><script>import Home from "./Home.vue";import { computed } from "vue";export default {components: {Home,},// 为了使用this。,写成函数provide() {return {name: "why",age: 18,// this.names.length:一次性赋值,不会改变/...
借鉴博客:https://www.jianshu.com/p/6307c568832d/https://www.cnblogs.com/KenFine/p/10850386.html 项目创建好后,如下:(注意:vue3.0以后创建的目录没有config文件夹了) ==========下面来配置一下路由vue-router=====================1、安装命令:$ cnpm i vue-router -S 2、初始化一下,在项目中使用路由: 2.1、在项目的src目录下,新建一个router目录,在新建的router目录下新建一个index.js文件,如下: ...
报错出现场景本人使用的是vue 3.x UI使用的是element-plus ,开发环境不会报错,打包后 报错排查后发现都是el-table-column 组件 报错 导致虚拟dom 进行diff算法是报错错误分析<el-table-column prop="typeId" align="center" label="类型"><template #default="scope"><div>{{remarkTypeList.filter(v => v.id == scope.row.typeId)[0]?.name // 数据一开始,这里的下标[0]undefined }}</div></template>
</el-table-column><e...
什么是 DOM?如果我们把这个 HTML 加载到浏览器中,浏览器创建这些节点,用来显示网页。所以这个HTML映射到一系列DOM节点,然后我们可以使用JavaScript进行操作。例如:let item = document.getElementByTagName(‘h1‘)[0]
item.textContent = "New Heading"
VDOM网页可以有很多DOM节点,这意味着DOM树可以有数千个节点。这就是为什么我们有像Vue这样的框架,帮我们干这些重活儿,并进行大量的JavaScript调用。然而,搜索和更新数...
基本写法(写的有点糙细节即知识点有时间再完善一下)写法基本跟vue2.0差不多 理解就是多了个 setup这里封装了一个Menu 进行演示 setup 内部使用 vue-routersetup 希望正确的函数式编程 所以内部this指向不在是组件实例 而是undefined所以 setup 内部 vue-router 的正确使用 如下图所示 vuex同理 (非setup内部 this指向实例 依然可以直接使用)useRoute 相当于返回 $routeuseRouter 相当于返回 $router axios 的封装以及挂载值得注...
1.vue2的响应式3和2的响应式原理不同,既然3修改了实现响应式的方法,那2的响应式的肯定是有缺陷的。所以需要先了解一下2的响应式:Vue2官方网站对响应式的解释主要的思想在于:2的响应式主要实现由Object.defineProperty实现,当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的 property,并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Vue无法检测property的添加或...
vue3.0源码组织方式的变化采用ts重写独立的功能模块提取到单独的包中90%的api兼容Vue2.xComposition API组合api解决vue2.x options api 开发大型项目不好拆分和重用的问题性能提升重写响应式重写虚拟dom提升两到三倍Vite不需要打包直接运行项目源码组织方式源码采用typescript重写使用monorepo管理项目结构
每个模块都可以单独发布测试使用packages 结构packages
│ compiler-core ------ 与平台无关的编译器
│ compiler-do...
let ok = ref(true)watchEffect( onInvalidate => {// 代码一console.log(‘执行一些代码‘, ok.value) console.log(‘执行更多的代码‘); // 代码二 onInvalidate(()=>{ console.log(‘除了在初始运行时不被调用,我总是在【执行一些代码】之前被执行(调用)‘); }) })1、watchEffect参数的定义, 一层一层的,每一层都是一个函数指针。C/C++watchEffect(fn1); fn1(fn2);fn2(fn3);onInvalidate 就是 fn2;2、fn1首次执行时,on...
Options API的弊端大组件的逻辑分散认识Composition APIsetup函数的参数setup函数的返回值setup不可以使用thisApp.vue<template><div><home message="hahahaha" ></home></div>
</template><script>import Home from "./Home.vue";export default {components: {Home,},};
</script><style scoped></style>
02_setup的参数.vue<template><div><h3>Home Page</h3><h3>{{ message }}</h3><h2>{{ title }}</h2><h2>当前计数: {{ coun...
下载 ui库yarn add ant-design-vue
默认是全局引入,打包后体积很大,
非常影响首屏加载速度,
按需加载下载按需加载的插件;推荐使用cnpm
cnpm install babel-plugin-import --save-dev 下载在开发环境中
在项目的根目录下创建 babel.config.jsmodule.exports = {presets: [‘@vue/cli-plugin-babel/preset‘],plugins: [["import", { libraryName: "ant-design-vue",libraryDirectory: "es",style: true, // `style: true` 会加...
新建 bus.jsimport mitt from ‘mitt‘export default new mitt() 发送值的页面import emitter from ‘../utils/eventBus.js‘emitter.emit(‘form‘, form) 接收值的页面import emitter from ‘../utils/eventBus.js‘emitter.on(‘form‘, e =>{ console.log(e,‘==‘) }) 原文:https://www.cnblogs.com/renzhidong/p/15029557.html