一、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
库能提供某一个小程序,对项目入侵性较小,一个库无法满足某些需求,则可以切换到其他库。
四、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. 数组
```
```
```
```
3. 数组中嵌套对象
```
```
```
```
2.使用内联样式
1. 直接在元素上通过 `:style` 的形式,书写样式对象
```
```
2. 将样式对象,定义到 `data` 中,并直接引用到 `:style` 中
+ 在data上定义样式:
```
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}
```
+ 在元素中,通过属性绑定的形式,将样式对象应用到元素中:
```
```
3. 在 `:style` 中通过数组,引用多个 `data` 上的样式对象
+ 在data上定义样式:
```
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
h1StyleObj2: { fontStyle: 'italic' }
}
```
+ 在元素中,通过属性绑定的形式,将样式对象应用到元素中:
```
```
十一、v-for中指令四种使用方式和v-key、v-show的使用
Vue指令之`v-for`和`key`属性
1. 迭代数组
```
```
2. 迭代对象中的属性
``
```
3. 迭代数字
``
这是第 {{i}} 个P标签
```
一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变 v-if 较好。
.2.0+ 的版本里,**当在组件中使用** v-for 时,key 现在是必须的。
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用 “**就地复用**” 策略。如果数据项的顺序被改变,Vue将**不是移动 DOM 元素来匹配数据项的顺序**, 而是**简单复用此处每个元素**,并且确保它在特定索引下显示已被渲染过的每个元素。
为了给 Vue 一个提示,**以便它能跟踪每个节点的身份,从而重用和重新排序现有元素**,你需要为每项提供一个唯一 key 属性。
手机扫一扫
移动阅读更方便
你可能感兴趣的文章