Vue_00001_CLI

初始化脚手架

  • 初始化脚手架步骤：

第一步（仅第一次执行）：全局安装@vue/cli。
命令：npm install -g @vue/cli

第二步：切换到要创建项目的目录，然后使用命令创建项目。
命令：vue create xxxx

第三步：启动项目
npm run serve

备注：
如出现下载缓慢请配置npm淘宝镜像：npm config set registry https://registry.npm.taobao.org

Vue脚手架隐藏了所有webpack的相关配置，若想查看具体的webpakc配置，请执行命令：vue inspect > output.js

  • 脚手架文件结构：

├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png
│ │── component: 存放组件
│ │ └── HelloWorld.vue
│ │── App.vue: 汇总所有组件
│ │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件

  • 关于不同版本的Vue说明：
  1. vue.js与vue.runtime.xxx.js的区别：
    （1）vue.js是完整版的Vue，包含：核心功能 + 模板解析器。
    （2）vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
  2. 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template这个配置项，需要使用render函数接收到的createElement函数去指定具体内容。
  • vue.config.js配置文件说明
  1. 使用vue inspect > output.js可以查看到Vue脚手架的默认配置。
  2. 使用vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh

入门案例

main.js

//该文件是整个项目的入口文件//引入Vue
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'
//关闭vue的生产提示
Vue.config.productionTip = false/* 
关于不同版本的Vue：1.vue.js与vue.runtime.xxx.js的区别：(1).vue.js是完整版的Vue，包含：核心功能+模板解析器。(2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。
*///创建Vue实例对象（vm）
new Vue({el:'#app',//render函数完成了这个功能：将App组件放入容器中render: h => h(App)// render:q=> q('h1','你好啊')// template:`<h1>你好啊</h1>`,// components:{App},})

App.vue

<template><div><img src="./assets/logo.png" alt="logo"><School></School><Student></Student></div>
</template><script>//引入组件import School from './components/School' //引入School组件import Student from './components/Student' //引入Student组件export default {name:'App',components:{School,Student}}</script>

School.vue

<template><div class="demo"><h2>学校名称：{{name}}</h2><h2>学校地址：{{address}}</h2><button @click="showSchoolName">点击弹出学校名称</button>	</div>
</template><script>export default {name:'School',data(){return {name:'替天行道学校',address:'梁山'}},methods: {showSchoolName(){alert(this.name)}},}
</script><style>.demo{background-color: blue;}
</style>

Student.vue

<template><div class="demo"><h2>学校名称：{{name}}</h2><h2>学校地址：{{address}}</h2><button @click="showSchoolName">点击弹出学校名称</button>	</div>
</template><script>export default {name:'School',data(){return {name:'替天行道学校',address:'梁山'}},methods: {showSchoolName(){alert(this.name)}},}
</script><style>.demo{background-color: blue;}
</style>

基础

ref属性

main.js

import Vue from 'vue'import App from './App.vue'Vue.config.productionTip = falsenew Vue({el:'#app',render: h => h(App)})

App.vue

<template><div><h6 v-text="message" ref="title"></h6><button ref="btn" @click="showDOM">点击输出上方的DOM元素</button><School ref="sch"/></div></template><script>//引入School组件import School from './components/School'export default {name:'App',components:{School},data() {return {message:'欢迎学习Vue！'}},methods: {showDOM(){console.log(this.$refs.title) //真实DOM元素。console.log(this.$refs.btn) //真实DOM元素。console.log(this.$refs.sch) //School组件的实例对象。}},}</script>

School.vue

<template><div class="school"><h6>学校名称：{{name}}</h6><h6>学校地址：{{address}}</h6></div>
</template><script>export default {name:'School',data() {return {name:'替天行道学校',address:'梁山'}},}
</script><style>.school{background-color: blue;}
</style>

props配置

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产环境提示
Vue.config.productionTip = false//创建vm
new Vue({el:'#app',render: h => h(App)
})

App.vue

<template><div><Student name="潘金莲" gender="女" :age="18"/></div>
</template><script>import Student from './components/Student'export default {name:'App',components:{Student}}
</script>

Student.vue

<template><div><h3>{{message}}</h3><h6>学生姓名：{{name}}</h6><h6>学生性别：{{gender}}</h6><h6>学生年龄：{{myAge+1}}</h6><button @click="updateAge">点击修改收到的年龄</button></div>
</template><script>export default {name:'Student',data() {console.log(this)return {message:'我是替天行道的学生',myAge:this.age}},methods: {updateAge(){this.myAge++}},//简单声明接收// props:['name','age','gender'] //接收的同时对数据进行类型限制/* props:{name:String,age:Number,grnder:String} *///接收的同时对数据：进行类型限制+默认值的指定+必要性的限制props:{name:{type:String, //name的类型是字符串required:true, //name是必要的},age:{type:Number,default:99 //默认值},gender:{type:String,required:true}}}</script>

mixin混入(合)

import Vue from 'vue'import App from './App.vue'import {hunhe,hunhe1} from './mixin'Vue.config.productionTip = falseVue.mixin(hunhe)
Vue.mixin(hunhe1)new Vue({el:'#app',render: h => h(App)
})

App.vue

<template><div><Student/><hr><School/></div>
</template><script>import School from './components/School'import Student from './components/Student'export default {name:'App',components:{Student,School}}
</script>

Student.vue

<template><div><h6 @click="showName">学生姓名：{{name}}</h6><h6>学生性别：{{gender}}</h6>{{number}}，{{number1}}</div>
</template><script>import {hunhe,hunhe1} from '../mixin'export default {name:'Student',data() {return {name:'宋江',gender:'男'}},mixins:[hunhe,hunhe1]}
</script>

School.vue

<template><div><h6 @click="showName">学校名称：{{name}}</h6><h6>学校地址：{{address}}</h6>{{number}}，{{number1}}</div>
</template><script>import {hunhe,hunhe1} from '../mixin'export default {name:'School',data() {return {name:'替天行道学校',address:'梁山',number:8}},mixins:[hunhe,hunhe1],}
</script>

mixin.js

export const hunhe = {methods: {showName(){alert(this.name)}},mounted() {console.log('你好啊！')},
}export const hunhe1 = {data() {return {number:10,number1:11}},
}

插件

plugins.js

export default {install(Vue,x,y,z){console.log(x,y,z)//全局过滤器Vue.filter('mySlice',function(value){return value.slice(0,4)})//定义全局指令Vue.directive('fbind',{//指令与元素成功绑定时（一上来）bind(element,binding){element.value = binding.value},//指令所在元素被插入页面时inserted(element,binding){element.focus()},//指令所在的模板被重新解析时update(element,binding){element.value = binding.value}})//定义混入Vue.mixin({data() {return {number:10,number1:11}},})//给Vue原型上添加一个方法（vm和组件实例对象就都能用了）Vue.prototype.hello = ()=>{alert('你好！')}}}

main.js

import Vue from 'vue'import App from './App.vue'import plugins from './plugins'Vue.config.productionTip = false//应用（使用）插件
Vue.use(plugins,1,2,3)new Vue({el:'#app',render: h => h(App)
})

App.vue

<template><div><School/><hr><Student/></div>
</template><script>import School from './components/School'import Student from './components/Student'export default {name:'App',components:{School,Student}}
</script>

School.vue

<template><div><h6>学校名称：{{name | mySlice}}</h6><h6>学校地址：{{address}}</h6><button @click="test">点击测试一个hello方法</button></div></template><script>export default {name:'School',data() {return {name:'替天行道学校',address:'梁山',}},methods: {test(){this.hello()}},}
</script>

Student.vue

<template><div><h6>学生姓名：{{name}}</h6><h6>学生性别：{{gender}}</h6><input type="text" v-fbind:value="name"></div>
</template><script>export default {name:'Student',data() {return {name:'宋江',gender:'男'}},}
</script>

scoped样式

main.js

import Vue from 'vue'import App from './App.vue'Vue.config.productionTip = falsenew Vue({el:'#app',render: h => h(App)
})

App.vue

<template><div><h1 class="title">你好啊</h1><School/><Student/></div>
</template><script>import Student from './components/Student'import School from './components/School'export default {name:'App',components:{School,Student}}
</script><style scoped>.title{color: red;}
</style>

School.vue

<template><div class="demo"><h6 class="title">学校名称：{{name}}</h6><h6>学校地址：{{address}}</h6></div>
</template><script>export default {name:'School',data() {return {name:'替天行道学校',address:'梁山',}}}
</script><style scoped>.demo{background-color: blue;}
</style>

Student.vue

<template><div class="demo"><h6 class="title">学生姓名：{{name}}</h6><h6 class="one">学生性别：{{gender}}</h6></div>
</template><script>export default {name:'Student',data() {return {name:'宋江',gender:'男'}}}
</script><style lang="less" scoped>.demo{background-color: pink;.one{font-size: 40px;}}
</style>

案例

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/609022.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

python在一个文件夹中按文件名排序，获取这一文件的下一个文件名

python在一个文件夹中按文件名排序，获取这一文件的下一个文件名

在Python中&#xff0c;您可以使用sorted()函数对文件夹内的文件进行排序&#xff0c;并使用os模块来遍历这些文件。获取特定文件的下一个文件名可以通过排序后的列表来查找。下面是一个简单的示例代码&#xff0c;展示了如何对一个文件夹中的文件按文件名进行排序&#xff0c;…
阅读更多...
【基础工具篇使用】Windows环境下瑞芯微开发工具的安装和使用

【基础工具篇使用】Windows环境下瑞芯微开发工具的安装和使用

文章目录 Rockchip 烧录驱动的安装Rockchip 烧录工具使用导入配置MASKROM 模式烧录LOADER 模式烧录Update.img 包的烧录 Rockchip 烧录驱动的安装 瑞芯微提供了 RKDevTool 上位机烧录工具&#xff0c;此工具只能在 Windows 系统下运行&#xff0c;运行前要先安装驱动文件 Ro…
阅读更多...
mitmproxy代理抓包使用mock数据

mitmproxy代理抓包使用mock数据

第一步 安装Python环境 下载Python环境安装包https://www.python.org/getit/https://link.jianshu.com/?thttps%3A%2F%2Fwww.python.org%2Fgetit%2F &#xff08;图a&#xff09; 安装Python的时候勾选“Add Python 3.5 to PATH”选项&#xff08;图a&#xff09; 打开CMD命…
阅读更多...
Pytest接口自动化测试框架搭建

Pytest接口自动化测试框架搭建

一. 背景 Pytest目前已经成为Python系自动化测试必学必备的一个框架&#xff0c;网上也有很多的文章讲述相关的知识。最近自己也抽时间梳理了一份pytest接口自动化测试框架&#xff0c;因此准备写文章记录一下&#xff0c;做到尽量简单通俗易懂&#xff0c;当然前提是基本的py…
阅读更多...
书生·浦语大模型实战营第二次课堂笔记

书生·浦语大模型实战营第二次课堂笔记

文章目录 什么是大模型&#xff1f;pip&#xff0c;conda换源模型下载 什么是大模型&#xff1f; 人工智能领域中参数数量巨大、拥有庞大计算能力和参数规模的模型 特点及应用&#xff1a; 利用大量数据进行训练拥有数十亿甚至数千亿个参数模型在各种任务重展现出惊人的性能 …
阅读更多...
数据结构入门到入土——链表（完）LinkedList

数据结构入门到入土——链表（完）LinkedList

目录 一&#xff0c;双向链表 1.单向链表的缺点 2.什么是双向链表&#xff1f; 3.自主实现双向链表 接口实现&#xff1a; 二&#xff0c;LinkedList 1.LinkedList的使用 1.1 什么是LinkedList&#xff1f; 1.2 LinkedList的使用 1.LinkedList的构造 2.LinkedList的…
阅读更多...
elementUI点击el-card选中变色，且点击别的空白处不变色

elementUI点击el-card选中变色，且点击别的空白处不变色

1. <script>的data中添加属性&#xff1a; selectIndex: 0 2.<template>中添加el-card元素&#xff1a; click.native调用原生click方法。 click.native是在vue中&#xff0c;避免vue父模块调用成了vue成子模块中的this.emit(click, value)的方法&#xff0c;而…
阅读更多...
Pruning Papers

Pruning Papers

[ICML 2020] Rigging the Lottery: Making All Tickets Winners 整个训练过程中mask是动态的&#xff0c;有drop和grow两步&#xff0c;drop是根据权重绝对值的大小丢弃&#xff0c;grow是根据剩下激活的权重中梯度绝对值生长没有先prune再finetune/retrain的两阶段过程 Laye…
阅读更多...
C++-nullptr-类型推导

C++-nullptr-类型推导

1、nullptr&#xff08;掌握&#xff09;&#xff08;NULL 就是0&#xff09; NULL 在源码当中就是0&#xff0c;因此可能会存在一些二义性的问题。 #include <iostream> #include <memory> using namespace std;void func(int a) {cout << "a " …
阅读更多...
[原创][R语言]股票分析实战[9]:周内第N天转换为星期N因子

[原创][R语言]股票分析实战[9]:周内第N天转换为星期N因子

[简介] 常用网名: 猪头三 出生日期: 1981.XX.XX QQ联系: 643439947 个人网站: 80x86汇编小站 https://www.x86asm.org 编程生涯: 2001年~至今[共22年] 职业生涯: 20年 开发语言: C/C、80x86ASM、PHP、Perl、Objective-C、Object Pascal、C#、Python 开发工具: Visual Studio、D…
阅读更多...
工业异常检测AnomalyGPT-Demo试跑

工业异常检测AnomalyGPT-Demo试跑

写在前面&#xff1a;如果你有大的cpu和gpu可以使用&#xff0c;直接根据官方的安装说明就可以&#xff0c;如果没有&#xff0c;可以点进来试着看一下我个人的安装经验。 一、试跑环境 NVIDIA4090显卡24g,cpu内存33G&#xff0c;交换空间8g,操作系统ubuntu22.04(试跑过程cpu…
阅读更多...
问题 F: 分巧克力

问题 F: 分巧克力

题目描述 儿童节那天有 K 位小朋友到小明家做客。小明拿出了珍藏的巧克力招待小朋友们。小明一共有 N 块巧克力&#xff0c;其中第i 块HiWi 的方格组成的长方形。 为了公平起见&#xff0c;小明需要从这 N 块巧克力中切出 K 块巧克力分给小朋友们。 切出的巧克力需要满足&am…
阅读更多...
SEO写作：撰写在Google上排名的博客文章的13个技巧

SEO写作：撰写在Google上排名的博客文章的13个技巧

随着排名的提高&#xff0c;您的网站可以提高其整体知名度。最终目标是通过有效的优化来推动自然流量&#xff0c;增加转化率&#xff0c;并实现业务目标。 如果你不针对搜索引擎优化你的内容&#xff0c;你的网站可能会在搜索引擎结果页面&#xff08;SERP&#xff09;上出现…
阅读更多...
第7章-第9节-Java中的Stream流（链式调用）

第7章-第9节-Java中的Stream流（链式调用）

1、什么是Stream流 Lambda表达式&#xff0c;基于Lambda所带来的函数式编程&#xff0c;又引入了一个全新的Stream概念&#xff0c;用于解决集合类库既有的鼻端。 2、案例 假设现在有一个需求&#xff0c; 将list集合中姓张的元素过滤到一个新的集合中&#xff1b;然后将过滤…
阅读更多...
Realm Management Extension领域管理扩展简介

Realm Management Extension领域管理扩展简介

本博客介绍了领域管理扩展（RME），这是Arm的架构扩展。RME是Arm机密计算架构（Arm CCA）的硬件组件，同时包括软件元素。RME动态地将资源和内存转移到新的受保护的地址空间，高特权软件或TrustZone固件无法访问。由于存在这个地址空间，Arm CCA构建了受保护的执行环境，称为领…
阅读更多...
详解Oracle数据库的启动

详解Oracle数据库的启动

Oracle数据库的启动&#xff0c;其概念可参考Overview of Instance and Database Startup。 其过程可参见下图&#xff1a; 当数据库从关闭状态进入打开数据库状态时&#xff0c;它会经历以下阶段。 阶段Mount状态描述1实例在没有挂载数据库的情况下启动实例已启动&#xff…
阅读更多...
Numerical calculation and its application based on NumPy/SciPy

Numerical calculation and its application based on NumPy/SciPy

Numerical calculation and its application based on NumPy/SciPy 线性代表微分和积分统计插值 线性代表 { 3 x 1 2 x 2 8 − 3 x 1 5 x 2 − 1 \begin{cases} \begin{equation} \begin{split} 3x_12x_2 8\\ -3x_15x_2 -1 \end{split} \end{equation} \end{cases} {3x1​…
阅读更多...
SpringBoot 注解超全详解

SpringBoot 注解超全详解

使用注解的优势&#xff1a; 采用纯java代码&#xff0c;不在需要配置繁杂的xml文件 在配置中也可享受面向对象带来的好处 类型安全对重构可以提供良好的支持 减少复杂配置文件的同时亦能享受到springIoC容器提供的功能 1 注解详解&#xff08;配备了完善的释义&#xff0…
阅读更多...
深入了解鸿鹄工程项目管理系统源码：功能清单与项目模块的深度解析

深入了解鸿鹄工程项目管理系统源码：功能清单与项目模块的深度解析

工程项目管理软件是现代项目管理中不可或缺的工具&#xff0c;它能够帮助项目团队更高效地组织和协调工作。本文将介绍一款功能强大的工程项目管理软件&#xff0c;该软件采用先进的Vue、Uniapp、Layui等技术框架&#xff0c;涵盖了项目策划决策、规划设计、施工建设到竣工交付…
阅读更多...
uni-app顶部导航条固定

uni-app顶部导航条固定

1.准备 scroll-view 滚动容器&#xff0c;包裹需要滚动的区域 <!-- 自定义导航栏 --><CustomNavbar /><scroll-view class"scroll-view" scroll-y><!-- 自定义轮播图 --><XtxSwiper :bannerList"bannerList" /><!-- 首页…
阅读更多...
最新文章

Copyright @ 2022~2023