《分布式微服务电商》专题(十)-电商项目前端Vue基础语法

文章目录

​​1.MVVM思想​​​​2.安装​​​​3.测试使用​​​​4.v-text、v-html、v-ref​​​​5.单向绑定v-bind​​​​6.双向绑定v-model​​​​7.v-on事件​​​​8.v-for遍历​​​​9.v-if和v-show​​​​10.v-else和v-else-if​​​​11.缩写@​​

1.MVVM思想

M：model包括数据和一些基本操作V：view视图，页面渲染结果VM：View-model，模型与视图间的双向操作（无需开发人员干涉）

视图和数据通过VM绑定起来，model里有变化会自动地通过​​Directives​​​填写到视​​view​​​中，视图表单中添加了内容也会自动地通过​​DOM Listeners​​保存到模型中。

教程：​​ ViewModel Model只要我们Model发生了改变，View上自然就会表现出来。当用户修改了View，Model中的数据也会跟着改变。把开发人员从D0M操作中解放出来，那关注点放在如何操作Model上。

2.安装

-​​js​​​并用​​

5.单向绑定v-bind

问题：花括号只能写在标签体内（​​

插值表达式只能用在标签体里，如果我们这么用​​​​​是不起作用的，所以需要 ​​​​跳转这种用法

解决：用​​v-bind:​​​，简写为​​:​​​。表示把​​model​​​绑定到​​view​​​。可以设置​​src、title、class​​等

在浏览器里vm.link="baidu.com"，此处vue数据改了，dom里跳转链接也改了class里有哪些内容可以通过vue数据的bool值添加删除，而在style中代表的是k:v值。也可以把v-bind:简写成: {{}}必须有返回值

6.双向绑定v-model

v-bind只能从model到view。v-model能从view到model

7.v-on事件

事件监听可以使用 ​​v-on​​​ 指令​​​v-on:事件类型="方法"​​​ ，可以简写成​​@事件类型="方法"​​

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。

Vue.js 通过由点 ​​.​​ 表示的指令后缀来调用修饰符。

.stop - 阻止冒泡.prevent - 阻止默认事件.once - 只触发一次

8.v-for遍历

可以遍历 数组[] 字典{} 。对于字典​​