vuejs中的组件以及父子组件间通信传值

虽互不曾谋面,但希望能和你成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

(您有任何疑问,都可以进行提问,我们一起探讨)

前言

您将在本文当中了解到,往网页中添加数据,从传统的dom操作过渡到数据层操作,实现同一个目标,两种不同的方式.以及什么是组件,如何定义和使用组件,父子组件之间如何进行简单的通信传值...

对于vuejs,我也只是个初学者,很多人都觉得简单,但我觉得是它并不容易的,就像JQuery的,常用的API也就那些,但是遇到一些炫酷的效果,就是写不来。

在切换到写Vuejs代码中,你不需要去关注dom层操作,更多的精力是放在处理数据上,数据是什么,就让页面显示什么,操作数据，就是在操做view(视图),这与JQuery是不一样的,编程思路是需要进行转化的

单纯的vuejs其实是不足以撼动jQuery的地位的,它的强大之处在于它的生态系统非常丰富,路由,模型,UI组件等各个部分的钩子等令vuejs风靡国内外,借鉴了Angular中指令,React中组件化等,上手相对而言比较容易

如今jQuery时代真是江河日下了,这里我并不是说它不重要,它仍然是非常优秀而重要的,只是任何技术都有辉煌和落幕的时候,时代在进步,技术也在不断更新迭代..

从github上的star数看得出,vue势头略盖过react,甩angular几条街,已形成三足鼎立趋势,凡是react,angular能做的,无论是pc,移动端,甚至webapp,pwa应用(lavas=vue+pwa),小程序(wepy),vue几乎无孔不入了

在vue的使用过程中,从开始学习单纯的引入script标签加载vuejs脚本形式到最终使用vue-cli脚手架搭建出来的项目,它又换成另外一种编程思路

前一种方式更多是对vuejs中的一些API学习的验证,还是可以的,它是把html,js和各种逻辑耦合在一起进行编码,类似于jQuery的风格.它也能搞事,但是这与脚手架搭建起的应用是不同的

后一种使用脚手架方式却是我们常用的方式,它是以一种单文件组件方式,也就是以.vue后缀名文件就是一个组件,这个单文件组件定义包含了模板,逻辑和它的样式,它做了一个非常好的组件封装.

在vuejs中组件与组件之间的通信,关联操作,数据共享,路由状态的切换变更,UI组件的嵌套,插件与主程序的额外拓展等,如果处理他们起来觉得很简单,那才是真简单..

本文并不是什么高大上的内容,首次分享vue学习笔记心得,关于vue的知识特别多,也特别杂,旨在记录自己学习过程中的一些困惑和理解,如果你是大神,就直接忽略吧，也欢迎路过的老师多提意见和指正

正文从这里开始~

vuejs是什么?

• 它只关注视图层的view,是构建用户界面的渐进式框架

• 数据驱动,声明式渲染(模板,插值表达式),模块化,组件化,客户端路由(vue-router),数据状态管理(vuex),构建工具(vue-cli)

vue中核心点

• 响应式数据绑定,当数据(model层)发生改变,它会自动更新视图(view),内部实现原理是利用Es5中的Object.definedProperty中的setter/getter代理数据,监控对数据的操作

• 视图组件,UI界面对应的每个功能模块,可视为组件,划分组件是为了更好管理,维护,实现代码的复用,减少代码之间的依赖,也就是逼格高一词,高内聚,低耦合

• 虚拟DOM:运行js的速度是很快的,大量的操作DOM就会很慢,时常在更新数据后会重新渲染页面,这样造成在没有改变数据的地方也重新渲染了DOM节点,这样就造成了很大程度上的资源浪费,用内存中生成与真实DOM与之对应的数据结构,这个在内存中生成的结构称为虚拟DOM,当model中数据发生变化时,Vue会将模板编译成虚拟 DOM 渲染函数,并结合响应系统，在应用状态改变时,vuejs能够智能地计算出重新渲染组件,并以最小代价并应用到DOM操作上

• MVVM模式:其中M:model数据模型,V:view视图模板,而VM(观察者,vue帮我们实现了的):view model负责业务处理,对数据进行加工,处理,之后交给视图,它是通过在摸板中指令与数据进行关联控制的，使用mvvm模式,编码的重点是在于view层和model层,以前是面对DOM开发(MVP),现在更多的是面向数据编程

上面罗列出来的呢,只是一些抽象的概念,具体的理解,必须得通过代码才能体会的,在以后的文章的中都会一一的去探索和感受

vuejs的使用

1. 方式1：独立引用(本地方式),通过script标签形式(本篇示例先已这种方式)

2. 方式2:线上引用,bootcdn(直接引入或者下载到本地都可以)

3. 方式3:npm方式(npm install vue),获取最新稳定版本

4. 方式4:命令行方式(vue-cli脚手架工具)

原生js实现一dom需求操作

往页面中插入一个button按钮，和一内容,并且点击按钮时,改变它自身的颜色,实现内容的显示和隐藏的效果:实例效果如下

(点击按钮实现按钮变色和内容的显示和隐藏)

实现方式1:利用原生js

css代码

body {
    
        margin:0;
        text-align:center;
    }
button {
    
        width:100px;
        height:50px;
        margin-top:50px;
        background:green;
        color:#fff;
        outline:none;
        border:none;
        border-radius:5px;
        cursor:pointer;
        margin-bottom:10px;
     }

JavaScript代码

/*
 MVP:模式,原生js操作dom         
 1. 获取dom元素节点,创建元素
 2. 添加元素dom操作
 3. 添加事件操作,逻辑处理

*/
window.onload = function(){
    
   var  oBody = document.getElementsByTagName("body")[0], // 获取dom节点
       oDiv  = document.createElement("div"), // 创建div元素
       oBtn  = document.createElement("button"),// 创建button元素
       onOff =  true; // 切换状态
       oDiv.setAttribute("class","content"); // 给div元素添加一个content类
       oBtn.setAttribute("id","btn"); // 给button按钮添加一个id为btn

                 
       oBtn.innerHTML = "点我按钮"; // dom操作,添加内容
       oDiv.innerHTML = "我是川川"; // 同上
       oBody.appendChild(oBtn);// 把节点元素添加到dom中
       oBody.appendChild(oDiv);
                   
       // 添加事件
       oBtn.onclick = function(){
    // 添加事件,改变样式,执行逻辑
               if(onOff){
    
                  this.style.backgroundColor="red";
                 oDiv.style.display = "none";
                 // hide()
               }else{
    
                  this.style.backgroundColor="green";
                  oDiv.style.display = "block";
                  // show()
               }
                  //onOff==true?hide():show();
                  onOff = !onOff; 
               }

               // 可以把里面的代码封装一下
              // 隐藏
              /*function hide(){
    
                      oBtn.style.backgroundColor="red";
                      oDiv.style.display = "none";
            }
           // 显示
           function show(){
    
                 oBtn.style.backgroundColor="green";
                 oDiv.style.display = "block";
          }*/
                  
     }

实现方式2：jQuery

css代码：并没有什么多大的改变,只是添加来类名

body{
    
        margin:0;
        text-align:center;
      }
      .btn{
    
        width:100px;
        height:50px;
        margin-top:50px;
        background:green;
        color:#fff;
        outline:none;
        border:none;
        border-radius:5px;
        cursor:pointer;
        margin-bottom:10px;
      }
      .activeBtn{
    
         background:red;
      }

jQuery代码

$(function(){
    
    var $body = $("body"),
        $btn = $("<button id='btn' class='btn'>点我按钮</button>"),
        $div = $("<div class='div'>我是川川</div>"),
        onOff = true;
                 
       $body.append($btn);
       $body.append($div);
                  

       $btn.click(function(){
    
           if(onOff){
    
                $(this).addClass('activeBtn');
                $div.css("display","none");
           }else{
    
                           
                $(this).removeClass('activeBtn');;
                $div.css("display","block");
           }
           onOff = !onOff;
       })
})

实现方式3:vue

css代码同上:

html代码,模板

<div id="app">
      <button id="btn" class="btn" v-bind:class="status?defaultClass:activeClass"  v-on:click="btnFun">{
    {btnMsg}}</button>
     <div v-if="status" class="content">{
    {descMsg}}</div>    
</div>

使用vuejs代码

var vm =  new Vue({
    
      el: "#app",
      data: {
    
      btnMsg: "点我按钮",
      descMsg: "我是川川"