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
库能提供某一个小程序，对项目入侵性较小，一个库无法满足某些需求，则可以切换到其他库。
- 从Jquery切换到Zepto
- 从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>
```
- 数组中使用三元表达式
```
<h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1>
```
3. 数组中嵌套对象
```
<h1 :class="['red', 'thin', {'active': isactive}]">这是一个邪恶的H1</h1>
```
- 直接使用对象
```
<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 属性。
