逆战——vue篇（一）

什么是MVVM
- M => Model(数据模型)
- V => View(视图模型,负责将数据模型转化成UI展现出来，就是那些DOM结构)
- VM => ViewModel(一个同步View和Model的对象)

Vue初体验

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><!-- 1. 引入vue文件 --><script src="./vue2.js"></script>
</head>
<body><!-- 如果超过vue实例的管辖范围，这个{{}}作用就会失效 --><div>{{msg}}</div><div id="app"><!-- 5. 展示数据：通过插值表达式{{}} ，作用是专门用来渲染文本--><h1>{{msg}}</h1></div><script>// 2. 创建vue实例，作用：他会监管我们的html代码var vm = new Vue({// 3. 通过一个el属性来指定vue实例的监管范围,后面跟一个idel: '#app',// 4. 用data属性将要展示的变量存起来,data后面跟一个对象data: {msg: 'hello world'}})</script>
</body>
</html>

Vue常用系统指令

1.插值表达式

数据绑定最常见的形式，其中最常见的是使用插值表达式，写法是{{}} 中写表达式例如：<span>Message: {{ msg }}</span>Mustache 标签将会被替代为对应数据对象上 msg 属性（msg定义在data对象中）的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。
{{}}对JavaScript 表达式支持，例如：{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}
但是有个限制就是，每个绑定都只能包含单个表达式，如下表达式无效：<!-- 这是语句，不是表达式 -->{{ var a = 1 }}
<!-- 这也是语句，不是表达式 -->{{ number++ }} 会报警告：vue2.js:482 [Vue warn]: You may have an infinite update loop in a component render function.
<!-- 流控制也不会生效，请使用三元表达式 -->{{ if (ok) { return message } }}

2.vue指令系统

v-text

<!-- v-text可以将一段文本渲染到指定的元素中,例如： --><div v-text="msg"></div>
new Vue({data:{msg:'hello world'}
});
<!-- 输出结果：--><div>hello world</div>

v-html

差值表达式和v-text会将数据解释为纯文本，而非 HTML 。
为了输出真正的 HTML ，你需要使用 v-html 指令：
例如：
<div v-html="rawHtml"></div>new Vue({data:{rawHtml:'<h1>hello world</h1>'}
})
被插入的内容都会被当做 HTML,但是对于没有HTML标签的数据绑定时作用同v-text和{{}}

v-bind

1、作用：可以给html元素或者组件动态地绑定一个或多个特性，例如动态绑定style和class
2、举例：1、img的src从imageSrc变量中取得<img v-bind:src="data:imageSrc" >
2、从classA, classB两个变量的值作为class的值，结果是：<div class="A B">classA, classB</div>        <div v-bind:class="[classA, classB]">classA, classB</div>
3、isRed变量如果为true，则class的值为red，否则没有<div v-bind:class="{ red: isRed }">isred</div>
4、div的class属性值一定有classA变量的值，而是否有classB和classC变量的值取决于isB和isC是否为true，二者一一对应<div v-bind:class="[classA, { classB: isB, classC: isC }]">数组对象</div>
5、变量加常量<div v-bind:style="{ fontSize: size + 'px' }">size22</div>
6、变量加常量的另一种写法<img v-bind="{src:imageSrc+'?v=1.0'}" >
7、对象数组<div v-bind:style="[styleObjectA, styleObjectB]">styleObjectA, styleObjectB</div>

3、缩写形式<img :src="data:imageSrc"><div :class="[classA, classB]">classA, classB</div><div v-bind:class="{ red: isRed }">isred</div><div v-bind:class="[classA, { classB: isB, classC: isC }]">数组对象</div><div v-bind:style="{ fontSize: size + 'px' }">size22</div><img v-bind="{src:imageSrc+'?v=1.0'}" ><div v-bind:style="[styleObjectA, styleObjectB]">styleObjectA, styleObjectB</div>

vue对象初始化<script>// 实例化vue对象（MVVM中的View Model）new Vue({// vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析el:'#app',data:{// 数据 （MVVM中的Model）  imageSrc:'http://157.122.54.189:8998/vue/vuebase/chapter1/imgs/d1-11.png',isRed:true,classA:'A',classB:'B',isB:true,isC:true,size:22,styleObjectA:{color:'red'},styleObjectB:{fontSize:'30px'}},methods:{}})</script>

v-for

 <!--v-for用法：item in Array(item, index) in Arrayvalue in Object(value, key, index) in Object
:key属性具有唯一性，不能重复，它能够唯一标识数组的每一项将来数据中的某一项的值发生了改变，则v-for只会更新当前项对应的这个dom元素的值，而不是更新整个数据，从而提高效率，参考https://www.zhihu.com/question/61064119/answer/183717717
注意：以下变动不会触发视图更新1. 通过索引给数组设置新值2. 通过length改变数组解决：1. Vue.set(arr, index, newValue)2. arr.splice(index, 1, newValue)--><ul><li v-for="item in user">{{item.name}}</li><li v-for="(item, index) in user" :key="index">{{index}}.{{item.name}}</li><li>---------------华丽的分割线---------------</li><li v-for="value in boss">{{value}}</li><li v-for="(value, key, index) in boss"> {{index}}.{{key}}:{{value}}</li></ul><script>var vm = new Vue({el: '#app',data: {user: [{name: 'jack'},{name: 'neil'},{name: 'rose'}],boss: {name: '马云',age: 50,money: 1000000002030}}})</script>

v-model

1、在表单控件或者组件上创建双向绑定
2、v-model仅能在如下元素中使用：inputselecttextareacomponents（Vue中的组件）

3、举例：<input type="text" v-model="uname" />

new Vue({data:{uname:'' //这个属性值和input元素的值相互一一对应，二者任何一个的改变都会联动的改变对方}
})

v-show/v-if

使用场景： 初次加载开销较大的时候使用   v-if 频繁切换显示或者隐藏的时候使用  v-show
注意：v-else一定要结合v-if使用，否则会报错。

v-on

1、作用：绑定事件监听，表达式可以是一个方法的名字或一个内联语句，
如果没有修饰符也可以省略，用在普通的html元素上时，只能监听 原生
DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

2、常用事件：v-on:clickv-on:keydownv-on:keyupv-on:mousedownv-on:mouseoverv-on:submit....

3、示例：<!-- 方法处理器 --><button v-on:click="doThis"></button><!-- 内联语句 --><button v-on:click="doThat('hello', $event)"></button>
4、<!-- 阻止默认行为，没有表达式 --><form v-on:submit.prevent></form>
5、v-on的缩写形式：可以使用@替代 v-on:<button @click="doThis"></button>


6、按键修饰符触发像keydown这样的按键事件时，可以使用按键修饰符指定按下特殊的键后才触发事件
写法：<input type="text" @keydown.enter="kd1"> 当按下回车键时才触发kd1事件
由于回车键对应的keyCode是13，也可以使用如下替代<input type="text" @keydown.13="kd1"> 当按下回车键时才触发kd1事件
但是如果需要按下字母a（对应的keyCode=65）才触发kd1事件，有两种写法：1、由于默认不支持a这个按键修饰符，需要Vue.config.keyCodes.a = 65 添加一个对应,所以这种写法为：Vue.config.keyCodes.a = 65<input type="text" @keydown.a="kd1"> 这样即可触发
2、也可以之间加上a对应的数字65作为按键修饰符<input type="text" @keydown.65="kd1"> 这样即可触发
键盘上对应的每个按键可以通过 http://keycode.info/ 获取到当前按下键所对应的数字

特殊：
方法写到data中虽然变量更改没有响应，但是方法还是可以被触发的。

逆战——vue篇（一）相关推荐

第 5 节：前端面试指南 — Vue 篇（附面试题）
更新完「JavaScript篇」之后,忙完上周的送书活动,很多读者朋友都在微信催更「面试指南」系列的第 5 期 - vue篇. 前 4 期没看的同学,建议先看完再来看这一期的,传送门: 第 1 期:「 ...
2020前端最新面试题（vue篇）
2020前端最新面试题(vue篇) 由于疫情原因,原本每年的"金三银四"仿佛消失,随之而来的是找工作的压力,这里给要面试的小伙伴们总结了到目前为止我遇到的前端面试题,仅供参考哦,第 ...
【面试】前端面试之Vue篇
文章目录前端面试之Vue篇 vue组件的核心选项 vue组件的通信方式有哪几种? vue如何操作dom节点? vue当数据更新是如何更新dom节点的? computed内想传入一个参数,要怎么实现? ...
2023大厂高频面试题之Vue篇(2)
系列文章: 2023前端大厂面试题之JavaScript篇(1) 2023前端大厂面试题之JavaScript篇(2) 2023前端大厂面试题之JavaScript篇(3) 2023前端大厂面试题之J ...
Vue全家桶学习笔记_零基础入门到入坑:Vue篇
文章目录前言什么是Vue,什么又是框架完善的准备 Vue 引入 npm 安装 cnpm镜像加速器安装 Vue-Cli脚手架安装 webpack 安装 webpack-cli 安装 axios ...
vue实现多行数据提交_2020年大厂面试指南 Vue篇
点击蓝字「前端小苑」关注我导读 vue的一些基础知识,以及相关实现原理,一直是面试中比较热门的题目,本文梳理了常见的Vue面试题. 注意:关于底层实现原理,建议最好还是参照源码进行学习,有些原理相 ...
微信公众号开发之授权登录（前端vue篇）
前序: 由于之前一直是后端直接调用微信授权后,拿到相关信息后再返回给我(就是以前的前后端不分离),所以对微信公众号开发的微信授权登录还一直处于懵逼情况,直到今天有一个项目需要前后端分离,要前端主动去获 ...
【前端面试题之Vue篇】(1)父子组件通信方式Props/$emit
文章目录前言一.父组件向子组件传值 1.Props定义 2. Props 用法 (1)路由里注册父子组件 (2)父组件里引入子组件,并且注册子组件 (3)子组件利用props接受父组件传过来的值 ...
看完这篇文章保你面试稳操胜券——Vue篇
✨ 进大厂收藏这一系列就够了,全方位搜集总结,为大家归纳出这篇面试宝典,面试途中祝你一臂之力!,共分为四个系列 ✨ 本篇为 < 看完这篇文章保你面试稳操胜券 > ...

逆战——vue篇（一）

Vue常用系统指令

2.vue指令系统

逆战——vue篇（一）相关推荐

最新文章

热门文章