Vue学习之路
文章平均质量分 95
TZ丶旭哥
这个作者很懒,什么都没留下…
展开
-
day07
1.安装脚手架 npm i @vue/cli -g2.创建项目 vue create 项目名字3.自定义创建选项。原创 2024-03-14 21:54:56 · 857 阅读 · 0 评论 -
day05
文章目录自定义指令全局注册(在main.js中)局部注册插槽默认插槽后备内容具名插槽作用域插槽路由介绍自定义指令全局注册(在main.js中)import Vue from 'vue'import App from './App.vue'Vue.config.productionTip = false// 1. 全局注册指令Vue.directive('focus', { // inserted 会在 指令所在的元素,被插入到页面中时触发 inserted (el) { /原创 2024-01-23 09:41:33 · 1015 阅读 · 0 评论 -
day04
文章目录组件三大部分组件通信父组件向子组件传值子组件向父组件传值props单向数据流综合案例非父子通信指令进阶v-modelsync修饰符ref 和 $refs$nextTick组件三大部分1.style中的样式 默认是作用到全局的2.加上scoped可以让样式变成局部样式scoped原理:1.给当前组件模板的所有元素,都会添加上一个自定义属性data-v-hash值 用于区分开不通的组件2.css选择器后面,被自动处理,添加上了属性选择器 div[data-v-hash值]一个组件原创 2024-01-22 16:31:01 · 362 阅读 · 0 评论 -
day03
文章目录生命周期案例脚手架Vue CLI普通组件的注册使用(命名:大驼峰、使用:<组件名></组件名>)局部注册(只能在注册的组件内使用)全局注册(所有组件内都能使用)案例生命周期created() 可以向后台请求数据 mounted() 可以操作dom 比方说获取输入框焦点<div id="app"> <h3>{{ title }}</h3> <div> <button原创 2024-01-22 14:46:58 · 778 阅读 · 0 评论 -
day02
文章目录指令@keyup.enter 回车v-model修饰符 .trim .numberv-bind对样式class的控制v-bind对样式style的控制tab栏的active效果进度条v-model应用于其他表单元素计算属性上面知识的小案例watch侦听器简单写法完整写法综合案例指令@keyup.enter 回车<div id="app"> <h3>@keyup.enter → 监听键盘回车事件</h3> <input @keyu原创 2024-01-21 18:00:29 · 940 阅读 · 0 评论 -
day01
文章目录创建Vue实例插值表达式响应式数据常见标签v-htmlv-show v-ifv-if v-else-if v-elsev-onv-bindv-forv-model综合案例创建Vue实例<!-- 创建Vue实例,初始化渲染 1. 准备容器 2. 引包(官网) — 开发版本/生产版本 3. 创建Vue实例 new Vue() 4. 指定配置项,渲染数据 1. el:指定挂载点 2. data提供数据-->原创 2024-01-14 22:04:01 · 909 阅读 · 0 评论