Vue基础笔记3
插槽指令
<!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的更多相关文章
- vue 基础笔记
Vue01笔记 ES6模块使用和新的函数声明方式 a) Import 一定不能放在函数内, 建议放在上方 b) Export 除了声明式的以外, 尽量放在代码的下方 Import {name,age} ...
- Vue基础笔记4
路由传参 第一种 router.js { path: '/course/detail/:pk/', name: 'course-detail', component: CourseDetail } 传 ...
- Vue基础笔记2
目录 1. 如何获取Vue对象中的成员? 2. pre指定 3. for循环 4. todolist 5. 分隔符 6. computed 计算后的 7. vue的生命周期(讲解不全) 8. watc ...
- vue基础笔记
目录 Vue 渐进式 JavaScript 框架 一.走进Vue 二.Vue实例 三.生命周期钩子 四.Vue指令 五.组件 六.Vue-CLI 项目搭建 Vue 渐进式 JavaScript 框架 ...
- Vue学习笔记-Vue基础入门
此篇文章是本人在学习Vue是做的部分笔记的一个整理,内容不是很全面,希望能对阅读文章的同学有点帮助. 什么是Vue? Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式 ...
- vue 学习笔记（二）
最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...
- vue.js笔记总结
一份不错的vue.js基础笔记!!!! 第一章 Vue.js是什么? Vue(法语)同view(英语) Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且 ...
- Vue:实践学习笔记(1)——快速使用
Vue:实践学习笔记(1)——快速使用 Vue基础知识 0.引入Vue 官方地址:Vue的官方下载地址 Vue推荐博客:keepfool 在你的程序中快速引入Vue: <!-- 开发环境版本,包 ...
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
随机推荐
- Spring Boot Post、Get接收Map
原文地址:https://blog.csdn.net/java0311/article/details/81671754 Post: @RequestBody Map param Get: @Req ...
- 【Python】time库
- Cats and Fish（小猫分鱼吃吱吱吱！）(我觉得是要用贪心的样子！)
炎炎夏日,一堆
- linux做免密登录，成功分发公钥后登录主机依旧需要输入密码的问题解决
问题描述 在主机A上用ssh-keygen生成密钥对后,用ssh-copy-id命令将公钥成功copy到主机B上后,测试从A免密登录B,但是依旧需要输入主机B的密码后才能登录. 出现此错误的原因 如果 ...
- css和js处理隔行换色的问题
<html> <head> <meta charset="utf-8"> <meta name="" conten ...
- 快速排序 QuickSort (C++迭代，递归)
/* * QuickSort.h * 快速排序(将每一个元素转换为轴点元素) * Created on: 2020年2月12日 * Author: LuYonglei */ #ifndef SRC_Q ...
- Dreamoon and WiFi
Dreamoon is standing at the position 0 on a number line. Drazil is sending a list of commands throug ...
- 多数据源切换-Druid
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/qq_37279783/article/d ...
- 关于MySQL的tinyint(3)问题
mysql 中int(1)和tinyint(1)中的1只是指定显示长度,并不表示存储长度.tinyint可以存储1字节, 即unsigned 0~255(signed -127~127).显示大小不受 ...
- 励志写一篇有味道的博文------json
之前有更古老的数据交互中间键xml,但是由于比较复杂后来出现了json json :轻量级数据交换格式 json与python数据对比 json python object d ...