vue(知识点一)

目录

• 概述
• 实例化参数
• 指令
• 事件指令

• v-for的使用
• v-if、v-show的区别

概述

Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

渐进式: 自底向上增量开发的设计 。
视图组件：带有html结构，样式以及功能的特定模块。
视图：由多个组件构成的大的区间模块。
数据绑定：后台数据更新，前台页面随之变化。
特点:

1. 简单，上手方便
2. .结合Angular指令与react组件思维
3. 生态丰富（插件多） API文档完善

前段框架三驾马车

• vue
• react
• angular

实例化参数(new vue)

el"#app"
选择目标标签
data:{}
指定数据
data(){return {}}
一个函数返回一个对象

指令

1.v-text 会先执行 覆盖 元素中原本的内容 但是插值表达式只会覆盖自己的占位符，默认不会闪烁
2.v-html 渲染 html标签 覆盖元素中原有元素内容
3.v-bind: 简写为: 用来绑定数据 可以写合法的js表达式
4.v-on: 简写为 @ 用来点击事件
5.v-if:DOM渲染与不渲染，不能和v-for一起使用
6.v-for:循环渲染DOM，循环时要加v-key唯一标识，循环时不能和v-if一起使用，可以用computed计算属性再循环
7.v-model:双向数据绑定，一般用于表单
8.v-show:DOM隐藏与显示，和v-if区别在于v-show是利用css控制，实际上DOM已经渲染了，而v-if是渲染与不渲染。如果DOM频繁切换可以用v-show,反之用v-if。

事件指令

1.stop 阻止冒泡 ：外层和里层都有方法 点击里层会产生冒泡，也会触发外层的事件。顺序 从里到外产生事件
2.prevent 阻止浏览器默认行为 ：a标签有浏览器默认行为。
3.capture 捕获事件 ：点击里层先触发外层再触发里层 顺序从外到里产生事件
4.self 只触发自己本身的事件 不会产生冒泡和捕获事件 类似于阻止冒泡 但只针对自己那一层 最外层还是会被最里层冒泡冒到 stop 是阻止所有层次
5.once 事件只执行一次

@click.stop.once.prevent=“num++” 事件修饰符可以同时写多个

事件绑定

1.v-bind: 数据的单向绑定
2.v-modle :数据的双向绑定 这个只能用于表单元素中

tips: 表单元素 radio text address email select checkbox textarea

v-for的使用

1. 可以遍历: 普通数组,对象数组,对象,还可以是数字

<div v-for='(item,key,index) in object' :key='index'>
 {{item}}--{{key}}--{{index}} 
</div>

<div v-for='(count in 10)'> </div>

v-for="item in list"
//list 要遍历的数组
//item 当前遍历的项目

tips:在遍历对象的时候有多个index索引,遍历数字时是从1开始的。绑定key时属性值必须是number或者string

注意：

添加key属性可以优化v-for的渲染
让vue更好识别当前渲染的节点
特别是在排序 ，过滤等操作的时候
不建议key的值使用循环的索引

v-if、v-show的区别
1.v-if 有较高的切换性能 , 适合元素可能永远不会被用户看到。
2.v-show 有较高的初始渲染消耗,适合元素频繁切换。
注意：

v-if隐藏时候直接移除节点， v-show是通过css方式隐藏
频繁切换显示与隐藏用v-show 一次性切换显示用v-if