vue-基础和动态绑定

标签:option   邂逅   事件监听   优化   fir   mustache   org   驼峰   数据   

一. 邂逅Vuejs 基础

1.1. 认识Vuejs

let(变量)/const(常量)

字符串*数字=NAN

1.2. 安装Vue

CDN引入

开发环境版本,包含了有帮助的命令行警告

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

生产环境版本,优化了尺寸和速度

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

下载引入

开发环境 https://vuejs.org/js/vue.js

生产环境 https://vuejs.org/js/vue.min.js

npm安装

后续通过webpack和CLI的使用,我们使用该方式。

1.3. Vue的初体验

Hello Vuejs

mustache -> 体验vue响应式

{}中包含了el属性:该属性决定了这个Vue对象挂载到哪一个元素上,很明显,我们这里是挂载到了id为app的元素上

{}中包含了data属性:该属性中通常会存储一些数据
这些数据可以是我们直接定义出来的,比如像上面这样。
也可能是来自网络,从服务器加载的。

image-20201213133839900

Vue列表展示

v-for

后面给数组追加元素的时候, 新的元素也可以在界面中渲染出来

image-20201213134113984

Vue计数器小案例

事件监听: click -> methods

image-20201213134201241

1.4. Vue中的MVVM

image-20201213134311078

1.5. 创建Vue时, options可以放那些东西

el:

类型:string | HTMLElement
作用:决定之后Vue实例会管理哪一个DOM。

data:

类型:Object | Function (组件当中data必须是一个函数)
作用:Vue实例对应的数据对象。

methods:

类型:{ [key: string]: Function }
作用:定义属于Vue的一些方法,可以在其他地方调用,也可以在指令中使用。

生命周期函数

image-20210103210300237

image-20210103210334112

image-20210103210406923

二.插值语法

mustache语法

image-20201213134711999

v-once

该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)
该指令表示元素和组件(组件后面才会学习)只渲染一次,不会随着数据的改变而改变。

image-20201213134747208

v-html

如果我们直接通过{{}}来输出,会将HTML代码也一起输出。
但是我们可能希望的是按照HTML格式进行解析,并且显示对应的内容。
如果我们希望解析出HTML展示
可以使用v-html指令
该指令后面往往会跟上一个string类型
会将string的html解析出来并且进行渲染

image-20201213134835360

v-text

v-text作用和Mustache比较相似:都是用于将数据显示在界面中
v-text通常情况下,接受一个string类型

image-20201213134942645

v-pre: {{}}

v-pre用于跳过这个元素和它子元素的编译过程,用于显示原本的Mustache语法。
比如下面的代码:
第一个h2元素中的内容会被编译解析出来对应的内容
第二个h2元素中会直接显示{{message}}

image-20201213135016011

v-cloak: 斗篷

在某些情况下,我们浏览器可能会直接显然出未编译的Mustache标签。

image-20201213135044988

三. v-bind

前面我们学习的指令主要作用是将值插入到我们模板的内容当中。

但是,除了内容需要动态来决定外,某些属性我们也希望动态来绑定。

比如动态绑定a元素的href属性

比如动态绑定img元素的src属性

这个时候,我们可以使用v-bind指令:

作用:动态绑定属性

缩写::

预期:any (with argument) | Object (without argument)

参数:attrOrProp (optional)

3.1. v-bind绑定基本属性

v-bind:src

:href

在开发中,有哪些属性需要动态进行绑定呢?
还是有很多的,比如图片的链接src、网站的链接href、动态绑定一些类、样式等等

image-20201213135751937

3.2. v-bind动态绑定class

绑定方式:对象语法

对象语法: 对象语法的含义是:class后面跟的是一个对象。

用法一:直接通过{}绑定一个类

<h2 :class="{‘active‘: isActive}">Hello World</h2>

用法二:也可以通过判断,传入多个值

<h2 :class="{‘active‘: isActive, ‘line‘: isLine}">Hello World</h2>

用法三:和普通的类同时存在,并不冲突

注:如果isActive和isLine都为true,那么会有title/active/line三个类
<h2 class="title" :class="{‘active‘: isActive, ‘line‘: isLine}">Hello World</h2>

用法四:如果过于复杂,可以放在一个methods或者computed中

注:classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>

绑定方式:数组语法

数组语法的含义是:class后面跟的是一个数组。

数组语法有下面这些用法:

用法一:直接通过{}绑定一个类

<h2 :class="[‘active‘]">Hello World</h2>

用法二:也可以传入多个值

<h2 :class=“[‘active’, ‘line‘]">Hello World</h2>

用法三:和普通的类同时存在,并不冲突

注:会有title/active/line三个类
<h2 class="title" :class=“[‘active’, ‘line‘]">Hello World</h2>

用法四:如果过于复杂,可以放在一个methods或者computed中

注:classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>

3.3. v-bind动态绑定style

我们可以利用v-bind:style来绑定一些CSS内联样式。

在写CSS属性名的时候,比如font-size

我们可以使用驼峰式 (camelCase) fontSize

或短横线分隔 (kebab-case,记得用单引号括起来) ‘font-size’

对象语法:

:style="{color: currentColor, fontSize: fontSize + ‘px‘}"

style后面跟的是一个对象类型

对象的key是CSS属性名称

对象的value是具体赋的值,值可以来自于data中的属性

数组语法:

<div v-bind:style="[baseStyles, overridingStyles]"></div>

style后面跟的是一个数组类型

多个值以,分割即可

四. 计算属性

案例一: firstName+lastName

我们知道,在模板中可以直接通过插值语法显示一些data中的数据。
但是在某些情况,我们可能需要对数据进行一些转化后再显示,或者需要将多个数据结合起来进行显示
比如我们有firstName和lastName两个变量,我们需要显示完整的名称。
但是如果多个地方都需要显示完整的名称,我们就需要写多个{{firstName}} {{lastName}}

image-20201213140309141

案例二: books -> price

image-20201213140329432

vue-基础和动态绑定

标签:option   邂逅   事件监听   优化   fir   mustache   org   驼峰   数据   

原文地址:https://www.cnblogs.com/zgboy/p/14260592.html

版权声明:完美者 发表于 2021-01-13 10:41:17。
转载请注明:vue-基础和动态绑定 | 完美导航

暂无评论

暂无评论...