11. 安装express的脚手架 / ref （课件：2019-1-8）

引入组件，不用Vue.component(),而是在导出的对象上挂一个components的属性，属性里面为一个对象，key值和value一样的情况下，写一个即可。

木偶组件（为了接收数据，渲染数据，基本上是没有逻辑的，越往下越木偶）

功能组件（更多是控制数据，有大量的逻辑，越往顶层越功能）

ref：

　　当做给元素或者组件加了一个 id，可以通过 this.$refs.xxx 去找到它们。

　　　　<Child ref="xxx"></Child>   在 mounted 的事件中 console.log(this.$refs.txt)

　　使用技巧:

　　　　如果在操作数据之后，还要操作 ref 的 DOM 元素，可以使用 nextTick 方便操作。

　　　　如果在 mounted 下，不能准确的拿到 DOM 元素，那么用 nextTick

methods:{
    click(){
        this.$nextTick(()=>{
            this.$refs.txt.focus();  //通过 ref 获取DOM元素
        });
    },
}      

<Child ref="txt"></Child>   //设置 ref 

 

安装步骤：

　　1.npm install express-generator -g 

　　2.express myapp （myapp是项目的名称）

　　3.npm install 安装

         npm run start 运行