插槽指令

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>插槽指令</title>

    <style>

        body {

            font-size: 30px;

        }

        li:hover {

            color: orange;

            cursor: pointer;

        }

        .del:hover {

            color: red;

        }

    </style>

</head>

<body>

    <div id="app">

        <p>

            <input type="text" v-model="info">

            <button @click="add_msg">留言</button>

            <ul>

                <msg-tag :msg="msg" v-for="(msg, i) in msgs" :key="msg">

                    <!--template通过v-slot绑定子组件内部slot插槽标签的name属性值-->

                    <template v-slot:del_btn>

                        <span @click="del_fn(i)" class="del">x</span>

                    </template>

                </msg-tag>

            </ul>

        </p>

    </div>

</body>

<script src="js/vue.js"></script>

<script>

    let msgTag = {

        props: ['msg'],

        template: `

        <li>

			<!--slot标签是在子组件中占位，父组件模板中可以通过name名字来填充-->

            <slot name="del_btn"></slot>

            <span>{{ msg }}</span>

        </li>

        `,

    };

    new Vue({

        el: '#app',

        components: {

            msgTag

        },

        data: {

            info: '',

            msgs: JSON.parse(sessionStorage.msgs || '[]'),

        },

        methods: {

            add_msg() {

                let info = this.info;

                if (info) {

                    this.msgs.unshift(this.info);

                    this.info = '';

                    sessionStorage.msgs = JSON.stringify(this.msgs);

                }

            },

            del_fn(index) {

                console.log(index);

                this.msgs.splice(index, 1);

                sessionStorage.msgs = JSON.stringify(this.msgs);

            }

        }

    });

</script>

</html>

环境

1）安装node：官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/

2）安装cnpm

>:npm install -g cnpm --registry=https://registry.npm.taobao.org

3）安装脚手架

>:cnpm install -g @vue/cli

4）清空缓存处理(如果第2、3补出问题可以执行该条命令)

>:npm cache clean --force

创建项目

项目目录介绍

|vue-proj

|	|node_modules  项目依赖

|	|public

|	|	| 图标、单页面.html

|	|src

|	|	|assets  静态文件(img、css、js)

|	|	|components	 小组件

|	|	|views  页面组件

|	|	|App.vue  根组件

|	|	|main.js  主脚本文件

|	|	|router.js  安装vue-router插件的脚本文件 - 配置路由的

|	|	|store.js  安装vuex插件的脚本文件 - 全局仓库 - 数据共享

|	|配置文件们

|	|README.md  关键命令说明

main.js

// import 别名 from '文件(后缀可以省略)'

import Vue from 'vue'

// import App from './App.vue'

import App from './App'  // 导入时可以省略后缀

import router from './router'  // .代表相对路径的当前路径

import store from '@/store.js'  // @表示src绝对路径

Vue.config.productionTip = false;

// new Vue({

//   router,

//   store,

//   render: h => h(App)

// }).$mount('#app');

new Vue({

    el: '#app',

    router: router,

    store,

    // render: (fn) => {

    //     return fn(App)

    // }

    render (fn) {  // 读取组件渲染给挂载点el

        return fn(App)

    }

});

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

<template>

    <!--组件有且只有一个根标签-->

    <div id="app">

        <h1 @click="btnClick">{{ title }}</h1>

    </div>

</template>

<script>

    // 组件内部导出，其它文件才能import导入该组件

    export default {

        name: "App",

        data() {

            return {

                title: '主页'

            }

        },

        methods: {

            btnClick() {

                console.log(this.title)

            }

        }

    }

</script>

<!--scoped样式组件局部化-->

<style scoped>

    h1 {

        color: red;

    }

</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. Python入门6 —— 流程控制 - if判断

    代码块: 1.代码块指的是同一级别的代码,在python中用缩进相同的空格数(除了顶级代码块无任何缩进之外,其余代码块都是在原有的基础上缩进4个空格)来标识同一级的代码块 2.同一级别的代码块会按照自 ...

  2. Linux - Shell - diff

    概述 linux diff 命令 背景 一个 比较文本差异 的工具 老实说, 之前 git/gitlab 上比较代码差异, 我是有点懵逼的 diff 命令, 可以作为理解这些东西的基础 diff 命令 ...

  3. 小匠第二周期打卡笔记-Task04

    一.机器翻译及相关技术 机器翻译(MT):将一段文本从一种语言自动翻译为另一种语言,用神经网络解决这个问题通常称为神经网络翻译(NMT). 主要特征:输出是单词序列而不是单个单词.输出序列的长度可能与 ...

  4. [ZJOI2014] 力 - 多项式乘法 FFT

    题意:给定 \({q_i}\),求 \[E_i = \sum_{i<j}{\frac{q_j}{(j-i)^2}} - \sum_{i>j}{\frac{q_j}{(j-i)^2}}\] ...

  5. Jquery消息提示插件toastr

    toastr是一个基于jQuery简单.漂亮的消息提示插件,使用简单.方便,可以根据设置的超时时间自动消失. 1.使用很简单,首选引入toastr的js.css文件 <script src=&q ...

  6. centost redhat 卸载rpm以及yum install 的正确姿势

    先看yum  install 的卸载: 第一列为我们要的包名: 那么要移除必须使用 yum list |grep  collectd | awk '{print $1}' |xargs  yum  r ...

  7. windows下划分逻辑分区

    运行命令窗口后,我们输入命令"diskpart"回车! 然后我们在DISKPART>后面输入select disk 0 选择我们的硬盘,然后回车!当然如果你电脑上有好几块硬盘 ...

  8. Java连载83-单向链表、双向链表、collections常用方法

    一.单向链表 1.单向链表:每个元素都称为节点(Entry),每个节点都由两部分组成 2.单向链表的注意点: (1)单向链表每一个节点在内存中存储上在空间位置上是无规律的: (2)为什么单向链表的查询 ...

  9. 2.7.5 元素定位（主推xpath、cssSelector） ❀❀❀

    定位方式选择: 1. 当页面元素有id属性时,最好尽量用id来定位.但由于现实项目中很多程序员其实写的代码并不规范,会缺少很多标准属性,这时就只有选择其他定位方法. 2. xpath很强悍,但定位性能 ...

  10. js/jquery加入的select value显示不正确问题

    最近有需求,通过js添加select到表格中,虽然通过append加入的代码中select的value为2 但是实际显示出来的结果不对,百度之后没有找到答案,自己想了个办法 var selects = ...