码迷,mamicode.com
首页 > 其他好文 > 详细

vue _DAY1

时间:2019-07-06 17:50:42      阅读:119      评论:0      收藏:0      [点我收藏+]

标签:请求   截取   多个   pre   项目   学习   自己   +++   回调   

一、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 属性。

vue _DAY1

标签:请求   截取   多个   pre   项目   学习   自己   +++   回调   

原文地址:https://www.cnblogs.com/jyn752430734/p/11143352.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!