插槽指令

<!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. 10.3.4参数绑定 bind

    Count_if算法,类似find_if,此函数接受一对迭代器,表示一个输入范围,还接受一个谓词,会对输入范围中的每个元素执行.Count_if返回一个计数值,表示谓词有多少次为真.    使用bin ...

  2. PyCharm专业版2019.3.2激活码到期2089年！！！

    Pycharm是一款很好用的python开发工具,开发Python爬虫和Python web方面都很不错 这里我为大家提供了pycharm激活方式2089年(都支持PyCharm20 激活步骤如下: ...

  3. git 基本操作小节操作(一) init clone status add 未完，参考链接在末尾

    1 $ git init 对当前所在目录进行git 管理 在当前目录初始化新仓库 2 $ git clone <url> <position> 从url克隆一个仓库到posti ...

  4. Jarvis OJ - [XMAN]level1 - Writeup

    Jarvis OJ - [XMAN]level1 - Writeup M4x原创,转载请表明出处http://www.cnblogs.com/WangAoBo/p/7594173.html 题目: 分 ...

  5. LocalDate和LocalTime的用法介绍

    原文:LocalDate和LocalTime的用法介绍 在JAVA中,常用的处理日期和时间的类主要有Date,Calendar,而在JDK1.8中,新增了两个处理日期和时间的类,一个是LocalDat ...

  6. css 动画开关按钮

    <style> input[type="checkbox"] { display: none; } input[type="checkbox"] + ...

  7. IntelliJ IDEA 2017.3尚硅谷-----模板

    https://www.jetbrains.com/help/idea/using-live-templates.html  

  8. 【译】用 `Wasmer` 进行插件开发 1

    [译]用 Wasmer 进行插件开发 1 Using Wasmer for Plugins Part 1 译文 原文链接 https://wiredforge.com/blog/wasmer-plug ...

  9. Docker 进入正在运行的容器的4种方式

    在使用Docker创建了容器之后,如何进入该容器呢? 进入Docker容器比较常见的几种做法如下: 使用docker attach 使用SSH 使用nsenter 使用exec 一.使用docker ...

  10. 【C语言】已知三角形三边长，求三角形面积

    一. 数学基础: 已知三角形的三边,计算三角形面积,需要用到海伦公式: 即p=(a+b+c)/2 二. 算法: 输入三个边长,套用海伦公式计算面积,并输出. 可以先判断是否可以构成三角形,即任意两边之 ...