vue 做门户网站,北京网站制作西安,网站免费空间哪个好,移动网站功能一、插值操作
1. Mustache 如何将data中的文本数据#xff0c;插入到HTML中呢#xff1f; 我们已经学习过了#xff0c;可以通过Mustache语法(也就是双大括号)。 Mustache: 胡子/胡须. 我们可以像下面这样来使用#xff0c;并且数据是响应式的
2. v-once 但是#xff0…一、插值操作
1. Mustache 如何将data中的文本数据插入到HTML中呢 我们已经学习过了可以通过Mustache语法(也就是双大括号)。 Mustache: 胡子/胡须. 我们可以像下面这样来使用并且数据是响应式的
2. v-once 但是在某些情况下我们可能不希望界面随意的跟随改变 这个时候我们就可以使用一个Vue的指令v-once v-once:
该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)该指令表示元素和组件(组件后面才会学习)只渲染一次不会随着数据的改变而改变。
代码如下
3. v-html 某些情况下我们从服务器请求到的数据本身就是一个HTML代码 如果我们直接通过{{}}来输出会将HTML代码也一起输出。 但是我们可能希望的是按照HTML格式进行解析并且显示对应的内容。 如果我们希望解析出HTML展示,可以使用v-html指令
该指令后面往往会跟上一个string类型会将string的html解析出来并且进行渲染
4. v-text
v-text作用和Mustache比较相似都是用于将数据显示在界面中v-text通常情况下接受一个string类型
5. v-pre v-pre用于跳过这个元素和它子元素的编译过程用于显示原本的Mustache语法。 比如下面的代码
第一个h2元素中的内容会被编译解析出来对应的内容第二个h2元素中会直接显示{{message}}
6. v-cloak 在某些情况下我们浏览器可能会直接显然出未编译的Mustache标签。 当网络较慢网页还在加载 Vue.js 而导致 Vue 来不及渲染这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。使用 v-cloak 指令来解决屏幕闪动的问题 cloak: 斗篷 二、绑定属性 前面我们学习的指令主要作用是将值插入到我们模板的内容当中。 但是除了内容需要动态来决定外某些属性我们也希望动态来绑定。 比如动态绑定a元素的href属性比如动态绑定img元素的src属性
这个时候我们可以使用v-bind指令
作用动态绑定属性缩写:预期any (with argument) | Object (without argument)参数attrOrProp (optional) v-bind用于绑定一个或多个属性值或者向另一个组件传递props值(这个学到组件时再介绍) 在开发中有哪些属性需要动态进行绑定呢 还是有很多的比如图片的链接src、网站的链接href、动态绑定一些类、样式等等 比如通过Vue实例中的data绑定元素的src和href代码如下
1.v-bind语法糖: v-bind有一个对应的语法糖也就是简写方式 在开发中我们通常会使用语法糖的形式因为这样更加简洁。 简写方式如下
2.v-bind绑定class 很多时候我们希望动态的来切换class比如 当数据为某个状态时字体显示红色。 当数据另一个状态时字体显示黑色。 绑定class有两种方式
对象语法数组语法
1)绑定方式对象语法
对象语法的含义是:class后面跟的是一个对象。
对象语法有下面这些用法
用法一直接通过{}绑定一个类
h2 :class{active: isActive}Hello World/h2用法二也可以通过判断传入多个值
h2 :class{active: isActive, line: isLine}Hello World/h2用法三和普通的类同时存在并不冲突
注如果isActive和isLine都为true那么会有title/active/line三个类
h2 classtitle :class{active: isActive, line: isLine}Hello World/h2用法四如果过于复杂可以放在一个methods或者computed中
注classes是一个计算属性
h2 classtitle :classclassesHello World/h22)绑定方式数组语法
数组语法的含义是:class后面跟的是一个数组。 数组语法有下面这些用法
用法一直接通过{}绑定一个类
h2 :class[active]Hello World/h2用法二也可以传入多个值
h2 :class“[‘active’, line]Hello World/h2用法三和普通的类同时存在并不冲突
注会有title/active/line三个类
h2 classtitle :class“[‘active’, line]Hello World/h2用法四如果过于复杂可以放在一个methods或者computed中
注classes是一个计算属性
h2 classtitle :classclassesHello World/h23.v-bind绑定style 我们可以利用v-bind:style来绑定一些CSS内联样式。 在写CSS属性名的时候比如font-size 我们可以使用驼峰式(camelCase) fontSize 或短横线分隔 (kebab-case记得用单引号括起来) ‘font-size’ 绑定class有两种方式 对象语法 数组语法 绑定方式一对象语法
:style{color: currentColor, fontSize: fontSize px}style后面跟的是一个对象类型
对象的key是CSS属性名称对象的value是具体赋的值值可以来自于data中的属性 2) 绑定方式二数组语法
div v-bind:style[baseStyles, overridingStyles]/divstyle后面跟的是一个数组类型多个值以分割即可 三、计算属性
1. 什么是计算属性 我们知道在模板中可以直接通过插值语法显示一些data中的数据。 但是在某些情况我们可能需要对数据进行一些转化后再显示或者需要将多个数据结合起来进行显示 比如我们有firstName和lastName两个变量我们需要显示完整的名称。但是如果多个地方都需要显示完整的名称我们就需要写多个{{firstName}} {{lastName}}
我们可以将上面的代码换成计算属性
OK我们发现计算属性是写在实例的computed选项中的。
2. 计算属性的复杂操作
计算属性中也可以进行一些更加复杂的操作比如下面的例子 3. 计算属性的setter和getter 每个计算属性都包含一个getter和一个setter 在上面的例子中我们只是使用getter来读取。 在某些情况下你也可以提供一个setter方法不常用。 在需要写setter的时候代码如下
4. 计算属性的缓存 我们可能会考虑这样的一个问题 methods和computed看起来都可以实现我们的功能 那么为什么还要多一个计算属性这个东西呢 原因计算属性会进行缓存如果多次使用时计算属性只会调用一次。
