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学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
随机推荐
- LaTeX竖立公式符号
1.LaTeX技巧668:LaTeX如何实现直立积分号 \usepackage{amsmath,amssymb} \DeclareSymbolFont{EulerExtension}{U}{euex} ...
- ASPxDashboardViewer_OnDashboardLoaded 修改Item参数
protected void ASPxDashboardViewer_OnDashboardLoaded(object sender, DashboardLoadedWebEventArgs e) { ...
- docker usage (2)
1. docker command docker start postgres docker container ls --all docker image ls --all docker ps -a ...
- （转）java垃圾回收二
转自:http://shuaijie506.iteye.com/blog/1779651 在网上看到一篇不错的文章,记录下来备忘. 要理解java对象的生命周期,我们需要要明白两个问题, 1.java ...
- 压缩包安装mysql8.0
在使用django的时候遇到一个错误,就是用脚本改变数据库的时候,发现mysql的版本不够,需要的版本应该大于5.8,而我的只有5.5,就很烦,恰好我之前有8.0的压缩包.(mysql重装已经不下十次 ...
- [转] UML中的六大关系
UML中的六大关系 转自:https://www.cnblogs.com/hoojo/p/uml_design.html 在UML类图中,常见的有以下几种关系: 泛化(Generalization), ...
- 剑指offer 面试题52. 两个链表的第一个公共节点
这题之前leetcode做过,权当复习 首先这题没说是否一定有公共节点,如果代码可能因为这一点造成死循环的,需要提前验证所给两个链表是否有公共节点. 方法1:对于每一个list1的节点,遍历list2 ...
- 开发板上如何配置apahe2+mysql+php7
1,安装apache2 sudo apt-get install apache2 修改webroot vim /etc/apache2/apache2.conf #在其中复制最后一个 <Dire ...
- js -- 操作sqlite数据库
最近看到一个使用js来操作sqlite数据库的,测试了一下,具体使用的是 js操作类: https://github.com/kripken/sql.js/(sqlite js 驱动) 异步请求:ht ...
- PTPX-功耗分析总结
使用PrimeTime PX进行功耗分析有两种:一种是平均功耗的分析Averaged power analysis,一种是Time-based power analysis. 电路的功耗主要有两种 ...