Vue指令、v-bind、条件列表渲染、事件修饰、表单绑定（day2）

最新推荐文章于 2023-06-14 19:28:12 发布

xy1677707153

最新推荐文章于 2023-06-14 19:28:12 发布

阅读量988

点赞数

分类专栏： Vue.js

原文链接：https://blog.csdn.net/weixin_41640944/article/details/89462053

版权

Vue.js 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

Vue.js

一、Vue基础

Vue基础1

1.0 前端开发流程规范

前端开发流程规范

1.1 前端框架发展历史

html

  html [1990]----> html5 [2008.1.12]

css

  css 1.0 1996 
  css 2.0 1998
  css 3.0 2001

EcmaScript 

  1997年诞生
  2015  EcmaScript 2015
  2016  EcmaScript 2016          dart语言  vs  javascript

随着前端项目的逻辑越来越复杂和难以维护，那么前端这边引进了后端的架构思想（ MV* ）

    M  Model      数据层
    V  View       视图层
    C  Controller 控制器 ( 业务逻辑 )        MVC
 	P  Presenter  提出者（ Controller 改名得来的 ） MVP
    VM ViewModel  视图模型（ 业务逻辑  VM 是 由  P 改名得来的） MVVM
   
 

    Backbone.js  MVP    2010.10

    Angular.js( 1.0 )   MVC    2010.10

    Angular.ts ( 2.0 )  MVC -> MVVM 2016 目前已经更新到了 Angular9 ( 也属于angular2.0 版本 )

    Vue 1.0   MVVVM  2014/07

    Vue 2.0   MVVM   2016/09

    React 2012 不太认可前端MVC这种架构思想， 你可以将React单纯看做是MVC中V

    github统计量 （ 国际使用量 ）不代表大陆地区       单位是： K

    angular.js   angular.ts       vue             React  

      59.6          49.1          146              134	

    学习难度： Vue < React < Angular( 2.0 )

    前端流行

      移动  web    &&  hybird app( 混合app )

      app
        1. native app ( 安卓  ios  java ME)
        2. webapp ( 应用在浏览器中的app )
        3. Hybird app ( 混合app ) 
           1. webapp 嵌入 第三方原生应用库（ 可以访问原生设备（手机） 的接口权限，比如：照相机 ）



	2016年： 	
		   1. es6
		   2. vue2.0
		   3. angular2.0x
           4. 微信小程序 /  微信小游戏

总结表：

[外链图片转存失败(img-gPXfNxp0-1566392980777)(E:\工作文件\2019-三阶段-授课笔记\2\img\前端框架时间图.png)]

前端js框架到底在干嘛! 为什么要用？
- js框架帮助开发者写js逻辑代码，在开发应用的时候js的功能划分为如下几点：
  1. 渲染数据
    
    [外链图片转存失败(img-fNS0MhFw-1566392980778)(E:\工作文件\2019-三阶段-授课笔记\2\img\购物车.png)]
  2. 操作DOM
    
    [外链图片转存失败(img-riFZwnJo-1566392980779)(E:\工作文件\2019-三阶段-授课笔记\2\img\2019-01-11-03.gif)]
  3. 操作cookie等存储机制api
    
    [外链图片转存失败(img-qYIFPwnJ-1566392980780)(E:\工作文件\2019-三阶段-授课笔记\2\img\cookie.png)]
- 在前端开发中
  - 难题: 如何高效的操作dom、渲染数据是一个前端工程师需要考虑的问题，而且当数据量大，流向较乱的时候，如何正确使用数据，操作数据也是一个问题？？？
    - 解决:
      - 而js框架对上述的几个问题都有自己趋于完美的解决方案，
      - 开发成本降低。高性能高效率。
      - 唯一的缺点就是需要使用一定的成本来学习。

1.2 初始Vue.js

官网地址：英文官网中文官网

Vue.js框架项目介绍

作者：尤雨溪

[外链图片转存失败(img-kr9HzB93-1566392980781)(E:\工作文件\2019-三阶段-授课笔记\2\img\尤雨溪.jpg)]-
Vue.js是尤雨溪的个人项目
Vue.js也是一个MVVM框架
Vue.js它是一个单项数据流的框架
Vue.js是一个Js渐进式框架
- 渐进式：越学越难

学习Vue的必要性

	Vue近几年来特别的受关注，三年前的时候angularJS霸占前端JS框架市场很长时间，接着react框架横空出世，因为它有一个特性是虚拟DOM，从性能上碾轧angularJS，这个时候，vue1.0悄悄的问世了，它的优雅，轻便也吸引了一部分用户，开始收到关注，16年中旬，VUE2.0问世，这个时候vue不管从性能上，还是从成本上都隐隐超过了react，火的一塌糊涂

	学习vue是现在前端开发者必须的一个技能

1.3 MV*模式介绍

MV*模式图示

1.4 Vue实现数据绑定的原理

书写第一个Vue案例

Vue深入响应式原理图

[外链图片转存失败(img-Gv4ZzXN4-1566392980781)(E:\工作文件\2019-三阶段-授课笔记\2\img\data.png)]

 // Vue 底层原理 

  // 目的： 使用原生js来实现Vue深入响应式 

  var box = document.querySelector('.box')

  var button = document.querySelector('button')

  var data = {
    name: 'Jick'
  }

  // 观察者对象

  var observer = {...data} 

  // es5提供的api方法,这个方法不兼容ie8以及以下
  // Object.defineProperty(对象，对象的属性，对象属性的修饰符 )



  Object.defineProperty(  data,'name',{
    // get/set  统称为: '存储器'
    get () {
      return  observer.name // 初始化赋值一个值给name属性
    },
    set ( val ) {
      console.log( val )
      box.innerHTML = val
    }
  })

  button.onclick = function () {
    data.name = "Rose"
  }

  box.innerHTML = data.name

面试题/理解：如何理解深入响应式原理？
- Vue是通过数据劫持和事件的订阅发布来实现的，数据劫持指的是Vue通过observer观察者对象对data选项中的数据进行getter和setter设置【 Object.defineProperty 】，事件的订阅发布指的是Vue通过事件来监听，通知Vue进行视图更新
  - 监听：选项/watch
- vuex的双向绑定原理?
  采用了数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性是setter,getter,在数据变动时发布消息给订阅者并触发相应的监听回调

Vue基础2

2.1 模板语法

mustache 语法中是支持写js的

用法：
- 内容：必须加 {{ js语法 }}
- 属性: 属性中属性值可以直接写js语法，并且属性值中的数据相当于全局变量
  - 给一个标签加一个自定义属性/已有属性
```
img中的src就是已有属性
<img src = "" /> 

//data-index就是自定义属性 ， web网页中建议我们使用data-形式来定义自定义属性
<img data-index = "0" />
```
  - 思考： Vue现在想要在html中使用自己的属性，并且要和他的语法和数据结合？
    - 咋整？
    - 分析：如何我能够标识出哪一个属性是具有vue标志的那就好了,也就是属性前加 v
      - Vue给这种带v标识的属性，起了一个名字： 指令【借鉴angular 】
```
<div v-html = "msg">
    
</div>
```
研究它js的支持性
- 数据类型
  - 市场上js的数据类型分类有两种？
    - 第一种
      - 初始数据类型： number string null undefine boolean
      - 引用数据类型: Object [ function array … ]
    - 第二种
      - 基础数据类型: number string boolean
      - 特殊数据类型： null undefine
      - 复杂数据类型； Object [ function array …]
- 输出语法
  - console
  - alert
- 表达式 / 运算符
  - 三元表达式
总结;
- null 和 undefined 是不会显示的，其他数据类型都是支持的，可以显示的
- 挂载在window身上的全局属性，我们都不能用的：比如; console alert
- {{ }} 不写流程控制
  - for
  - if
  - while
  - do…while
- {{}} 支持三元表达式，同样也支持运算符
  - 短路原则也是支持的

2.2 指令

指令的目的是做什么：操作DOM

解释 : MVVM vm -> v 数据驱动

所以：今天开始，我们不想二阶段一样操作dom，改成操作数据，数据要想操控DOM,那么我们需要依赖指令，因为指令是直接绑定在dom身上的

v-html 转义输出，也就是可以解析 xml 数据
v-text：非转义输出，也就是无法解析 xml 类型数据

扩展：什么是 XML？
- XML 指可扩展标记语言（EXtensible Markup Language）。
- XML 是一种很像HTML的标记语言。
- XML 的设计宗旨是传输数据，而不是显示数据。
- XML 标签没有被预定义。您需要自行定义标签。
- XML 被设计为具有自我描述性。
- XML 是 W3C 的推荐标准。
XML和HTML的区别：
- XML 不是 HTML 的替代。
- XML 和 HTML 为不同的目的而设计：
  - XML 被设计用来传输和存储数据，其焦点是数据的内容。
  - HTML 被设计用来显示数据，其焦点是数据的外观。
- HTML 旨在显示信息，而 XML 旨在传输信息。

v-bind

将数据和属性进行单向数据绑定：将vue中数据赋值给属性值

<img v-bind:src = "src" />
<div v-bind:class = "">
    
</div>
<div v-bind:style = "">
    
</div>

简写形式

<img v-bind:src="src" alt="">
<img :src="src" alt="">

类名绑定

用法

对象形式用法

    <p :class = "{ bg: true,size: true }"></p>
    <p :class = "{ bg: true,size: false }"></p>
    <p :class = "{ [classA]: true,[classB]: true }"></p>

数组形式用法

    <p :class = "[ 'size','bg' ]"></p>
    <p :class = "[ classA,classB ]"></p>
    <p :class = "[ classA,classB,5>3?'a':'b']">  </p>

样式绑定

用法

对象形式用法

<p :style = "{width: '100px',height: '100px',background: 'yellow'}"></p>
<p :style = "styleObj"></p>
这里的styleObj包含了第一条里面的样式

数组形式用法

```html
<p :style = "[{width:'100px',height: '100px'},{ background: 'green'}]"></p>
<p :style = "[size,bg]"></p>
data：{

}
```

2.3 条件渲染

v-if
v-else-if
v-else

v-show 条件展示

 <h3> 条件渲染 - 单路分支 </h3>
<p v-if = "flag"> A </p>
//这里的flag值为true则页面显示A

<h3> 条件渲染 - 双路分支 </h3>
<p v-if = "flag"> A </p>
<p v-else > B </p>
//这里默认true显示A，如果在root中修改flag值则view中A消失，B出现

<h3> 条件渲染 - 多路分支 </h3>
<p v-if = "type === '美食'"> 美食 </p>
<p v-else-if = " type === '游戏' "> 游戏 </p>
<p v-else> 睡觉 </p>
//这里可以有多个 v-else-if 如果v-if v-else-if都不满足条件则显示v-else
<h3> 条件展示 </h3>

<p v-show = " showFlag "> 条件展示 </p>
//当不满足条件时，是p标签消失是在行内样式中加入了display：none

思考总结

思考： v-if  vs  v-show  
      1. 效果看起来一样
      2. why Vue要出两个相似的指令？
        v-if控制的是元素的存在与否
        v-show控制的是元素的display:none属性

思考？ 如果出事条件为假时？ v-if   v-show 谁的性能损耗较高？
v-show

总结： 项目中如何选择哪一个？
频繁切换用  v-show
如果不是很频繁的切换，那我们用 v-if

2.4 列表渲染

v-for 指令

<h3> 数组 </h3>
<ul>
    <li v-for = "(item,index) in arr" :key = " index ">
        {{ item }} -- index{{ index }}
    </li>
</ul>
<h3> 对象 </h3>
<ul>
    <li v-for = "(item,key,index) of obj" :key = "index">
        {{ item }} -- {{ key }} -- {{ index }}
    </li>
</ul>
<h3> json </h3>
<ul>
    <li v-for = "item in json" :key = "item.id">
        <span> 商品名称： {{ item.shop_name }} </span>
        <span> 商品价格： {{ item.price }} </span>
    </li>
</ul>

<h3> 循环嵌套 </h3>

<ul>
    <li v-for = "item in lists" :key = "item.id">
        <h3>  商品类型： {{ item.shop_name }} </h3>
        <ul>
            <li v-for = "item in item.type" :key = "item.id">
                <p> 制造商： {{ item.maker }} </p>
            </li>
            <!-- <li v-for = "ele in item.type" :key = "ele.id">
<p> 制造商： {{ ele.maker }} </p>
</li> -->
        </ul>
    </li>
</ul>

<h3> 循环number / string  </h3>

<p v-for = "item in 10"> {{ item }} </p>
<p v-for = "item in 'abc'"> {{ item }} </p>

总结：
- 1. 列表渲染参数可以写三个，分别为 item key index
- 1. 列表渲染，要在渲染的元素身上加一个key，作为这个元素唯一的标识 ,
    1. 思考: 这是为什么？
    2. 这个key最好是id,因为id唯一？思考：为什么不能是index
- 1. 循环嵌套式，参数名称是可以一致的
- 1. in / of 都可以使用

2.5 事件处理器

v-on

v-on：click等同于**@click**

    <button @click="argumentHandler( a,b,$event )"> 事件参数 </button>
    <button @mousedown="argumentHandler( a,b,$event )">test</button> 

new Vue({
el:"#app"
methods:{// methods称之为方法 ，里面存储是事件处理程序
argumentHandler(a, b, e) {
        // 思考： 如果我想在这个方法中使用事件对象，咋整？
        console.log(e.target)
        console.log(a + b)
      }
}
})
如果打印的是e则输出的是mouseevent鼠标事件，如果打印的是是e.target输出的就是点击的这个button按钮

事件修饰符

事件修饰符--修饰事件
<div class="big" @click.stop='bigHandler'>
      <div class="middle" @click.stop="middleHandler">
        <div class="small" @click.stop="smallHandler"></div>
      </div>
</div>
阻止事件冒泡：stopPropagation()，在vue中用.stop修饰click事件就能阻止事件冒泡
取消默认行为：.prevent  例：
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

按键修饰符

<input type="text" @keyUp.13="getValue">
<input type="text" @keyUp.enter="getValue">
Vue 提供了绝大多数常用的按键码的别名：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

2.6 表单控件绑定

v-model
- 双向数据绑定
  - VM 改变 V随之改变
  - V改变， VM也随之改变
- v-model只用于表单
  - 理由： v-model默认绑定value属性
- 技巧：看到表单直接 v-model

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。
       
修饰符：
    1.lazy
    在v-model.lazy可以将input实时更新事件转变成change事件，失去焦点才会触发
    2.trim
    在v-model.trim自动过滤用户输入的首尾空白字符
    3.number
    在v-model.number自动将用户的输入值转为数值类型

你可以用 v-model 指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

修饰符：
1.lazy
在v-model.lazy可以将input实时更新事件转变成change事件，失去焦点才会触发
2.trim
在v-model.trim自动过滤用户输入的首尾空白字符
3.number
在v-model.number自动将用户的输入值转为数值类型