Vue学习之Vue-CLI篇（1）

知识点 　　一、Vue-CLI介绍（Vue-CLI5+Vue2）

　　　　1、目录介绍

部分文件目录 目录 作用 代码 src/main.js 项目的入口文件，项目全局的运行配置一般都是在这里（如新建Vue对象挂载App、导入文件、挂载外部库）

//导入vue库

import vue from 'vue'

//导入App页面模块

import App from './App.vue'

//新建vue实例并使用render函数挂载。

new Vue({

　　render:h=>h(App)

}).$mount('#app')

//app挂载其他库

app.use('其他导入模块名')

src/App.vue vm下的唯一子组件，该组件下还有许多子组件，vm统一将其分配到app下管理

与其他普通页面不一样的是该页面位置不一样

src/components 放置页面中可重复使用的组件模块页面   src/assets 放置站内素材   node_modules 脚手架创建时便自带的一些库   public 公共文件，一般包括网站的网址logo   public/index.html 一些html页面的配置，包括网页的媒体查询、网页图标、网页标题等  

　　　　2、render函数

　　　　　　

import vue from 'vue'
import App from 'App.vue'
new Vue({
//render等价写法
  // template:'<App></App>',
  // components:{App},
  //render的普通写法
  // render(createElement){
  //   console.log(typeof createElement);//打印的结果是一个function
  //   //创建一个元素，第一个参数是元素名，第二个参数是内容
    
  //   return createElement('hi','你好啊')
  // },
  //render简化成箭头函数写法,更改参数名后就演变最简单的写法
  // render:(createElement)=>createElement('hi','你好啊')
//render最简写法
render:h=>h(App)
}).$mount('#app')

 

　　　　3、Vue.js与Vue.runtime.xxx.js

　　　　　　vue.js:一个完整版的js库，包括vue的核心与模板解析器（问1：什么是模板解析器，核心又什么）。

　　　　　　vue.runtime.xxx.js：只包括vue的核心，而不包括模板解析器。（问2：vue脚手架导入的js文件默认为vue.runtime.xxx.js，为什么要这样设计）

　　　　　　问1：vue的核心是vm的数据驱动与组件化模式，关于模板解析器可以看看这篇文章(44条消息) 学习vue源码（7）手写解析器_前端阳光的博客-CSDN博客

　　　　　　问2：在具体的生产环境时，我们在编译文件时，模板解析器只是暂时使用，当vue项目完成时，编译器就不需要了，而为了防止多余，而为了能让vue使用template配置项，所以需要使用render函数去指定具体内容。（问3：为什么render函数能代替编译器呢）

　　　　　　问3：从原理层解释，vue.js模板解析器可使用template属性将HTML标签转换成虚拟DOM，而render函数可以直接用js构建虚拟DOM，从而不要再把HTML标签转为虚拟DOM。（问4：render与template的区别和联系）

　　二、props属性与ref属性

　　　　1、props属性

        　　　   1、介绍

　　　　　　　父组件与子组件通信，子组件获取父组件的属性与方法。

　　　　　　2、使用

　　　　　　　

 1 父组件中传值
 2 <Student :name='张四' age=19 address='湖南邵阳'/>
 3 
 4 //子组件中接收
 5 export default {
 6     name='Student',
 7    //props的数组写法  
 8    props:['name','age','address'],
 9    //props对象写法一(只限定其传值类型)
10    props:{
11       name:String,
12       ...
13    }
14    //对象式写法2(限制值类型、以及其他限制（非空等）、默认值设置)
15    props:{
16       name:{
17          type:String,
18          required:true,
19          default:'李四',
20       }
21    }
22 }

 

　　　　2、ref属性

　　　　　　1、介绍

　　　　　　　父子组件通信，父组件获取子组件的的属性与方法。

　　　　　　2、使用

 1 //App.vue中
 2 //打标识
 3 <Student ref='stu'  />
 4 <script>
 5    //使用
 6    //获取所有的子vc
 7    console.log(this.$refs)
 8   //获取具体的子vc
 9   console.log(this.$refs.stu)
10 <script/>

 

Demo案例

暂无

总结

　　　1、vue.js与vue.runtime.xx.js的区别在于template与render的解析方式的区别。

　　　2、父子组件通信时，父组件获取子组件的属性和方法的方式为ref，而子组件获取父组件则使用props。

　　　3、props是只读的，Vue底层会监测props的修改，如果被修改会发出警告， 如果我们需要修改传过来的值又不想被警告，可以用组件的data函数新定义 一个属性再接收值改值然后去改变该属性，相当于一个中转站