插槽指令

<!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. 解决前端js、css缓存问题

    去js标签库查询jquery.i18n.properties.js这个js引用到页面上: 新建一个配置文件:用上面的那个js方法调取配置文件里的版本号给其他的js加上: 示例: <script ...

  2. C++——类与对象

    1.抽象: 是对具体对象(问题)进行概括,抽出这一类对象的公共性质并加以描述的过程. 1.1 先注意问题的本质描述,其次是实现过程和细节: 1.2 数据抽象:描述某类对象的属性或状态(对象相互区别的物 ...

  3. IntelliJ IDEA快捷键设置

      IntelliJ IDEA是java编程语言开发的集成环境,目前有很多用户喜欢使用IDEA进行相关开发,IDEA使用起来十分方便,本篇博客主要是介绍IDEA快捷键(Keymap)的设置和使用. I ...

  4. python setup.py 安装和卸载 的正确姿势

    1.install python setup.py install --record files.txt 2. uninstall 删除这些文件 cat files.txt | xargs rm -r ...

  5. dp--C - Mysterious Present

    C - Mysterious Present Peter decided to wish happy birthday to his friend from Australia and send hi ...

  6. python3爬取电影数据

    爬取电影票房数据,用于统计建模分析.目标网站为电影票房数据库(http://58921.com/alltime). 基本的爬取静态网站的技术,模拟登陆使用的是最简单的cookies.(这种模拟登陆的方 ...

  7. C++-POJ1988-Cube Stacking[数据结构][并查集]

    int find(int x){return fa[x]==x?x:fa[x]=find(fa[x]);} #include <set> #include <map> #inc ...

  8. pikaqiu练习平台（XSS（跨站脚本））

    XSS(跨站脚本)概述 Cross-Site Scripting 简称为“CSS”,为避免与前端叠成样式表的缩写"CSS"冲突,故又称XSS.一般XSS可以分为如下几种常见类型: ...

  9. [Netcat] 断线重连 自动重连

    今天想做些操作,所以想到了nc 但是nc太过于轻量级 所以 导致我没有找到他的断线重连功能 然后我就想到了windows的神器之一 vbs脚本 vbs代码如下 Dim a,b set a= WScri ...

  10. 自动化脚本-配置LVS（DR模式）

    一,获取所需配置的主机IP cat get_ip.sh #!/bin/bash #将获得到的IP地址写进IP.txt >ip.txt #将原有的hosts信息清除 >/root/.ssh/ ...