插槽指令

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>插槽指令</title>
  6.     <style>
  7.         body {
  8.             font-size: 30px;
  9.         }
  10.         li:hover {
  11.             color: orange;
  12.             cursor: pointer;
  13.         }
  14.         .del:hover {
  15.             color: red;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <div id="app">
  21.         <p>
  22.             <input type="text" v-model="info">
  23.             <button @click="add_msg">留言</button>
  24.             <ul>
  25.                 <msg-tag :msg="msg" v-for="(msg, i) in msgs" :key="msg">
  26.                     <!--template通过v-slot绑定子组件内部slot插槽标签的name属性值-->
  27.                     <template v-slot:del_btn>
  28.                         <span @click="del_fn(i)" class="del">x</span>
  29.                     </template>
  30.                 </msg-tag>
  31.             </ul>
  32.         </p>
  33.     </div>
  34. </body>
  35. <script src="js/vue.js"></script>
  36. <script>
  37.     let msgTag = {
  38.         props: ['msg'],
  39.         template: `
  40.         <li>
  41. 			<!--slot标签是在子组件中占位，父组件模板中可以通过name名字来填充-->
  42.             <slot name="del_btn"></slot>
  43.             <span>{{ msg }}</span>
  44.         </li>
  45.         `,
  46.     };
  47.     new Vue({
  48.         el: '#app',
  49.         components: {
  50.             msgTag
  51.         },
  52.         data: {
  53.             info: '',
  54.             msgs: JSON.parse(sessionStorage.msgs || '[]'),
  55.         },
  56.         methods: {
  57.             add_msg() {
  58.                 let info = this.info;
  59.                 if (info) {
  60.                     this.msgs.unshift(this.info);
  61.                     this.info = '';
  62.                     sessionStorage.msgs = JSON.stringify(this.msgs);
  63.                 }
  64.             },
  65.             del_fn(index) {
  66.                 console.log(index);
  67.                 this.msgs.splice(index, 1);
  68.                 sessionStorage.msgs = JSON.stringify(this.msgs);
  69.             }
  70.         }
  71.     });
  72. </script>
  73. </html>

环境

  1. 1）安装node：官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/
  3. 2）安装cnpm
  4. >:npm install -g cnpm --registry=https://registry.npm.taobao.org
  6. 3）安装脚手架
  7. >:cnpm install -g @vue/cli
  9. 4）清空缓存处理(如果第2、3补出问题可以执行该条命令)
  10. >:npm cache clean --force

创建项目

项目目录介绍

  1. |vue-proj
  2. |	|node_modules  项目依赖
  3. |	|public
  4. |	|	| 图标、单页面.html
  5. |	|src
  6. |	|	|assets  静态文件(img、css、js)
  7. |	|	|components	 小组件
  8. |	|	|views  页面组件
  9. |	|	|App.vue  根组件
  10. |	|	|main.js  主脚本文件
  11. |	|	|router.js  安装vue-router插件的脚本文件 - 配置路由的
  12. |	|	|store.js  安装vuex插件的脚本文件 - 全局仓库 - 数据共享
  13. |	|配置文件们
  14. |	|README.md  关键命令说明

main.js

  1. // import 别名 from '文件(后缀可以省略)'
  2. import Vue from 'vue'
  3. // import App from './App.vue'
  4. import App from './App'  // 导入时可以省略后缀
  5. import router from './router'  // .代表相对路径的当前路径
  6. import store from '@/store.js'  // @表示src绝对路径
  8. Vue.config.productionTip = false;
  10. // new Vue({
  11. //   router,
  12. //   store,
  13. //   render: h => h(App)
  14. // }).$mount('#app');
  16. new Vue({
  17.     el: '#app',
  18.     router: router,
  19.     store,
  20.     // render: (fn) => {
  21.     //     return fn(App)
  22.     // }
  23.     render (fn) {  // 读取组件渲染给挂载点el
  24.         return fn(App)
  25.     }
  26. });

组件 .vue 文件：模板(template) + 脚本(scpirt) + 样式(style)

  1. <template>
  2.     <!--组件有且只有一个根标签-->
  3.     <div id="app">
  4.         <h1 @click="btnClick">{{ title }}</h1>
  5.     </div>
  6. </template>
  8. <script>
  9.     // 组件内部导出，其它文件才能import导入该组件
  10.     export default {
  11.         name: "App",
  12.         data() {
  13.             return {
  14.                 title: '主页'
  15.             }
  16.         },
  17.         methods: {
  18.             btnClick() {
  19.                 console.log(this.title)
  20.             }
  21.         }
  22.     }
  23. </script>
  25. <!--scoped样式组件局部化-->
  26. <style scoped>
  27.     h1 {
  28.         color: red;
  29.     }
  30. </style>

Vue基础笔记3的更多相关文章

  1. vue 基础笔记

    Vue01笔记 ES6模块使用和新的函数声明方式 a) Import 一定不能放在函数内, 建议放在上方 b) Export 除了声明式的以外, 尽量放在代码的下方 Import {name,age} ...

  2. Vue基础笔记4

    路由传参 第一种 router.js { path: '/course/detail/:pk/', name: 'course-detail', component: CourseDetail } 传 ...

  3. Vue基础笔记2

    目录 1. 如何获取Vue对象中的成员? 2. pre指定 3. for循环 4. todolist 5. 分隔符 6. computed 计算后的 7. vue的生命周期(讲解不全) 8. watc ...

  4. vue基础笔记

    目录 Vue 渐进式 JavaScript 框架 一.走进Vue 二.Vue实例 三.生命周期钩子 四.Vue指令 五.组件 六.Vue-CLI 项目搭建 Vue 渐进式 JavaScript 框架 ...

  5. Vue学习笔记-Vue基础入门

    此篇文章是本人在学习Vue是做的部分笔记的一个整理,内容不是很全面,希望能对阅读文章的同学有点帮助. 什么是Vue? Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式 ...

  6. vue 学习笔记（二）

    最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...

  7. vue.js笔记总结

    一份不错的vue.js基础笔记!!!! 第一章 Vue.js是什么? Vue(法语)同view(英语) Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且 ...

  8. Vue:实践学习笔记(1)——快速使用

    Vue:实践学习笔记(1)——快速使用 Vue基础知识 0.引入Vue 官方地址:Vue的官方下载地址 Vue推荐博客:keepfool 在你的程序中快速引入Vue: <!-- 开发环境版本,包 ...

  9. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

随机推荐

  1. AcWing 482. 合唱队形

    #include<iostream> using namespace std ; ; int f[N],g[N]; int w[N]; int main() { int n; cin> ...

  2. 【16】LRUChache

    题目 LRU 思路 LRU 大家都不陌生,操作系统的作业做过,思路就是一旦添加或者访问某个元素,则将其的"访问属性"置零,而其他元素的访问属性统统减一,这样一来,访问属性最小的元素 ...

  3. 牛客多校第七场H Pair 数位dp理解

    Pair 题意 给出A B C,问x取值[1,A]和y取值[1,B]存在多少组pair<x,y>满足以下最小一种条件,\(x \& y >c\),\(x\) xor \(y& ...

  4. CSS技巧！鼠标经过图片抖动效果

    把代码加到style.css(模板的主css里面): /**图片抖动**/ img:hover{-webkit-animation: tada 1s .2s ease both;-moz-animat ...

  5. （转）java垃圾回收一

    转自:http://jianfulove.iteye.com/blog/1833768 一切都进入了自动化了,但是对于各种内存溢出,内存泄漏问题的出现,我们还是很有必要学习GC的.地球人都知道,Jav ...

  6. How to Create an OCM Response file to Apply a Patch in Silent Mode - opatch silent

    Windows Server 2019 打补丁时缺少Oracle Configuration Manager(OCM) 响应文件处理方式. 适用: Oracle Universal Installer ...

  7. 数据库之一、数据库简介及SQL概要

    1.数据库简介: 数据库(Database,DB)是一个长期存储在计算机内的.有组织的.有共享的.统一管理的数据集合.简单来讲就是可以放大量数据的地方.管理数据库的计算机系统称为数据库管理系统(Dat ...

  8. Python—网络通信编程之tcp非阻塞通信(socketserver)

    服务端代码 import socketserver # 定义一个类 class MyServer(socketserver.BaseRequestHandler): # 如果handle方法出现报错, ...

  9. Java-POJ1012-Joseph

    打表啦 约瑟夫环,处理时下表统一为从0开始更方便! import java.util.Scanner; public class poj1012 { public static boolean cal ...

  10. 2.7.2 元素定位：frame 内定位 driver.switch_to.frame()

    来源: http://blog.csdn.net/anniejunyan/article/details/23257327  Selenium + Webdriver 学习(五) frame下元素定位 ...