初始化脚手架
- 初始化脚手架步骤:
第一步(仅第一次执行):全局安装@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:`<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 = 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样式