Vue入门，基础部分看这一篇就够了_vue 入门基础-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_55734030/article/details/127029679

一.写在开头

1.单词部分

学习Vue之前我们先解决单词问题，知道每个单词的意思，以便更好地学习。

bind 绑定	property 属性
template 模板	methods 方法
prevent 阻止	model 模型
computed 计算	watch 监听
trim 剪切	lazy 延迟
handler 处理器	deep 深度
config 配置	components 组件
global 全局	props 属性
Properties 属性	emit 发送
filters 过滤	transition 过渡
directive 指令	group 组

2.Vue介绍

渐进式 JavaScript框架，vue (读音 /vjuː/，类似于 view)是一套用于构建用户界面的渐进式框架。
为什么要使用Vue
中文文档完毕、上手简单、生态丰富（插件多）、结合了angular的指令与react的组件，虚拟dom
来源
尤雨溪创造，有v2,v3两个版本（建议先学v2）
Vue官网

3.使用方法

1.安装

直接引用script

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

安装脚手架

npm install -g@vue/cli

2.导入与实例化

第一步 script标签里写模板

<div id="app">
     <h1>{{msg}}</h1>
</div>

引入js

<script src="./js/vue.js"></script>

63 实例化 new Vue

new Vue({  
   el: "#app", //指定Vue模板css选择器返回（element)
    data: {
           msg: "你好vue"
            }, //指定数据
         })

4.指令

1.指令介绍

定义：就是v开头的特殊属性，是联系模板与vue实例的桥梁
指令-模板-数据关系如下图
Vue操作让指令联接数据与dom业务操作数据，实现自动更新dom

2.渲染指令

1.文本渲染指令

{{}} {{ }} 中的表达式：每个绑定都只能包含单个表达式

<div>{{msg}}</div> 
new Vue({el:"#app",data:{msg:"hello Vue!"}

v-text文本渲染指令

<div v-text="msg">{{msg}}</div>

v-html html文本渲染指令可以识别HTML标签

2.列表渲染指令

v-for

作用：可以对字符串，数字（v-for也可以接受整数。在这种情况下，它会把模板重复对应次数），列表，对象（也可以遍历对象的属性）进行遍历
v-for 唯标识符 key v-bind：key值必须唯一，为了更好的优化渲染列表简写:key
用法1

<li v-for="item in items">  {{item}}</li>              
data(){return {items:['angular','react','vue','jquery']}}`

用法2 v-for 还支持一个可选的第二个参数，即当前项的索引

<p v-for="（item,index) in list"
 v-bind：key="item">{{index+1}]-{{item}]

3.条件渲染指令

v-if指令用于条件性地渲染一块内容。
这块内容只会在指令的表达式返回真值的时候被渲染。
v-else-if多重条件渲染

<div id="app">
  <div v-if="score>=90">优秀</div>
  <div v-else-if="score>=80">良好</div>
  <div v-else-if="score>=70">中等</div>
  <div v-else-if="score>=60">及格</div>
  <div v-else>不及格，哥们需要努力鸭！</div>
</div>

v-show 根据条件展示元素的选项
面试题v-if与v-show区别
都是用来控制显示与隐藏
v-if是通过dom操作（移出dom节点方式）实现隐藏，v-show通过css方式（display：none）隐藏
频繁切换用v-show反之少量切换v-if

5.修饰符

Vue.js为 v-on 提供了事件修饰符
修饰符是由点开头的指令后缀来表示的,

事件修饰符 ⭐
.stop阻止事件冒泡⭐
.prevent阻止默认行为⭐
.once只响应事件一次⭐
按键修饰符
keydown keyup
使用<input @keyup.enter=“submit”/>
鼠标修饰符
left .right .middle
系统修饰符
alt .ctrl .shift

6.class列表

文本
:class="active“ 没有加单引号的是一个变量不是字符串
⭐对象
< div :class=“{‘active’:flag}”>< /div>
数组
< div :class=“[activeClass,errorClass]”>< /div >

7.style内联样式

css属性驼峰式写法
<div :style="{color:'red',fontSize:'24px'}"></div>

6.Vue选项

el 模板
data 数据
methods 方法
directives 指令

directives:{
"focus":{
update(el,binding){
//el指令所在节点
//binding.value指令的值
}}}

filters 过滤

filters:{
fix(val,len=2){
return Number(val).toFixed(len)
}
}

watch监听
watch监听监听数据的变化执行回调函数 ⭐ 引用数据类型需要添加处理器handler与deep

watch:{ 
"obj":{
handler(nval){
//执行回调函数}，
deep:true  
}
}

7.computed计算
⭐从现有数据计算出新的数据（只读）

computed:{                                                                                   
"total":function(){                                                                                
    return xxx
}
}

props 属性
created 创建完毕
template模板
components 组件⭐⭐⭐
1. 组件作用

组件是vue的一个重要特点
实现多人协作开发
通过组件划分降低开发的难度
实现复用，降低重复劳动
2. 局部组件定义与使用

1，定义组件 注意：template有且只有一个根节点
const step={
template:`<span></span>`
}
2.在父组件中注册
components:{step:step}
3.在组件的模板中使用
<step></step>

3. 传参props⭐⭐⭐⭐⭐
父传子

父传递 <modal  :visible="visible">
子接收 props:{ visible:{type:Boolean,default:false}}
子使用 注意：vue是单向数据流，父组件传递给子组件的props是只读（不能修改）this.visible

子传父

子 this.$emit("update:visible",false)
父 监听事件 修改值
<modal @update:visible="visible=$event">

弹窗组件⭐
动画transition

v-enter-active 进入开始
v-enter-to 进入结束
v-enter-active进入整个状态
v-leave-active离开开始
v-leave-to 离开结束
v-leave-active离开整个状态

使用：引入第三方animate动画库

<link rel="stylesheet"href="./css/animate.css">
<transition name="fade"enter-active-class="animatedslideInDown"  leave-active-class="slideOutDownanimated">
  <imgsrc="./images/sun.jpeg" alt="" width="120"v-if="flag">
</transition>

transaction-group动画组实现列表过渡
tag用什么标签包裹所有的动画组元素
v-move正在移动中的元素

<transition-group tag="div"name="slide"  >
<div class="item" v-for="item in undoList":key="item.name">
.....
</transition-group>

.slide-leave-active{
   animation: slideOut ease 1s;
 position: absolute;
}
.slide-move{
   transition: all ease 1s;
}