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学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
随机推荐
- C++-POJ1995-Raising Modulo Numbers[快速幂]
#include <cstdio> typedef long long ll; int quick_pow(ll a,ll b,ll mod){ ll ans=; ))ans=(ans*a ...
- 油候插件grant的使用
// ==UserScript== // @name Test Baidu // @namespace http://www.baidu.com/ // @version 0.1 // @descri ...
- python中使用anaconda对不平衡数据的处理包imblearn的安装
为了建模,处理不平衡数据,想使用SMOTEENN方法进行数据平衡处理,为此需要下载对应的包imblearn 最开始直接从anaconda中进行: conda install imblearn 报 ...
- 测试并整理的 Airpods Pro 刻字可用的最全特殊符号
天气符号 ☉ 文化符号 卍卐 办公室符号 № ℗ ℡ ℀ ℅ ™ © ® ‰ ¶ § 技术符号 ⇧ 打勾符号 ˇ ∨ √ 人的符号 ♀ ♂ ヅ ツ ü 星星符号 ☆ ★ ✽ 箭头符号 ↖ ↗ ↘ ...
- Codeforces 524C.The Art of Dealing with ATM（暴力）
我先采用了智障解法(n * n枚举...刚开始把n看成1000了还以为能过) 理所当然的t了,不过我怀疑优化一下能过?(感觉数据不太行的亚子 然后就是O(n * k * k)的解法,看到好多人快乐二分 ...
- plt/sns draw histgram
当使用如下代码保存使用 plt.savefig 保存生成的图片时,结果打开生成的图片却是一片空白. import matplotlib.pyplot as pltx = np.triu(ged) # ...
- SSM开发基于Java EE在线图书销售系统
SSM(Spring+Spring MVC+MyBatis)开发基于Java EE在线图书销售系统 网站成功建立和运行很大部分取决于网站开发前的规划,因此为了在网站建立过程中避免一些不 ...
- SpringMVC 配置.html拦截时，返回JSON数据时出现406错误解决方案
[说明]在SpringMVC框架的使用中常常会使用@ResponseBody注解,修饰"处理器"(Controller的方法),这样在处理器在返回完毕后,就不走逻辑视图,而是将返回 ...
- c#中convert.toInt32和int.parse()和强制类型转换的区别
string a="123"; int i=(int)a; 这是会出现错误因为:强制类型转换只能转换值类型不能转换引用类型 string属于引用类型 强制类型转换时如果值类型 ...
- 每天进步一点点------Allegro 蛇形走线
对于高速数据总线,如果芯片内部没有延时调节功能,通常使用蛇形走线来调整延时以满足时序要求,也就是通常所说的等长线.蛇形走线的目的是调整延时,所以这一类网络都有延迟或相对延迟约束.所以在做蛇形走线调整时 ...