Vue_插槽_自定义指令_tabbar案例

初始化建工程

vue create demo

进入demo里下载安装包

yarn add bootstrap less [email protected] axios 

.

建立 vue.config.js

module.exports = {
  devServer: {
    open: true,
    port: 8088  // 自己设置，cmd 同步显示到浏览器   yarn serve 运行
  },
  lintOnSave: false  // 脚手架自带的eslint代码检查工具 - 先关闭 
  // publicPath: './'
}

组件-插槽

Pannel.vue - 组件(直接复制)

UserSlot.vue - 使用组件(==直接复制==)

UseSlot.vue - 组件插槽使用

组件-插槽-默认内容

口诀: 夹着内容默认显示内容, 如果不给插槽slot传东西, 则使用夹着的内容在原地显示

默认内容

组件-具名插槽

Pannel.vue - 留下具名slot

UseSlot.vue使用

组件-作用域插槽

口诀:

1. 子组件, 在slot上绑定属性和子组件内的值

2. 使用组件, 传入自定义标签, 用template和v-slot="自定义变量名"

3. scope变量名自动绑定slot上所有属性和值

Pannel.vue - 定义组件, 和具名插槽, 给slot绑定属性和值

UseSlot.vue

组件-作用域插槽-使用场景

MyTable.vue - 模板(==直接复制==)

UseTable.vue - 准备数据, 传入给MyTable.vue组件里循环使用

list: [
    {
        name: "小传同学",
        age: 18,
        headImgUrl:
        "http://yun.itheima.com/Upload/./Images/20210303/603f2d2153241.jpg",
    },
    {
        name: "小黑同学",
        age: 25,
        headImgUrl:
        "http://yun.itheima.com/Upload/./Images/20210304/6040b101a18ef.jpg",
    },
    {
        name: "智慧同学",
        age: 21,
        headImgUrl:
        "http://yun.itheima.com/Upload/./Images/20210302/603e0142e535f.jpg",
    },
],

 MyTable.vue - ==正确代码==

在UseTable使用MyTable的时候, template上v-slot绑定变量, 传入img组件设置图片地址

自定义指令-注册

UseDirective.vue - 只能在当前组件.vue文件中使用

全局注册

在main.js用 Vue.directive()方法来进行注册, 以后随便哪个.vue文件里都可以直接用v-fofo指令

// 全局指令 - 到处"直接"使用
Vue.directive("gfocus", {
  inserted(el) {
    el.focus() // 触发标签的事件方法
  }
})

v-model的本质

新建src/components/Add组件, 准备实现双向数据绑定

在App.vue, 准备变量传入组件中

上午总结

App.vue

./components/UseSlot

 在  ./components/UseSlot 里面引入  ./Panel

./components/UseTable

 在  ./components/UseTable  里面引入  ./MyTable

./components/AddBtn

显示出来的图 

 

 

 

 

案例-tabbar

初始化项目

cmd命令窗口

输入下载工程

vue create tabbar-demo


cd tabbar-demo 进入下载


yarn add bootstrap less [email protected] axios


yarn serve 运行代码

建立 vue.config.js

module.exports = {
  devServer: {
    open: true,
    port: 8082
  },
  lintOnSave: false  // 脚手架自带的eslint代码检查工具 - 先关闭 
  // publicPath: './'
}

main.js

import Vue from 'vue'
import App from './App.vue'
import "bootstrap/dist/css/bootstrap.css"
import "./assets/fonts/iconfont.css"

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue

./components/MyHeader

./components/MyTabBar

./views/MyGoodsList

../components/MyTable.vue

图例显示