1.1、脚手架环境安装Vue
安装脚手架依赖
# 安装 @vue/cli
cnpm i -g @vue/cli
1.2、创建Vue项目
在本地创建项目文件夹,例如 d:\project, 在此目录中运行 cmd , 然后执行下面命令:
# 创建项目
vue creat myapp
# 根据提示选择安装配置
# 项目创建成功后
cd myapp
npm run serve
项目启动成功后,在浏览器中访问 http://localhost:8080
1.3、精简项目代码
项目目录结构
- public 本地服务器根目录
- src 源码
- assets 静态资源文件,例如图片,视频等;
- components 管理公共组件的目录
- router 管理路由的目录
- store 管理状态的目录
- views 管理视图组件的目录
- App.vue 根组件
- main.js 入口文件
-package.json npm 的配置组件
精简:
对 App.vue 精简
<template>
<router-view><router-view>
</template>
<style>
html,body {
margin:0;
padding:0;
height:100%
}
</style>
剩下的目录根据项目需求进行删除
Vue的核心概念
2.1、指令
2.1.1、文本指令
- v-text
- v-html
2.1.2、流程控制
- v-if
- v-else-if
- v-for
- key属性表示什么意思
- 与 <template> 配合使用时, key属性要声明在子元素上
-
<temolate v-if="i in 10"> <div :key="i"> {{i}} </div> </template>
2.1.3、显示与隐藏
- v-show
- 与 v-if 的区别:
- v-show 使用display 属性控制元素的显示与隐藏
- v-if 值为 false时,不会被渲染在页面上
- 执行效率分析
- 与 v-if 的区别:
2.1.4、属性绑定
- v-bind
- v-bing的值一定是 在一个data声明的变量或 js表达式
- style绑定
- :style=”“ 值为对象,对象的属性是 css 的样式元素(以小驼峰式命名样式属性名)
- :style=”“ 写法:
-
<template> <div> <!-- 写法一,值为字母自符串 --> <div :class="'red'"></div> <!-- 写法二,值为对象 --> <div :class="{red:true}"></div> <!-- 写法三,值为数组 --> <div :class="[s1,s2]"></div> <!-- 写法四,值为变量 --> <div :class="s1"></div> </div> </template> <script> export default { data(){ return { s1:'red', s2:'big' } } } </script> <style scoped> .red{ color:red } .big{ font-size:20px; } </style>
2.1.5、事件处理
- v-on
- 简写 @
获取当前元素的事件对象
<template>
<div>
<button @click="handleClick($event)">按钮</button>
<input type="text" @keypress="handleInput($event)">
</div>
</template>
<script>
export default {
methods:{
handleclick(e){
//获取当前元素的事件对象
console.log(e)
//获取点击的元素DOM对象
console.log(e.target)
},
handleInput(e){
//获取当前输入框的值
console.log(e.target.value)
//获取当前输入的状态码
console.log(e.keyCode)
}
}
}
</script>
- 事件修饰符
<template>
<div>
<!-- 阻止事件冒泡 -->
<button @click.stop="add">按钮</button>
<!-- 当自身元素被触发时才会执行事件函数,如果事件冒泡传递来的,不会触发 -->
<button @click.self="add">按钮</button>
<!-- 在事件冒泡中优先执行 -->
<button @click.capture="add">按钮</button>
<!-- 阻止浏览器默认事件-->
<button @click.prevent="add">按钮</button>
<!-- 在本次渲染后只能触发一次-->
<button @click.once="add">按钮</button>
<!-- 忽略 event.preventDefault()行为,不能和 prevent 修饰符同时使用 -->
<button @click.passive="add">按钮</button>
</div>
</template>
- 按键修饰符
- .enter
- .tab
- .delete(捕获“删除”和“退格”键)
- .esc
- .space
- .up
- .down
- .left
- .right
- 系统修饰符
- .ctrl
- .alt
- .shift
- .meta
2.1.6、表单绑定
- v-model
- 修饰符
- .trim 去掉首尾空格
- .number 如果是是数字开头的话 ,如果内容中间出现非数字内容,只会保留第一部分的数字;如果是非数字开头,以字符串类型处理
- .lazy 当失去焦点时,才会执行双向绑定
- 如果要绑定checkbox 多个元素 时, v-mode="array"值要为数组类型
-
<template> <div> <!-- 文本输入框 --> <input type="text" v-model='val'> <!-- 文本域 --> <textarea v-model="vals"></textarea> <!-- 单选框 --> <input type="radio" v-model="sex" value="男">男 <input type="radio" v-model="sex" value="女">女 <!-- 复选框 --> <input type="checkbox" v-model="hobody" value="篮球">篮球 <input type="checkbox" v-model="hobody" value="足球">足球 <input type="checkbox" v-model="hobody" value="排球">排球 <input type="checkbox" v-model="hobody" value="羽毛球">羽毛球 <!-- 下拉框 --> <select v-model="word"> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> </select> </div> </template> <script> export default { data(){ return { val:'', vals:'', sex:'男', hobby:['篮球'],//如果有值,该项为默认选中 word:'' } } }
2.1.7、编译处理
- v-pre
- 跳过当前元素及其子元素,不进行编译
- v-once
- 只会渲染一次
- v-cloak
- 会一直保留在元素 上面,直到 vue编译完成后,自动消失
- 修饰符
2.1.8、插槽
-
v-slot
- 简写 #
- 仅限于<template> 组件上使用
- 示例:自定义组件 src/components/Goodscard.vue
<template>
<div>
<hr>
<h2>商品卡片</h2>
<hr>
<div>
商品标价:<slot name="title"></slot>
</div>
<hr>
<div>
商品价格:<slot name="price"></slot>
</div>
</div>
</template>
使用GoodsCard.vue 组件
<template>
<div>
<goods-card>
<template v-slot:price>
100
</template>
<template #title>
<span style="color:red">这条牛仔裤</span>
</template>
</goods-card>
</div>
</template>
<script>
import GoodsCard from './components/GoodsCard.vue'
export default {
components:{
GoodsCard
}
}
</script>
2.2、选项
2.2.1、数据选项
- data
- 在组件内,必须是一个返回初始对象的函数
- 为了保证当前组件的多个实例直接不会共享data中的数据
- props
- 接收父组件传值
- 定义的props 属性的一个对象,该对象中的四个属性:
- type:设置当前属性的数据类型,可以使用数组的形式设置指定多种类型,例如:[String,Number],共支持八种类型,即:String,Number,Boolean,object,Function,Array,Date,Symbol
- default:设置默认值,any任意类型
- required:设置当前属性是否必填,值为true时 为必填项
- validator:设置当前属性值的校验函数,函数返回值为true时通过校验,代码示例:
-
props:{ type:{ validator:function(val){ return ['success','danger','error'].includes(val) } } }
- methods
- 用于 定义函数
- watch
- 用于监听响应式数据的变化
export default {
data(){
return{
i:0,
obj:{
a:{
b:{
c:0
}
}
}
}
},
watch:{
i(){
//监听 i 的变化
},
obj:{
handler(){
//监听对象的变化
},
deep:true//深度监听,只能监听对象属性的变化
}
}
}
- computed
- 计算属性
- 有缓存,当所依赖的响应式数据发生变化时,才会重新计算
2.2.2、DOM选项
- el
- 使用css选择器或HTMLDomcument对象的方法获取到页面中已经存在的DOM元素,将该元素作为Vue实例的挂载目标
- template
- 在自定义组件中用于创建VNode模板
- 声明在VNode模板中,最外层只能有一个根目录
2.2.3、生命周期
- beforeCreate
- 不能获取vue实例的属性和方法
- 不能获取DOM对象
- created
- 能获取vue实例的属性和方法
- 不能获取DOM对象
- beforeMount
- 能获取vue实例的属性和方法
- 不能获取DOM对象
- mounded
- 能获取vue实例的属性和方法
- 能获取DOM对象
- beforeUpdate
- 当data中响应式数据发生变化时,会触发页面的渲染,页面渲染前将调用该方法
- 在此方法获取的响应式数据的值为修改后的值
- updated
- 响应式数据更新,触发页面渲染,页面渲染将调用此方法
- 在此处可以更新后的DOM元素对象
- beforeDestroy
- destroyed
- activated
- deactivated
- errorCaptured
2.2.4、资源选项
-
filters
-
过滤器
-
-
directives
-
自定义指令
-
钩子函数
-
bind
-
inserted
-
update
-
componentUpdated
-
unbind
-
-
钩子函数的参数
-
el
-
binding
-
vnode
-
oldVnode
-
-
-
components