Vue的相关指令
目录
1、Vue 是什么
2、插值表达式{{ }}
3、Vue的特点
4、Vue指令
1、内容渲染指令
2、条件渲染指令
v-if 与v-show的区别
v-html,v-text与{{}}的区别
5、事件绑定指令
6、属性绑定指令
7、列表渲染指令
8、表单指令
1、Vue 是什么
概念：Vue 是一个用于 构建用户界面 的 渐进式 框架
vue理解
Vue 是一个用于 构建用户界面 的 渐进式 框架，（vue是js的一个渐进式框架）
具有响应式，数据驱动视图的思想，不推荐直接操作dom，底层封装了dom，
组件开发思想，提供了一些指令，能够提高开发效率，构建单一页面应用
使用步骤：
- 引入Vue
- 准备dom
- 创建Vue实例
- {{ }}插值表达式
创建Vue实例，初始化渲染的核心步骤:
1.准备容器
2.引包(官网) –开发版本/生产版本
3.创建Vue实例 new Vue()
4.指定配置项 el data =>渲染数据
el指定挂载点，选择器指定控制的是哪个盒子
data提供数据
Document
2、插值表达式{{ }}
语法格式：{{ 表达式 }}
作用：把{{}}中的值渲染到页面中
利用表达式进行插值，将数据渲染页面中
注意：(1）使用的数据必须存在( data)
(2）支持的是表达式，而非语句，比如:if for ...
(3）不能在标签属性中使用{{}插值
Document
{{info}}-{{arr}}
3、Vue的特点
1.不需要操作dom（vue底层做了封装，开发人员不需要直接操作dom）
2.响应式: 数据改变---->视图自动改变
响应式原理核心：Object.defineProperty( )
3.组件化开发
. . .
4、Vue指令
指令 v-开头的属性
1、内容渲染指令
v-html / v-text => innerHTML / innerText -------给元素添加内容
语法：v-html = “ data中的数据”
2、条件渲染指令
v-if / v-else-if / v-else, v-show
v-if="表达式" ，当表达式值为true，v-if所作用的元素显示，否则隐藏
v-show="表达式" ，当表达式值为true，v-show所作用的元素显示，否则隐藏
v-if 与v-show的区别
v-if 控制元素显示与隐藏，通过js创建dom元素或删除元素
v-show 通过css的display显示与隐藏
频繁切换元素显示与隐藏用v一show,其余可以用v-if
v-if 可以与v-else-if ,v-else 搭配使用
v-html,v-text与{{}}的区别
内容不改变用{{}}
v-html,v-text可以改变元素的内容
{{}}里的内容要等js引入才显现，有闪烁，闪烁后{{}}消失
5、事件绑定指令
Vue指令v-on
1。作用:注册事件=添加监听+提供处理逻辑
2.语法:
v-on:事件名= "内联语句"
v-on:事件名= "methods中的函数名"
3.简写:@事件名
4.注意:methods函数内的this指向Vue实例传参：
调用方法不传递任何参数，默认第一个形参就是事件对象
传递参数，实参要通过$event
6、属性绑定指令
Vue指令v-bind
1.作用:动态的设置html的标签属性→src url title
2.语法:v-bind:属性名="表达式"
3.注意:简写形式:属性名="表达式"
v-bind：属性=‘data中的数据’
或简写 ：属性=‘data中的数据’
属性灵活时
：属性名=‘js表达式’ 动态绑定
不加：是字符串
7、列表渲染指令
Vue指令v-for
1.作用:基于数据循环，多次渲染整个元素→数组、对象、数字...
2.遍历数组语法:
item每一项， index下标
省略index: v-for = "item in数组"
v-for中的 key
语法:key属性="唯一标识"
作用:给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。
v-for 中的key - 不加key
v-for的默认行为会尝试原地修改元素（就地复用)
注意点:
1.key的值只能是字符串或数字类型
2.key的值必须具有唯一性
3.推荐使用id 作为key (唯一)，不推荐使用index作为key(会变化，不对应)
8、表单指令
Vue指令v-model
1.作用:给表单元素使用，双向数据绑定→可以快速获取或设置表单元素内容
①数据变化→视图自动更新
视图变化→数据自动更新
2.语法:v-model= '变量'
v-model 双向绑定 用于表单元素
v-bind : 属性名=’data中数据' 动态绑定
文本框中：v-model 等价于 : value + @input
$event 事件对象
V-model="数据"等价于:value="数据"+@input="数据=$event.target.value"