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说明：
- vue.js与vue.runtime.xxx.js的区别：
（1）vue.js是完整版的Vue，包含：核心功能 + 模板解析器。
（2）vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。 - 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template这个配置项，需要使用render函数接收到的createElement函数去指定具体内容。
- vue.config.js配置文件说明
- 使用vue inspect > output.js可以查看到Vue脚手架的默认配置。
- 使用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:`你好啊
`,
// 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 = false
new 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 = false
Vue.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 = false
new 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>