vue基础

Vue基础

什么是vue

1. 构建用户界面
   • 用vue往html页面中填充数据，非常的方便
2. 框架
   • 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！
   • 要学习vue,就是在学习vue框架中规定的用法！
   • vue的指令、组件（UI结构）、路由、Vuex、vue组件库

Vue的两个特性

1. 数据驱动视图

   • 数据的变化会驱动视图自动更新
   • 好处：程序员只管把数据维护好，页面结构会被Vue自动渲染出来

2. 双向数据绑定

   在网页中,form表单负责采集数据，Ajax负责提交数据

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

MVVM

概念

• 指的是Model、View和ViewModel（vue实例）,它把当前数据源和页面的结构链接在了一起

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PXtQcXhn-1661926292922)(C:\Users\99785\AppData\Local\Temp\1661830376246.png)]

Vue指令和过滤器

1. 内容渲染指令

• v-text

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EBA3Ka0b-1661926292923)(C:\Users\99785\AppData\Local\Temp\1661845067407.png)]

• {{}} 插值表达式

  实际开发用的多，只是内容的占位符，不会覆盖原来的内容

• v-html

  使用场景：渲染带有标签的字符串的时候

2. 属性绑定指令

注意：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中

• v-bind 动态为元素属性绑定值
• 简写是英文的 :
• 如果绑定内容要做字符串拼接，需要给字符串加''

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L3tuTvCB-1661926292923)(C:\Users\99785\AppData\Local\Temp\1661846392818.png)]

3. 事件绑定指令

• v-on可以为元素绑定事件
• 简写方式：@
• 示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hb6L9xzb-1661926292924)(C:\Users\99785\AppData\Local\Temp\1661850307159.png)]

• 事件修饰符

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mq26oMda-1661926292924)(C:\Users\99785\AppData\Local\Temp\1661852525888.png)]

4. 双向绑定指令

• v-model

  • 不操作DOM可以快速获取表单数[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MHg96CNK-1661926292925)(C:\Users\99785\AppData\Local\Temp\1661855499196.png)]

  • v-model的修饰符

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0Z8Jm3cW-1661926292925)(C:\Users\99785\AppData\Local\Temp\1661856577255.png)]

5.条件渲染指令

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yijTSjDM-1661926292926)(C:\Users\99785\AppData\Local\Temp\1661857440835.png)]

• 两者的区别

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8fY1K8KS-1661926292926)(C:\Users\99785\AppData\Local\Temp\1661857586977.png)]

  注意：如果一开始元素就 默认不需要展示，且后期这个元素很可能不被展示，此时v-if效率更高。

  但是实际开发不需要考虑此性能问题~~

  ​

  ​

  ​

  注意：如果一开始元素就 默认不需要展示，且后期这个元素很可能不被展示，此时v-if效率更高。

  但是实际开发不需要考虑此性能问题~~

  ​

  ​

  ​