Vue 2.6版本基础知识概要(一)
挂载组件
//将 App组件挂载到div#app节点里
new Vue({
render: h => h(App),
}).$mount('#app')
VueComponent.$mount
封装组件
<template>
<div id="app">
Hello Vue
</div>
</template>
<script>
export default {
name: 'app',
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>
1 Vue组件文件以.vue 结尾;
2 Vue组件模版,将html,css,js分别抽离到 tempplate ,style ,script ,各司其职,层次分明;
3 Vue实现css模块化的方式,是 scoped属性,style scoped ,其原理与css-module类似,以多位hash值避免命名冲突(所以依然存在冲突的可能性);
4 Vue实现数据双向绑定, 指令 v-model = 'dataOrPropName',即绑定props对象或data对象的key。因此,props与data的key命名不可冲突;
5 Vue实现列表渲染的关键指令是 v-for:"item in list" ,v-for属性对当前标签起作用,为了diff算法依赖key值遍历比对的实现,应当同时添加 v-bind:key = 'renewableVariat'绑定key值 ;
6 Vue组件实现父子组件间通信:
<template>
<div id="app">
<HelloWorld v-bind:msg='msg' v-bind:click='getDataFormChild'/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'app',
components: {
HelloWorld
},
methods:{
getDataFormChild:(zz,yy)=>{
console.log(zz,yy);
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>
如代码所示,单向数据流父传子依然是通过props传递信息,通过v-bind实现变量的传值,子组件可通过调用父组件定义的方法并传参,实现数据的逆向传递;
7 注意定义data的方式:
data:()=>({
msg:'hello, vue'
}),
如代码所示,data为函数,最终返回一个data对象。(这里应考虑返回data对象的函数如果为异步的情形);
8 :
<script>
import HelloWorld from './components/HelloWorld.vue';
export default {
name: 'app',
components: {
HelloWorld
},
props: {
msg: String,
click: Function
},
data:()=>({
msg:'hello, vue'
}),
methods:{
getDataFormChild:(zz,yy)=>{
console.log(zz,yy);
}
}
}
</script>
如代码所示,在js中引入依赖组件,最终暴露的是一个Vue组件的配置对象,其中,components为引入的组件集对象,data为函数,return出一个data对象,methods是方法集对象 ,props里为props类型检测对象。
9 注意所有js集或框架的类型检测,都是 弱类型(源于js)的静态/动态类型检测: 静态-指代码运行时才进行检测; 动态-指代码编译时就进行检测(如ts);
10 Vue其他丰富的指令及封装指令的方式;
11 Vue提供的组件通信的多种api;
12 Vue-router , vuex等插件的使用;
13 vue 配合node 实现 ssr;
14 vue 配合node 实现部分同构;
15 vue底层源码的消化;
16 基于vue手封实现vuex的功能;
17 拥抱新版本,全面面向es6,深刻学习proxy(替代Object.defineProperty)及class(替代构造函数)的使用;
18 基于Vue指令的思想,写react继承类高阶组件基于React.Component实现多个指令;
Vue 2.6版本基础知识概要(一)的更多相关文章
- Vue 2.0入门基础知识之全局API
3.全局API 3-1. Vue.directive 自定义指令 Vue.directive用于自定义全局的指令 实例如下: <body> <div id="app&quo ...
- vue项目构建实战基础知识:SPA理解/RESTful接口介绍/static目录配置/axios封装/打包时map文件去除
一.SPA 不是指水疗.是 single page web application 的缩写.中文翻译为 单页应用程序 或 单页Web应用,更多解释请自行搜索. 所有的前端人员都应该明白我们的页面的 u ...
- Vue 2.0入门基础知识之内部指令
1.Vue.js介绍 当前前端三大主流框架:Angular.React.Vue.React前段时间由于许可证风波,使得Vue的热度蹭蹭地上升.另外,Vue友好的API文档更是一大特色.Vue.js是一 ...
- vue开发路由相关基础知识和笔记
路由实现:hash模式 和 history模式 hash模式: 概述 在浏览器中符号"#",#以及#后面的字符称之为hash,用window.location.hash读取: 特点 ...
- 安装 Linux 系统基础知识概要
虚拟化软件,建议使用 Vmware Workstation 虚拟硬件配置CPU:2核或更多内存:1G以上,推荐2G硬盘:一块硬盘,200G (虚拟大小)网卡:NAT模式 (桥接在外部网络变化时,无法访 ...
- JDK版本基础知识解释
感谢大佬:https://www.cnblogs.com/bjguanmu/articles/8710209.html jdk:java development kit,是程序员编写java程序需要的 ...
- Python学习基础知识概要
1.输入输出 输出实例 1 2 print 'hello','world' hello world 输入实例 1 2 3 4 5 name = raw_input(); print " ...
- vue初体验-ES6 基础知识补充 let 和const
本人水平有限,如内容有误,欢迎指正,谢谢. let : 主要特点: 1.作用域只局限于当前代码块.2.使用let 声明的变量作用域不会被提升.3.在相同的作用域下不能声明相同的变量.4.for循环体 ...
- Vue.js-08:第八章 - 组件的基础知识
一.前言 在之前的学习中,我们对于 Vue 的一些基础语法进行了简单的了解,通过之前的代码可以清晰的看出,我们在使用 Vue 的整个过程,最终都是在对 Vue 实例进行的一系列操作. 这里就会引出一个 ...
随机推荐
- webpack4打包nodejs项目进阶版——多页应用模板
前段时间我写了个打包nodejs项目的文章,点击前往 但是,问题很多.因为之前的项目是个历史遗留项目,重构起来可能会爆炸,当时又比较急所以就写个的适用范围很小的webpack的打包方法. 最近稍微得空 ...
- 使用 shell / python 进行sql的excel报表导出
如果要求你进行一个表数据的导出,如果使用shell的话,很容易做到,即执行一下 select 语句就可以拿到返回结果了! 如下: /usr/bin/mysql -u"${username}& ...
- Vue+abp微信扫码登录
最近系统中要使用微信扫码登录,根据微信官方文档和网络搜索相关文献实现了.分享给需要的人,也作为自己的一个笔记.后端系统是基于ABP的,所以部分代码直接使用了abp的接口,直接拷贝代码编译不通过. 注册 ...
- ubuntu 16.04安装perf
ljc@ubuntu:~$ perf 程序“perf”尚未安装. 您可以使用以下命令安装: sudo apt install linux-tools-common ljc@ubuntu:~$ sudo ...
- C++ 之 简单的五子棋AI程序
本人是大一新生,寒假无聊,抱着试试看的心态(没有想到可以完成),写了C++的简单五子棋程序,开心. 下面是效果图: 一.首先讲讲大致思路. 五子棋实现的基础: ...
- k.tt 研究下生成的逻辑代码:从壹开始前后端分离 [.netCore 填坑 ] 三十二║ 四种方法快速实现项目的半自动化搭建
更新 1.更新小伙伴 @大龄Giser 提出好点子:试试VS的插件扩展:VSIX.ItemProject等,将T4模板给制作插件,这里先记下,有懂的小伙伴可以自己先试试,我会在以后更新. 2.感谢小伙 ...
- TabTopLayout【自定义顶部选项卡区域(固定宽度且居中)】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 自定义顶部选项卡并居中显示.结合显示/隐藏view的方式实现切换功能(正常情况下可能是切换fragment). 效果图 代码分析 T ...
- 学习ASP.NET Core Razor 编程系列十八——并发解决方案
学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...
- AI产品的商业模式
AI产品的商业模式 ------------------------------------------------------------------------------------------ ...
- Concat
.net 对List使用Concat newlist=list.Concat(list2).ToList() JS的Concat则不用ToList(),一样要用个值去接 Concat返回是一个新数组, ...