vue _DAY1
阅读原文时间:2023年07月09日阅读:2

一、VUE概念?

Vue.js  (打包工具Webpack)

Vue.js 是最流行的前端框架(可以用于手机App开发,借助Weex)

Vue.js 和 Angeular、React.js(React是最流行的前端框架(开发网站和手机App))一起成为三大主流框架

Vue只关注视图层,方便与第三方库项目整合。

前端的主要工作?

前端主要负责MVC的V这一层主要工作就是和界面打交道

04

二、为什么要学习流行框架?

学习框架后会提高开发效率

提高前端效率的开发历程 原生JS –> Jquery之类的类库 ->前端模板引擎 –>Angular.js

·前端模板引擎

[

{id:1,name:’zs1’},

{id:2,name:’zs2’},

{id:3,name:’zs3’},

]

渲染成一个表格,按照id从小到大排序,调用模板引擎进行渲染。

所以Vue.js减少不必要的dom操作,提高了渲染效率,双向数据绑定概念[通过框架提供的指令,我们只需要关注业务逻辑处理,不在关心dom如何渲染]

在Vue中,一个核心概念,就是让用户不再操作DOM元素,解放了双手。

三、框架和库的区别?

框架是一套完整的解决方案,项目如果需要更换框架,则需要重新构架。

-node中 epress

库能提供某一个小程序,对项目入侵性较小,一个库无法满足某些需求,则可以切换到其他库。

  1. 从Jquery切换到Zepto
  2. 从EJS切换到art-template

四、Node中MVC和前端中MVVM的区别?

View视图层进一步完善

五、v-cloak、v-text、v-html的基本使用?

1.网速很慢请求速度也比较慢,先导入包然后再创建自己的script方法

v-cloak 指令 属性选择器,默认display-none 解决插值表达式闪烁问题

v-test也可以渲染。

区别:默认v-test无闪烁问题。

插值表达式:++++++++++++++{{msg}}----------------------前后可以放任一内容

v-test    Msg     解析到标签时会直接将msg将其替换。

2.v-html

v-html也会覆盖变量内容

3.

不能直接写mytitle,要告诉程序这是一个变量,正确写法如下:

把(要绑定的变量)v-bind:title=”变量+表达式”解析的结果当作表达式

v-bind另一种表达方法为  :

总结:

Vue指令之`v-bind`的三种用法

直接使用指令`v-bind`

使用简化指令`:`

在绑定的时候,拼接绑定内容:`:title="btnTitle + ', 这是追加的内容'"`

4.实现需求:点击按钮显示一句话

另一种实现方法:

Vue中时间绑定机制:v-on

(其中alert会被认为是变量,没有被定义,所以报错。)

Show方法会从下图的methods中寻找

保存运行会弹出框’Hello’

5.还可以把v-on:click改为 v-on:mouseover

六、跑马灯效果制作

第一步:导入Vue包

第二步:创建一个控制区

Var vam=new Vue({得到实例对象

el:’#app’指定控制元素

data

{msg:  ’稳住,我们能赢’

}

第三步:渲染

第四步:创建按扭(绑定点击事件)

第五步:按扭时间处理函数中写相关业务逻辑代码(msg,调用substring进行字符串截取操作,把第一个字符截取放到最后位置)

第六步:自动截取功能把五步代码放到计时器里

在nm实例中,想调用data上或method上的方法,必须通过this.数据属性名或this.方法名进行访问,这里的this就表示我们new出来的对象。

VM会监听自己身上data中所有数据的改变,实现data的同步。

好处:程序员只需要关心数据不需要关心DOM页面。

防止定时器点击多次加速问题

每次清除了定时器后,需要把intervalid置为nulll

实验结果:

七、时间修饰符

触发click,冒泡终结。

+ .stop       阻止冒泡

+ .prevent    阻止默认事件

+ .capture    添加事件侦听器时使用事件捕获模式

+ .self       只当事件在该元素本身(比如不是子元素)触发时触发回调

+ .once       事件只触发一次处理

八、双向数据绑定(唯一指令)

Msg定义的字符会帮助我们挂载到window.vm的msg上

Vm.msg 可以直接修改页面字符 (单向)

标签无法发生交互行为

属性绑定v-bind将msg进行属性绑定(单向)

v-model`数据绑定(双向,只能运用在表单元素 input select )

九、计算器案例

1.操作符

计算器计数的方法:

总结 :框架

十、属性设置class类样式

1. 数组

```

这是一个邪恶的H1

```

  1. 数组中使用三元表达式

```

这是一个邪恶的H1

```

3. 数组中嵌套对象

```

这是一个邪恶的H1

```

  1. 直接使用对象

```

这是一个邪恶的H1

```

2.使用内联样式

1. 直接在元素上通过 `:style` 的形式,书写样式对象

```

这是一个善良的H1

```

2. 将样式对象,定义到 `data` 中,并直接引用到 `:style` 中

+ 在data上定义样式:

```

data: {

h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }

}

```

+ 在元素中,通过属性绑定的形式,将样式对象应用到元素中:

```

这是一个善良的H1

```

3. 在 `:style` 中通过数组,引用多个 `data` 上的样式对象

+ 在data上定义样式:

```

data: {

h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },

h1StyleObj2: { fontStyle: 'italic' }

}

```

+ 在元素中,通过属性绑定的形式,将样式对象应用到元素中:

```

这是一个善良的H1

```

十一、v-for中指令四种使用方式和v-key、v-show的使用

Vue指令之`v-for`和`key`属性

1. 迭代数组

```

  • 索引:{{i}} --- 姓名:{{item.name}} --- 年龄:{{item.age}}

```

2. 迭代对象中的属性

``

{{val}} --- {{key}} --- {{i}}

```

3. 迭代数字

``

这是第 {{i}} 个P标签

```

一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变 v-if 较好。

.2.0+ 的版本里,**当在组件中使用** v-for 时,key 现在是必须的。

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用 “**就地复用**” 策略。如果数据项的顺序被改变,Vue将**不是移动 DOM 元素来匹配数据项的顺序**, 而是**简单复用此处每个元素**,并且确保它在特定索引下显示已被渲染过的每个元素。

为了给 Vue 一个提示,**以便它能跟踪每个节点的身份,从而重用和重新排序现有元素**,你需要为每项提供一个唯一 key 属性。