Vue脚手架 vue2中main.js文件解析 ref属性 props传参

             Vue脚手架

  第一步 (仅第一步执行)  全局安装@vue/cli

 npm install -g @vue/cli

安装制定版本

npm install -g @vue/cli@4.5.14

卸载vue/cli

npm uninstall @vue/cli

注意   

@vue/cli 五版本的和四版本的有区别    五版本的  《vue create 项目名》  命令执行不了  执行不了   必须卸载   安装 四版本的

第二部 切换到你要创建项目的目录 然后使用命令创建项目

   vue create 项目名

  第三步启动项目

    npm run serve

  备注

   1.如出现下载缓慢请配置npm淘宝镜像

        npm config set registry https://registry.npm.taobao.org

   2.Vue脚手架隐藏了所有webpack相关的配置 若想看具体的webpack配置

   请执行  vue inspect > output.js

3.安装less-loder

npm i less-loader@7           //版本7

                          vue2中main.js文件解析

//引入vue

import Vue from 'vue'                                  该文件是整个项目的入口文件

//引入App组件 他是所有组件的父组件

import App from './App.vue'

//关闭vue的生产提示

Vue.config.productionTip = false

//创建vue实例对象--vm

new Vue({

  render: h => h(App),

}).$mount('#app')

                                       ref属性

      被用来给元素或子组件注册引用信息(id的替代者)

      应用在html标签上获取的是真实DOM元素 应在组件标签上的是组件实例对象

      应用方式

      <h1 ref="xxx"></h1>  或 <School ref="xxx"></School>

      获取this.$refs.xxx

                                        props传参

传递参数

 <Student name='李四' sex='男' :age='18'/>

 <Student name='王五' sex='男' :age='100'/>

接收参数

props 外部传过来的数据不能修改

props是只读的 Vue底层会检测你对props的修改 如果进行了修改就会发出警告

若业务需求确实需要更改 那么请复制props的内容到data中一份,然后修改data中的数据

  <Student name='王五' sex='男' />     //传递参数

props:['name','sex','age']          //接收参数

 myAge:this.age            //data中的数据

 <h2>学生年龄{{myAge+1}}</h2>    //修改data中的数据

只接收

props:['name','sex','age']  //简单声明接收

限制类型

props:{                                        //接受的同时 对数据进行类型限制

  name:String,

    age:Number,

   sex:String

 }

大型项目都是使用第三种

限制类型 限制必要性 指定默认值

props:{          //接受的同时对数据 进行类型限制 + 默认值的指定 + 必要性的限制

   name:{

       type:String,//name的类型是字符串

       required:true//name是必要的

   } ,

   age:{

       type:Number,

       default:99  //默认值

   },

   sex:{

       type:String,//name的类型是字符串

       required:true//name是必要的

   }}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容