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实现多个指令;

原文地址:https://www.cnblogs.com/sanchang/p/10549900.html

时间: 2024-11-05 22:06:42

Vue 2.6版本基础知识概要(一)的相关文章

Python基础知识概要

还是基于上篇提到的自动回贴的需求,通过抓包可以获取需要post的登录信息,实现登录,之后就要通过python实现自动回贴, 但是之前没有用过python,为了一个功能要系统的学习一门语言必然浪费很多时间,所以就要速成,根据其他语言基础快速做迁移. 以下便是概要,简单了解基本用法,为接下来的开发做基础. # coding=utf-8 ############### #输入输出 ############### # 输出实例 print 'hello','world' # 输入实例 name = ra

vue快速入门~必备基础知识

和JQ完全操作dom不同,他是通过一些特殊的html语法,将dom和数据绑定,创建了这种绑定,DOM和数据保持同步,一更新数据,dom自动更新. vue.js是javascript MVVM库(model-view-ViewModel) ViewModel是vue.js核心,它是一个vue实例.vue实例作用在某个html元素上,可以是body,也可以是某个指定id的元素. vue.js可以实现双向绑定.双向绑定是什么呢?两个'向'分别是UI界面和js里的vue实例的data属性,改变其中的一个

Java基础知识概要

一.集合 Java 集合类详解 Java集合总览 Java回顾之集合

Python学习基础知识概要

1.输入输出 输出实例 1 2 print 'hello','world' hello world 输入实例 1 2 3 4 5 name = raw_input(); print "hello,",name world hello,world 输入时提示实例 1 2 3 4 5 name = raw_input('please enter your name:'); print "hello,",name please enter your name:world

vue基础知识之vue-resource/axios

Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必要引入jQuery.vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应.也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁.另外,vue-resource还提供了

关于Java语言的平台版本,这些基础知识一定要知道!

Java语言概述 关于Java语言的平台版本,这些基础知识一定要知道!1詹姆斯·高斯林(James Gosling)1977年获得了加拿大卡尔加里大 学计算机科学学士学位,1983年 获得了美国卡内基梅隆大学计算机科学博士学位,毕业后到IBM 工作,设计IBM第一代工作站NeWS系统,但不受重视.后来 转至Sun公司,1990年,与Patrick,Naughton和Mike Sheridan等人合作"绿色计划",后来发展一套语言叫做"Oak",后改名为Java.最后

Ant学习-001-ant 基础知识及windows环境配置

一.Ant 概要基础知识 Apache Ant 是一个将软件编译.测试.部署等步骤联系在一起加以自动化的一个工具,大多用于Java环境中的软件开发,用以构建应用,或结合其他开源测试工具例如 git.TestNG等搭建持续集成测试开发环境,从而高效.高质量的构建产品. Ant 有以下一些优点: 跨平台,可移植.Ant 是 Java 语言编写的,所以有很好的跨平台性和可移植性,无论是在 windows.Linux,还是 mac. 操作简单. Ant 是由一个内置任务和可选任务组成的,运行时需要一个构

Elasticsearch基础知识学习

概要 ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口.Elasticsearch是用Java开发的,并作为Apache许可条款下的开放源码发布,是当前流行的企业级搜索引擎.本人在工作过程中也有幸使用了ELK,下面对ES基础知识进行说明,大部分资料从网上摘抄整理而来,作为我学习ES的笔记记录. 生活中的数据 搜索引擎是对数据的检索,所以我们先从生活中的数据说起.我们生活中的数据总体分为两种:结构数据和非结构化

线程基础知识

什么是线程: 在一个程序里的一个执行路线就叫做线程(thread).更准确的定义是:线程是"一个进程内部的控制序列" 一切进程至少都有一个执行线程 进程与线程 进程是资源竞争的基本单位 线程是程序执行的最小单位 线程共享进程数据,但也拥有自己的一部分数据 线程ID 一组寄存器 栈 errno 信号状态 优先级 fork和创建新线程的区别 当一个进程执行一个fork调用的时候,会创建出进程的一个新拷贝,新进程将拥有它自己的变量和它自己的PID.这个新进程的运行时间是独立的,它在执行时几乎