挂载组件

  1. //将 App组件挂载到div#app节点里
  2. new Vue({
  3. render: h => h(App),
  4. }).$mount('#app')

VueComponent.$mount

封装组件

  1. <template>
  2. <div id="app">
  3. Hello Vue
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. name: 'app',
  9. }
  10. </script>
  11. <style>
  12. #app {
  13. font-family: 'Avenir', Helvetica, Arial, sans-serif;
  14. -webkit-font-smoothing: antialiased;
  15. -moz-osx-font-smoothing: grayscale;
  16. text-align: center;
  17. color: #2c3e50;
  18. }
  19. </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组件实现父子组件间通信:

  1. <template>
  2. <div id="app">
  3. <HelloWorld v-bind:msg='msg' v-bind:click='getDataFormChild'/>
  4. </div>
  5. </template>
  6. <script>
  7. import HelloWorld from './components/HelloWorld.vue'
  8. export default {
  9. name: 'app',
  10. components: {
  11. HelloWorld
  12. },
  13. methods:{
  14. getDataFormChild:(zz,yy)=>{
  15. console.log(zz,yy);
  16. }
  17. }
  18. }
  19. </script>
  20. <style>
  21. #app {
  22. font-family: 'Avenir', Helvetica, Arial, sans-serif;
  23. -webkit-font-smoothing: antialiased;
  24. -moz-osx-font-smoothing: grayscale;
  25. text-align: center;
  26. color: #2c3e50;
  27. }
  28. </style>

如代码所示,单向数据流父传子依然是通过props传递信息,通过v-bind实现变量的传值,子组件可通过调用父组件定义的方法并传参,实现数据的逆向传递;

7 注意定义data的方式:

  1. data:()=>({
  2. msg:'hello, vue'
  3. }),

如代码所示,data为函数,最终返回一个data对象。(这里应考虑返回data对象的函数如果为异步的情形);

8 :

  1. <script>
  2. import HelloWorld from './components/HelloWorld.vue';
  3. export default {
  4. name: 'app',
  5. components: {
  6. HelloWorld
  7. },
  8. props: {
  9. msg: String,
  10. click: Function
  11. },
  12. data:()=>({
  13. msg:'hello, vue'
  14. }),
  15. methods:{
  16. getDataFormChild:(zz,yy)=>{
  17. console.log(zz,yy);
  18. }
  19. }
  20. }
  21. </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版本基础知识概要(一)的更多相关文章

  1. Vue 2.0入门基础知识之全局API

    3.全局API 3-1. Vue.directive 自定义指令 Vue.directive用于自定义全局的指令 实例如下: <body> <div id="app&quo ...

  2. vue项目构建实战基础知识:SPA理解/RESTful接口介绍/static目录配置/axios封装/打包时map文件去除

    一.SPA 不是指水疗.是 single page web application 的缩写.中文翻译为 单页应用程序 或 单页Web应用,更多解释请自行搜索. 所有的前端人员都应该明白我们的页面的 u ...

  3. Vue 2.0入门基础知识之内部指令

    1.Vue.js介绍 当前前端三大主流框架:Angular.React.Vue.React前段时间由于许可证风波,使得Vue的热度蹭蹭地上升.另外,Vue友好的API文档更是一大特色.Vue.js是一 ...

  4. vue开发路由相关基础知识和笔记

    路由实现:hash模式 和 history模式 hash模式: 概述 在浏览器中符号"#",#以及#后面的字符称之为hash,用window.location.hash读取: 特点 ...

  5. 安装 Linux 系统基础知识概要

    虚拟化软件,建议使用 Vmware Workstation 虚拟硬件配置CPU:2核或更多内存:1G以上,推荐2G硬盘:一块硬盘,200G (虚拟大小)网卡:NAT模式 (桥接在外部网络变化时,无法访 ...

  6. JDK版本基础知识解释

    感谢大佬:https://www.cnblogs.com/bjguanmu/articles/8710209.html jdk:java development kit,是程序员编写java程序需要的 ...

  7. Python学习基础知识概要

    1.输入输出 输出实例   1 2 print 'hello','world' hello world 输入实例   1 2 3 4 5 name = raw_input(); print " ...

  8. vue初体验-ES6 基础知识补充 let 和const

    本人水平有限,如内容有误,欢迎指正,谢谢. let  : 主要特点: 1.作用域只局限于当前代码块.2.使用let 声明的变量作用域不会被提升.3.在相同的作用域下不能声明相同的变量.4.for循环体 ...

  9. Vue.js-08:第八章 - 组件的基础知识

    一.前言 在之前的学习中,我们对于 Vue 的一些基础语法进行了简单的了解,通过之前的代码可以清晰的看出,我们在使用 Vue 的整个过程,最终都是在对 Vue 实例进行的一系列操作. 这里就会引出一个 ...

随机推荐

  1. webpack4打包nodejs项目进阶版——多页应用模板

    前段时间我写了个打包nodejs项目的文章,点击前往 但是,问题很多.因为之前的项目是个历史遗留项目,重构起来可能会爆炸,当时又比较急所以就写个的适用范围很小的webpack的打包方法. 最近稍微得空 ...

  2. 使用 shell / python 进行sql的excel报表导出

    如果要求你进行一个表数据的导出,如果使用shell的话,很容易做到,即执行一下 select 语句就可以拿到返回结果了! 如下: /usr/bin/mysql -u"${username}& ...

  3. Vue+abp微信扫码登录

    最近系统中要使用微信扫码登录,根据微信官方文档和网络搜索相关文献实现了.分享给需要的人,也作为自己的一个笔记.后端系统是基于ABP的,所以部分代码直接使用了abp的接口,直接拷贝代码编译不通过. 注册 ...

  4. ubuntu 16.04安装perf

    ljc@ubuntu:~$ perf 程序“perf”尚未安装. 您可以使用以下命令安装: sudo apt install linux-tools-common ljc@ubuntu:~$ sudo ...

  5. C++ 之 简单的五子棋AI程序

    本人是大一新生,寒假无聊,抱着试试看的心态(没有想到可以完成),写了C++的简单五子棋程序,开心.     下面是效果图:     一.首先讲讲大致思路.            五子棋实现的基础:  ...

  6. k.tt 研究下生成的逻辑代码:从壹开始前后端分离 [.netCore 填坑 ] 三十二║ 四种方法快速实现项目的半自动化搭建

    更新 1.更新小伙伴 @大龄Giser 提出好点子:试试VS的插件扩展:VSIX.ItemProject等,将T4模板给制作插件,这里先记下,有懂的小伙伴可以自己先试试,我会在以后更新. 2.感谢小伙 ...

  7. TabTopLayout【自定义顶部选项卡区域(固定宽度且居中)】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 自定义顶部选项卡并居中显示.结合显示/隐藏view的方式实现切换功能(正常情况下可能是切换fragment). 效果图 代码分析 T ...

  8. 学习ASP.NET Core Razor 编程系列十八——并发解决方案

    学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...

  9. AI产品的商业模式

    AI产品的商业模式 ------------------------------------------------------------------------------------------ ...

  10. Concat

    .net 对List使用Concat newlist=list.Concat(list2).ToList() JS的Concat则不用ToList(),一样要用个值去接 Concat返回是一个新数组, ...