Vuejs 模板语法
目录
插值操作 Mustache语法
- Mustache语法(也就是双大括号)。
v-once
- 该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)
- 该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变。
v-html
- 从服务器请求到的数据本身就是一个HTML代码
- 如果我们直接通过{{}}来输出，会将HTML代码也一起输出。
- 但是我们可能希望的是按照HTML格式进行解析，并且显示对应的内容。
- 可以使用v-html指令
- 该指令后面往往会跟上一个string类型
- 会将string的html解析出来并且进行渲染
v-text
- v-text作用和Mustache比较相似：都是用于将数据显示在界面中
- v-text通常情况下，接受一个string类型
v-pre
- v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。
- 比如下面的代码：
- 第一个h2元素中的内容会被编译解析出来对应的内容
- 第二个h2元素中会直接显示{{message}}
v-cloak
- 在某些情况下，我们浏览器可能会直接显然出未编译的Mustache标签。
- 在vue解析之前，div中有一个属性v-cloak，解析之后就删除没有这个属性了。
- cloak: 斗篷
v-bind 动态的改变属性
- 除了内容需要动态来决定外，某些属性我们也希望动态来绑定。
- 比如动态绑定a元素的href属性
- 比如动态绑定img元素的src属性
- 这个时候，我们可以使用v-bind指令：
v-bind基础
- v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值
- 还是有很多的，比如图片的链接src、网站的链接href、动态绑定一些类、样式等等
v-bind语法糖
- v-bind有一个对应的语法糖，也就是简写方式
v-bind绑定class
- 通过绑定一个对象，这个对象是键值对的方式，键为类名，值为布尔值，布尔值为true表示类绑定的有这个类名，反之则没有。这个布尔值放在vue对象中的数据部分进行管理控制。
- 绑定方式：
- 对象语法 对象语法的含义是:class后面跟的是一个对象
- 示例：
- 绑定方式：
- 数组语法 数组语法的含义是:class后面跟的是一个数组
v-bind绑定style
- 可以利用v-bind:style来绑定一些CSS内联样式。
- 在写CSS属性名的时候，比如font-size 我们可以使用驼峰式 (camelCase)
- fontSize 或短横线分隔 (kebab-case，记得用单引号括起来) ‘font-size’
计算属性 computed
- 在模板中可以直接通过插值语法显示一些data中的数据。
- 但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示
- 比如我们有firstName和lastName两个变量，我们需要显示完整的名称。
- 但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}} {{lastName}}
- 我们可以将上面的代码换成计算属性：我们发现计算属性是写在实例的computed选项中的。
- 计算属性中也可以进行一些更加复杂的操作，比如下面的例子：
计算属性的setter和getter
- 每个计算属性都包含一个getter和一个setter
计算属性的缓存
- 计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。
v-on 事件监听
- v-on:click可以写成 @click
v-on参数
- 当通过methods中定义方法，以供@click调用时，需要注意参数问题：
- 情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。
- 但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去
- 情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。
v-on修饰符
- 在某些情况下，我们拿到event的目的可能是进行一些事件处理。
- Vue提供了修饰符来帮助我们方便的处理一些事件：
v-if、v-else-if、v-else
- Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件
- v-if的原理：
- v-if后面的条件为false时，对应的元素以及其子元素不会渲染。
- 也就是根本没有不会有对应的标签出现在DOM中。
条件渲染案例
- 用户在登录时，可以切换使用用户账号登录还是邮箱地址登录。类似如下情景：
- 如果我们不希望Vue出现类似重复利用的问题，可以给对应的input添加key，并且我们需要保证key的不同
v-show
- v-show的用法和v-if非常相似，也用于决定一个元素是否渲染：
- v-if和v-show都可以决定一个元素是否渲染，那么开发中我们如何选择呢？
- v-if当条件为false时，压根不会有对应的元素在DOM中。
- v-show当条件为false时，仅仅是将元素的display属性设置为none而已。
- 开发中如何选择呢？
- 当需要在显示与隐藏之间切片很频繁时，使用v-show 当只有一次切换时，通过使用v-if
v-for
v-for遍历数组
- 格式如下：item in items的形式。
v-for遍历对象
v-for遍历对象
- 比如某个对象中存储着你的个人信息，我们希望以列表的形式显示出来。
组件的key属性
- 示例：
检测数组更新
- 因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新。
- Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。
- splice 关键是第二个参数
- 通过数组下标改变不会改变界面：
- 示例：
图书购物车案例
- 代码实现：HTML、CSS
- js代码
JavaScript高阶语法
- 方式1：
- 方式2：
- 示例：
- 高阶函数，函数可以作为参数传入另外一个函数里面
- map：
- reduce
- 连续操作：
- 方式2：
v-model 表单绑定 (双向绑定)
- 表单控件在实际开发中是非常常见的。特别是对于用户信息的提交，需要大量的表单。
- Vue中使用v-model指令来实现表单元素和数据的双向绑定。
v-model原理
v-model：radio
- 当存在多个单选框时
扫一扫
890
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
