插槽指令

<!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. Andre Weil的一生

    在20世纪的数学家中,Andre Weil(1906-1998)以其渊博的学识.坎坷的经历和超凡的人格魅力成为引人注目的一员. 他无疑是20世纪最伟大的数学家之一.国际数学家大会把数学划分为19个大的 ...

  2. java基础(十三)之接口

    接口 什么是接口? 生活中也有很多的接口,比如USB接口.定义了接口就是定义了调用对象的标准. 接口基本语法 1.使用interface定义:2.接口当中的方法都是抽象方法:因为抽象函数不能生成对象, ...

  3. 【转载】Hadoop生态上几个技术的关系与区别：hive、pig、hbase 关系与区别

    转自:http://www.linuxidc.com/Linux/2014-03/98978.htm Pig 一种操作hadoop的轻量级脚本语言,最初又雅虎公司推出,不过现在正在走下坡路了.当初雅虎 ...

  4. 使用VSCode的Remote-SSH连接Linux进行远程开发

    安装Remote-SSH并配置 首先打开你的VSCode,找到Extensions,搜索Remote,下载Remote-Developoment插件,会自动安装其他的Remote插件,其中会包含Rem ...

  5. 图像变换 - 霍夫线变换(cvHoughLines2)

    霍夫变换是一种在图像中寻找直线.圆及其他简单形状的方法,霍夫线变换是利用Hough变换在二值图像中找到直线. 利用CV_HOUGH_PROBABILISTIC,对应PPHT(累计概率霍夫变换)?这个算 ...

  6. argmax( )

    argmax是一种函数,是对函数求参数(集合)的函数. 当我们有另一个函数y=f(x)时,若有结果x0= argmax(f(x)),则表示当函数f(x)取x=x0的时候,得到f(x)取值范围的最大值: ...

  7. backward的gradient参数的作用

    backward的gradient参数的作用 待办 https://zhuanlan.zhihu.com/p/29904755 https://zhuanlan.zhihu.com/p/2992309 ...

  8. 1025 PAT Ranking (25分)

    1025 PAT Ranking (25分) 1. 题目 2. 思路 设置结构体, 先对每一个local排序,再整合后排序 3. 注意点 整体排序时注意如果分数相同的情况下还要按照编号排序 4. 代码 ...

  9. Django_连接MySQL

    1. 在Settings中修改 2. 创建数据库 3. 连接mysql 4. pymysql 4.1 安装pymysql 在项目的init文件中添加 Django2.2 不需要伪装

  10. js变量提升的坑

    关于js变量提升 变量提升 在js函数内部是可以直接修改全局的变量的,个人感觉是不好的设计, 但是确实存在这个概念 原理: 先查看有没有函数变量bb 查看形参有没有bb 查看全局有没有bb 报错, 找 ...