01.vue初始和指令

一.什么是vue,vue学什么?

• vue是一套用于构建用户界面的前端框架,遵守框架的规范,编写业务功能
• 前期主要学习vue的指令,组件,路由,vuex

二.vue的特性

2.1.数据驱动视图

• 数据的变化会驱动视图更新
• 只需要维护数据,页面结构会自动被vue渲染出

2.2.双向数据绑定

• js数据的变化,会被自动渲染到页面上
• 页面上采集的数据发生变化时,会被vue自动获取到,并更新到js数据中

 

 

三.mvvm模式

MVVM是vue实现数据驱动视图和双向绑定的核心原理

 vue版本：

当前，vue共有3个大版本，其中:
1.x版本的vue几乎被淘汰，不再建议学习与使用
2.x版本的vue是目前企业级项目开发中的主流版本
3.x版本的wue 于 2020-09-19发布，生态还不完善，尚未在企业级项目开发中普及和推广

四.vue的指令

指令是vue为开发者提供的模板语法,用于辅助开发者渲染页面的基本结构

常见的指令可以分为6大类

①内容渲染指令

• v-text : 会覆盖标签内部原本内容
• {{}} : 只能用在内容节点,不能用在属性节点
• v-html : 将带有标签的字符串渲染成html结构

②属性绑定指令

• v-bind : 为元素的属性动态绑定值 ,可以简写,如果绑定内容需要拼接,字符串外面应该包裹""

③事件绑定指令

• v-on : 用于绑定事件,简写为@,传参时加(1,$event),第二个参数为内置参数,指触发事件的对象
• 绑定事件时可以加修饰符,如@click.prevent="show",用来阻止默认事件
• 事件修饰符,配合大部分事件使用

 

④双向绑定指令

• v-model : 用于表单数据双向绑定
• v-model指令修饰符

 

⑤条件渲染指令

• v-if : 原理是每次动态创建和移除元素(用于元素默认不需要被展示,后期也可能不需要展示)
• v-show : 原理是动态添加display:none样式,实现元素的显示和隐藏,(用于频繁切换)

⑥列表渲染指令

• v-for : 基于数组来渲染列表,在vue中配合:key使用
  • key的注意事项
    • key只能是数字或字符串
    • key的值必须具有唯一性,通常把id作为key值
    • 不建议使用index,index不具有唯一性,删除和新增都会造成数据紊乱