vue _DAY1

一、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     解析到标签</h4>时会直接将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 可以直接修改页面字符 （单向）

</h4>标签无法发生交互行为

属性绑定v-bind将msg进行属性绑定（单向）

v-model`数据绑定（双向，只能运用在表单元素 input select ）

九、计算器案例

1.操作符

计算器计数的方法:

总结 :框架

<div id="app">

<input type="text" v-model="n1">

<select v-model="opt">

<option value="0">+</option>

<option value="1">-</option>

<option value="2">*</option>

<option value="3">÷</option>

</select>

<input type="text" v-model="n2">

<input type="button" value="=" v-on:click="getResult">

<input type="text" v-model="result">

</div>

十、属性设置class类样式

1. 数组

```

<h1 :class="['red', 'thin']">这是一个邪恶的H1</h1>

```

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

```

<h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1>

```

3. 数组中嵌套对象

```

<h1 :class="['red', 'thin', {'active': isactive}]">这是一个邪恶的H1</h1>

```

1. 直接使用对象

```

<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1>

```

2.使用内联样式

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

```

<h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1>

```

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

+ 在data上定义样式：

```

data: {

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

}

```

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

```

<h1 :style="h1StyleObj">这是一个善良的H1</h1>

```

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

+ 在data上定义样式：

```

data: {

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

h1StyleObj2: { fontStyle: 'italic' }

}

```

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

```

<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>

```

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

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

1. 迭代数组

```

<ul>

<li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}</li>

</ul>

```

2. 迭代对象中的属性

``

<!-- 循环遍历对象身上的属性 -->

<div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>

```

3. 迭代数字

``

<p v-for="i in 10">这是第 {{i}} 个P标签</p>

```

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

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

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

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