一、vue的基本概念

  Vue，读音是/vju:/，是一套用于构建用户界面的渐进式框架，自底层向上应用，Vue的核心库只关注视图层，容易入门，可以和第三方库或者已有的项目进行整合，可以做复杂的单页应用。简单的说，vue是一套前端的开发框架，vue是目前三大主流的框架之一，其他两个框架是:React、Angular。

vue操作

  1. 让指令链接 数据与dom
  2. 业务操作数据，实现自动更新dom

二、前端三大基本框架

vue

react

angular

三、特点

结合了angular的指令与react的组件，虚拟dom

渐进式javascript框架

四、优点

  1. 中文文档完毕
  2. 生态丰富（插件多）
  3. 上手简单
  4. 指令，组件，虚拟dom

五、导入与实例化

1、模板

	<!-- 模板 -->
		<div id="app">
			<h1>{{msg}}</h1>
			<input type="text" v-model="msg"><!-- 指令 -->
		</div>
		<script src="js/vue.min.js"></script>
		<script>
			new Vue({
				el: "#app", //指定模板返回（element）
				data: { //数据
					msg: '你好Vue！'
				}, //指定数据
			})
			//el与data都是固定写法
			//Vue的数据通过指令与模板产生联系
		</script>

2、指令与模板

特点

  1. 就是v开头的特殊属性 它的值预期为javascript单行表达式
  2. 可以渲染实例的值    v-text="msg"
  3. 数学运算  v-text="2+3"
  4. 使用js表达式  v-text="msg.length"
  5. 如果是文本需要加单引号   v-text=" '我爱中国，'+msg"

指令是联系模板与vue实例的桥梁

3、vue的实例

  1. var vm=new Vue（{....}）
  2. vm就是 new Vue创建的实例

4、文本渲染指令

  1. v-text  文本渲染指令
  2. v-html  Html文本渲染指令

5、条件渲染指令

  1. v-if
  2. v-else
  3. v-else-if
  4. v-show
  •          隐藏元素以css的方式
  •          频繁切换用v-if
  •         少量切换用v-if

v-if与v-show的区别（面试题）

  1. 都是用来控制显示与隐藏
  2. v-if是通过dom操作来实现隐藏，v-show通过css方式隐藏
  3. 频繁切换v-show反之v-if

6、遍历指令   v-for

  1. 字符串，数字，列表，对象进行遍历
  2. <p v-for="item in list" v-key="item">{{index+1}}{{item}}</p>
  3. item 遍历的元素（自定义的名称）
  4. index 遍历的下标（键名）
  5. list 被遍历的数据

7、属性绑定

  1. v-bind:title=“msg”
  2. 属性绑定简写形式  ：title=“msg”
  3. ：class：id：disabled（不可选中状态）

8、事件

  1. 事件指令  v-on：click=“num++”
  2. 事件绑定简写  @click=“num++”
  3. 事件的参数
  •          默认传入事件对象  @click=“sayNum”
  •          传入实参3  @click=“sayNum（3）”
  •          传入事件对象，和参数3   @click=“sayNum（$event）”

     4.事件修饰符

  1. .stop阻止事件冒泡
  2. .prevent阻止默认事件
  3. .once只响应一次

     5.按键修饰符  keydown  keyup

  1. .enter 回车
  2. .up上
  3. .down 下
  4. .space 空格
  5. .esc 取消
  6. .del 删除

     6.系统修饰符

     .ctrl   .shift

     7.鼠标修饰符

     .left   .right    .middle

六、表单

v-model=“num”    把num的数据和表单的值绑定在一起

  1. ：value=“num”
  2. @input=“num=$event.target.value"

1、多行

  1. 1个默认值
  2. 选中为true
  3. 未选中为false
  4. 多个值，绑定数组动态添加/移除当前元素的value值

2、表单修饰符

  1.   .lazy
      change 事件触发数据更新
  2.   .number
      强制转换为数字

七、watch 监听

监听数据的变化执行回调函数

模板

watch：{
  "obj":{
   handler(navl){
   //执行回调函数
   },
   deep:true
   }
 }

八、class

  1. 文本   :class="active"   没有加单引号的active是一个变量不是字符串
  2. 对象 :class="{'active':flag}"
  3. 数组  :class="list"

九、style

:style="{color:'red',fontSize:'24px}"

css 属性驼峰式写法

十、前景回顾

1、数组

  1. indexOf（） 查找对应下标
  2. 删除    shift头删   pop尾删   splice 中间删
  3. 添加    unshift 头加  push尾加  splice也可以添加
  4. 反转    reverse
  5. 转字符串  join()
  6. 连接数组  concat()
  7. filter 过滤
  8. forEach 遍历
  9. map 映射
  10. reduce  累计
  11. some 有一个
  12. every 每一个
  13. find 查找符合条件的元素
  14. findIndex 查找符合条件的元素下标
  15. sort 排序

2、字符串

  1. indexOf 查询字符串下标，找不到返回-1
  2. split("") 分割为数组
  3. slice(start,end)切割字符串
  4. subString(start,end)截取字符串（按下标end）
  5. subStr（start，len）截取字符串（按长度len）

3、json

  1. eval（)字符串当js对象
  2. JSON.parse(str)  json 字符串转换为js对象
  3. JSON.stringify(obj)   把对象转换为json字符串

4、本地存储  localStorage

  1. getItem(key)  获取值
  2. setItem(key,value) 存储值
  3. removeItem(key) 删除存储
  4. clear()  清空

十一、vue选项

  1. el  模板
  2. data 数据
  3. methods 方法
  4. filters 过滤
  5. directives 指令
  6. watch 监听
  7. computed  计算

十二、自定义指令

作用： 操作dom： 实例化第三方基于dom的插件

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

<input v-focus="true">

  1. undate, 更新就执行
  2. bind 绑定一次
  3. inserted  插入

十三、过滤、管道

{{3.1415926|fix}}    {{3.1415926|fix(4)}}

filter:{
   fix(val,len=2){
        return NUmber(val).toFixed(len)
     }
 }

val 是过滤前的值；return过滤后的值；len fix 过滤的参数

十四、组件

1、作用

  1. 组件是vue的一个重要的特点
  2. 实现多人协作开发
  3. 通过组件划分降低开发的难度
  4. 实现复用，降低重复劳动

2、组件解释  

组件就是定义好的功能模块

（建议：多用props，少在组件中使用data（降低组件的耦合性））

3、定义与使用

定义:注意：template有且只有一个根节点

const steper={
     template:`<span></span>
  }

在父组件中注册 components：{{steper:stepter}}

在组件的模板中使用<steper> </stepter>

4、传参

父传子 ：

父<modal:visible="visible">
子

props:{

visible:{type:Boolean,default:false}

}

子使用

注意：vue是单向数据流，父组件传递给子组件的paops是只读（不能修改）this.visible

子 this.$emit("update:visible",false)

父 监听事件，修改值

<model @update:value:visible="visible=$event">

5、插槽

插槽：组件的嵌套内容

​​​​​​​父

<modal>
    <input type="text"/>
    <button>确定</button>
</modal>

子组件 模板中使用

template：`<div><slot></slot></div>`

十五、动画

1、两个状态形成过渡  v-show  v-if

2、transition 单个动画元素

属性

  1. name 名称
  2. enter-active-class=“ ” 指定进入class
  3. leave-active-class=“” 指定离开class

# vue.js # 前端 # javascript
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue