插槽指令

<!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. Go生成随机数

    生成随机数 概念 伪随机数,都是根据一定的算法公式算出来的. 所在包 math/rand 生成随机数的公式需要一个种子数,一般为整数.种子数相同会导致每次启动程序是生成随机数相同,为了避免重复每次生成 ...

  2. Postman：下载安装与基本介绍

    1.下载: (1)官网APP: https://www.getpostman.com/ (即: https://app.getpostman.com/app/download/win64 ) (2)插 ...

  3. Entry小部件：

    导入tkinter import Tkinter from Tinter import * import tkinter from tinter import * 实例化Tk类 root=tkinte ...

  4. lamda表达式的两种写法

    public class Test{ public synchronized void test1(){ System.out.println("test1 start........... ...

  5. 2019牛客竞赛第六场D Move 宏观单调，部分不单调

    Move 题意 有k个体积相同的箱子,有个憨憨有固定的装箱策略,每次都只装可以装的重量中最大的东西,求箱子的最小提及 分析 看起来可以二分,但由于他的装箱策略有点蠢,所以只在宏观上满足单调性,在特别小 ...

  6. Mysql5.6基础命令

    Centos7下mysql5.6数据库的操作 Mysql如何修改密码? 1.使用mysqladmin修改,这种修改方式需要知道mysql的原始密码 修改密码后我们测试下看看能不能登录成功 怎么才能不需 ...

  7. java多线程--死锁

    1. Java中导致死锁的原因 Java中死锁最简单的情况是,一个线程T1持有锁L1并且申请获得锁L2,而另一个线程T2持有锁L2并且申请获得锁L1,因为默认的锁申请操作都是阻塞的,所以线程T1和T2 ...

  8. php多版本使用composer

    适用多版本的方法 1:下载composer.phar,官网有直接下载的链接,https://getcomposer.org/download/ 2:composer.phar 复制到项目根目录 3:p ...

  9. RTMP 协议规范(中文版)

    本文是为截至发稿时止最新 Adobe 官方公布的 RTMP 规范.本文包含 RTMP 规范的全部内容.是第一个比较全面的 RTMP 规范的中译本.由于成文时间仓促,加上作者知识面所限,翻译错误之处在所 ...

  10. Linux中 /boot 目录介绍

    转自https://blog.csdn.net/dulin201004/article/details/7396968 一./boot/目录中的文件和目录 Linux系统在本地启动时,目录/boot/ ...