1、Vue基础入门
1.1、脚手架环境安装Vue
安装脚手架依赖
# 安装 @vue/cli
cnpm i -g @vue/cli
1.2、创建Vue项目
在本地创建项目文件夹，例如 d:\project，在此目录中运行 cmd，然后执行下面命令：
# 创建项目
vue create 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>
剩下的目录根据项目需求进行删除。
2、Vue的核心概念
2.1、指令
2.1.1、文本指令
- v-text
- v-html
2.1.2、流程控制
-
v-if
-
v-else-if
-
v-else
-
v-for
-
key属性表示什么意思？ -
与
<template>配合使用时，key属性要声明在子元素上 -
<template v-for="i in 10"> <div :key="i">{{i}}</div> </template>
-
2.1.3、显示与隐藏
- v-show
- 与
v-if的区别：v-show使用display属性控制元素的显示与隐藏v-if值为false时，不会被渲染到页面上- 执行效率分析
- 与
2.1.4、属性绑定
-
v-bind
v-bind的值一定是一个在data声明的变量或js表达式
-
style绑定
-
:style=""值为对象，对象的属性是css的样式元素（以小驼峰式命名样式属性名） -
:style=""写法：-
<template> <!-- 写法一，值为字面对象 --> <div :style="{color:'red',fontSize:'18px'}"> </div> <!-- 写法二，值为数组 --> <div :style="[s1,s2]"> </div> <!-- 写法二，值为变量 --> <div :style="big"> </div> </template> <script> export default { data(){ return { s1:{color: 'red'}, s2:{fontSize: '18px'}, big: { fontSize: '20px' } } } } </script>
-
-
-
class绑定-
:class=""值为css中已定义的样式名称 -
:class=""值的写法：-
<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-model="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="hobby" value="篮球">篮球 <input type="checkbox" v-model="hobby" value="足球">足球 <input type="checkbox" v-model="hobby" value="排球">排球 <!-- 下拉框 --> <select v-model="word"> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> </div> </template> <script> export default { data(){ return { val: '', vals: '', sex: '男', hobby: ['篮球'], //如果有值，该项为默认选中 word: '' } } } </script>
-
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
-
接收父组件传值
-
定义的
prop属性的一个对象，该对象中有四个属性：-
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对象
- mounted
- 能获取到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
2749
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
