add sample

sample-vue.js / sample-vue-slot

Browse code add sample master
0 parent commit e8991fd8e24146476f85f69b29ef7832a65dc0de yhornisse authored on 11 Aug 2021

Patch

Showing 10 changed files

Ignore Space Show notes View README.md 0 → 100644
# sample slotのサンプル - slot 1つの場合 - 複数slot ![結果](https://pied-piper.net/gitbucket/sample-vue.js/sample-vue-component01/_attached/1628689826486v08fDFFW7h) --- ## Project setup ``` npm install ``` ### Compiles and hot-reloads for development ``` npm run serve ``` ### Compiles and minifies for production ``` npm run build ``` ### Run your tests ``` npm run test ``` ### Lints and fixes files ``` npm run lint ``` ### Customize configuration See [Configuration Reference](https://cli.vuejs.org/config/).

Ignore Space Show notes View

README.md 0 → 100644

Ignore Space Show notes View package.json 0 → 100644
{ "name": "sample", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.4.3", "vue": "^2.6.10" }, "devDependencies": { "@vue/cli-plugin-babel": "^4.1.0", "@vue/cli-plugin-eslint": "^4.1.0", "@vue/cli-service": "^4.1.0", "babel-eslint": "^10.0.3", "eslint": "^5.16.0", "eslint-plugin-vue": "^5.0.0", "vue-template-compiler": "^2.6.10" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "rules": {}, "parserOptions": { "parser": "babel-eslint" } }, "browserslist": [ "> 1%", "last 2 versions" ] }

Ignore Space Show notes View

package.json 0 → 100644

Ignore Space Show notes View public/favicon.ico 0 → 100644

Ignore Space Show notes View public/index.html 0 → 100644
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>sample</title> </head> <body> <noscript> <strong>We're sorry but sample doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> </body> </html>

Ignore Space Show notes View src/App.vue 0 → 100644
<template> <div id="app"> <my-title> タイトル </my-title> <table> <thead> <tr> <th>No</th> <th>name</th> <th>desc</th> </tr> </thead> <tbody> <row v-for="i in items" :key="i"> <template slot="no">{{ i.no }}</template> <template slot="name"><b>{{ i.name }}</b></template> <template slot="desc"><i>{{ i.desc }}</i></template> </row> </tbody> </table> </div> </template> <script> import Row from "./components/Row.vue"; import MyTitle from "./components/MyTitle.vue"; export default { name: "app", components: { Row, MyTitle, }, data() { return { items: [ { no: 1, name: "Taro", desc: "hoge" }, { no: 2, name: "Ken", desc: "fuga" }, { no: 3, name: "Jiro", desc: "piyo" }, ] }; } }; </script> <style> #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } table, tr, td, th { border: solid 1px #000000; border-collapse: collapse; } </style>

Ignore Space Show notes View

src/App.vue 0 → 100644

export default {
  name: "app",
  components: {
    Row,
    MyTitle,
  },
  data() {
    return {
      items: [
        {
          no: 1,
          name: "Taro",
          desc: "hoge"
        },
        {
          no: 2,
          name: "Ken",
          desc: "fuga"
        },
        {
          no: 3,
          name: "Jiro",
          desc: "piyo"
        },
      ]
    };
  }
};
</script>

Ignore Space Show notes View src/assets/logo.png 0 → 100644

Ignore Space Show notes View src/components/MyTitle.vue 0 → 100644
<template> <h1> <slot></slot> </h1> </template> <style scoped> h1 { background-color: black; color: white; } </style>

Ignore Space Show notes View src/components/Row.vue 0 → 100644
<template> <tr> <td><slot name="no"></slot></td> <td><slot name="name"></slot></td> <td><slot name="desc"></slot></td> </tr> </template>

Ignore Space Show notes View src/components/result.png 0 → 100644

Ignore Space Show notes View src/main.js 0 → 100644
import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app')

Show line notes below