Vue-入门到实战（一）
2024-05-10 10:57:46
Vue.js - Day1
Node（后端）中的 MVC 与 前端中的 MVVM 之间的区别
MVC 是后端的分层开发概念；
MVVM是前端视图层的概念，主要关注于 视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , VM （ViewModel）
为什么有了MVC还要有MVVM
Vue.js 基本代码 和 MVVM 之间的对应关系
Vue之 - 基本的代码结构和插值表达式、v-cloak
1.el 指定要控制的区域
2.data 是个对象，指定了控制的区域内要用到的数据
3.methods 虽然带个s后缀，但是是个对象，这里可以自定义了方法
4.在 VM 实例中，如果要访问 data 上的数据，或者要访问 methods 中的方法， 必须带 this
1.使用 v-cloak 能够解决 插值表达式闪烁的问题
2.默认 v-text 是没有闪烁问题的
3.v-text会覆盖元素中原本的内容，但是 插值表达式 只会替换自己的这个占位符，不会把 整个元素的内容清空
Vue指令之v-text和v-html
Vue指令之v-bind的三种用法
属性绑定机制
直接使用指令
v-bind使用简化指令
:在绑定的时候，拼接绑定内容：
:title="btnTitle + ', 这是追加的内容'"
Vue指令之v-on和跑马灯效果
Vue指令之v-on
事件绑定机制
直接使用指令
v-on使用简化指令
@
跑马灯效果
- HTML结构：
<div id="app"><p>{{info}}</p><input type="button" value="开启" v-on:click="go"><input type="button" value="停止" v-on:click="stop"></div>- Vue实例：
// 注意：在 VM实例中，如果想要获取 data 上的数据，或者 想要调用 methods 中的 方法，必须通过 this.数据属性名 或 this.方法名 来进行访问，这里的this，就表示 我们 new 出来的 VM 实例对象// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {info: '猥琐发育，别浪~！',intervalId: null // 在data上定义 定时器Id},methods: {go() {// 如果当前有定时器在运行，则直接returnif (this.intervalId != null) {return;}// 开始定时器this.intervalId = setInterval(() => {this.info = this.info.substring(1) + this.info.substring(0, 1);}, 500);// 注意： VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把 最新的数据，从data 上同步到页面中去；【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】},stop() {clearInterval(this.intervalId);// 每当清除了定时器之后，需要重新把 intervalId 置为 nullthis.intervalId = null;}}});// 分析：// 1. 给 【浪起来】 按钮，绑定一个点击事件 v-on @// 2. 在按钮的事件处理函数中，写相关的业务逻辑代码：拿到 msg 字符串，然后 调用 字符串的 substring 来进行字符串的截取操作，把 第一个字符截取出来，放到最后一个位置即可；// 3. 为了实现点击下按钮，自动截取的功能，需要把 2 步骤中的代码，放到一个定时器中去；
Vue指令之v-on的缩写和事件修饰符
事件修饰符：stop、prevent、capture、self、once
- .stop 阻止冒泡
<div class="inner" @click="div1Handler"><input type="button" value="戳他" @click.stop="btnHandler">
</div>
<script>// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {},methods: {div1Handler() {console.log('这是触发了 inner div 的点击事件')},btnHandler() {console.log('这是触发了 btn 按钮 的点击事件')},}});</script>
- .prevent 阻止默认事件
<a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a>
<script>// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {},methods: {linkClick() {console.log('触发了连接的点击事件')},}});</script>
- .capture 添加事件侦听器时使用事件捕获模式
<div class="inner" @click="div1Handler"><input type="button" value="戳他" @click="btnHandler"></div><script>// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {},methods: {div1Handler() {console.log('这是触发了 inner div 的点击事件')},}});</script>
- .self 只当事件在该元素本身（比如不是子元素）触发时触发回调
<!-- 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 -->
<div class="inner" @click="div1Handler"><input type="button" value="戳他" @click="btnHandler"></div> <!-- .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为 -->
<div class="outer" @click="div2Handler"><div class="inner" @click.self="div1Handler"><input type="button" value="戳他" @click="btnHandler"></div></div><script>// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {},methods: {div1Handler() {console.log('这是触发了 inner div 的点击事件')},div2Handler() {console.log('这是触发了 outer div 的点击事件')}}});</script>
- .once 只触发一次事件处理函数
<a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a>
Vue指令之v-model和双向数据绑定
Vue指令之v-model
1.v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V， 无法实现数据的双向绑定
2.使用 v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定
3.注意： v-model 只能运用在 表单元素中
input(radio, text, address, email…) select checkbox textarea
简易计算器案例
- HTML 代码结构
<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>- Vue实例代码：
// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {n1: 0,n2: 0,result: 0,opt: '0'},methods: {getResult() {switch (this.opt) {case '0':this.result = parseInt(this.n1) + parseInt(this.n2);break;case '1':this.result = parseInt(this.n1) - parseInt(this.n2);break;case '2':this.result = parseInt(this.n1) * parseInt(this.n2);break;case '3':this.result = parseInt(this.n1) / parseInt(this.n2);break;}}}});在Vue中使用样式
使用class样式
- 数组
<h1 :class="['red', 'thin']">这是一个邪恶的H1</h1>
- 数组中使用三元表达式
<h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1>
- 数组中嵌套对象
<h1 :class="['red', 'thin', {'active': isactive}]">这是一个邪恶的H1</h1>
- 直接使用对象
<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1>
使用内联样式
- 直接在元素上通过
:style的形式，书写样式对象
<h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1>
- 将样式对象，定义到
data中，并直接引用到:style中
- 在data上定义样式：
data: {h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}
- 在元素中，通过属性绑定的形式，将样式对象应用到元素中：
<h1 :style="h1StyleObj">这是一个善良的H1</h1>
- 在
:style中通过数组，引用多个data上的样式对象
- 在data上定义样式：
data: {h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },h1StyleObj2: { fontStyle: 'italic' }
}
- 在元素中，通过属性绑定的形式，将样式对象应用到元素中：
<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>
Vue指令之v-for和key属性
- 迭代数组
<ul><li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}</li>
</ul>
- 迭代对象中的属性
<!-- 循环遍历对象身上的属性 --><div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>- 迭代数字
注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始
<p v-for="i in 10">这是第 {{i}} 个P标签</p>2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。(只接受 string / number)
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。
Vue指令之v-if和v-show
v-if的特点：每次都会重新删除或创建元素v-show的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式v-if 有较高的切换性能消耗
v-show 有较高的初始渲染消耗
如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show
如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if
一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。
品牌管理案例
添加新品牌
add() { // 添加的方法// console.log('ok')// 分析：// 1. 获取到 id 和 name ,直接从 data 上面获取 // 2. 组织出一个对象// 3. 把这个对象，调用 数组的 相关方法，添加到 当前 data 上的 list 中// 4. 注意：在Vue中，已经实现了数据的双向绑定，每当我们修改了 data 中的数据，Vue会默认监听到数据的改动，自动把最新的数据，应用到页面上；// 5. 当我们意识到上面的第四步的时候，就证明大家已经入门Vue了，我们更多的是在进行 VM中 Model 数据的操作，同时，在操作Model数据的时候，指定的业务逻辑操作；var car = { id: this.id, name: this.name, ctime: new Date() }this.list.push(car)this.id = this.name = ''}
删除品牌
del(id) { // 根据Id删除数据// 分析：// 1. 如何根据Id，找到要删除这一项的索引// 2. 如果找到索引了，直接调用 数组的 splice 方法/* this.list.some((item, i) => {if (item.id == id) {this.list.splice(i, 1)// 在 数组的 some 方法中，如果 return true，就会立即终止这个数组的后续循环return true;}}) */var index = this.list.findIndex(item => {if (item.id == id) {return true;}})// console.log(index)this.list.splice(index, 1)},根据条件筛选品牌
- 1.x 版本中的filterBy指令，在2.x中已经被废除：
filterBy - 指令
<tr v-for="item in list | filterBy searchName in 'name'"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.ctime}}</td><td><a href="#" @click.prevent="del(item.id)">删除</a></td></tr>- 在2.x版本中手动实现筛选的方式：
- 筛选框绑定到 VM 实例中的
searchName属性：
<hr> 输入筛选名称：<input type="text" v-model="searchName">- 在使用
v-for指令循环每一行数据的时候，不再直接item in list，而是in一个 过滤的methods 方法，同时，把过滤条件searchName传递进去：
<div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title">添加品牌</h3></div><div class="panel-body form-inline"><label>Id:<input type="text" class="form-control" v-model="id"></label><label>Name:<input type="text" class="form-control" v-model="name"></label><!-- 在Vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了 --><input type="button" value="添加" class="btn btn-primary" @click="add()"><label>搜索名称关键字：<input type="text" class="form-control" v-model="keywords"></label></div></div><tbody><tr v-for="item in search(searchName)"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.ctime}}</td><td><a href="#" @click.prevent="del(item.id)">删除</a></td></tr></tbody>search过滤方法中，使用 数组的filter方法进行过滤：
// 注意： forEach some filter findIndex 这些都属于数组的新方法，// 都会对数组中的每一项，进行遍历，执行相关的操作；
search(name) {
//第一种方法
/* var newList = []this.list.forEach(item => {if (item.name.indexOf(keywords) != -1) {newList.push(item)}})return newList *///第二种方法 return this.list.filter(x => {return x.name.indexOf(name) != -1;// 注意 ： ES6中，为字符串提供了一个新方法，叫做 String.prototype.includes('要包含的字符串')// 如果包含，则返回 true ，否则返回 false// contain/* if (item.name.includes(keywords)) {return item}*/});}Vue调试工具vue-devtools的安装步骤和使用
Vue.js devtools - 翻墙安装方式 - 推荐
过滤器
概念：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；
过滤器的定义语法
Vue.filter(‘过滤器的名称’, function(){})
过滤器中的 function ，第一个参数，已经被规定死了，永远都是 过滤器 管道符前面 传递过来的数据
过滤器调用时候的格式
{{ name | 过滤器的名称 }}
私有过滤器
- HTML元素：
<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>- 私有
filters定义方式：
filters: { // 私有局部过滤器，只能在 当前 VM 对象所控制的 View 区域进行使用dataFormat(input, pattern = "") { // 在参数列表中 通过 pattern="" 来指定形参默认值，防止报错var dt = new Date(input);// 获取年月日var y = dt.getFullYear();var m = (dt.getMonth() + 1).toString().padStart(2, '0');var d = dt.getDate().toString().padStart(2, '0');// 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日// 否则，就返回 年-月-日 时：分：秒if (pattern.toLowerCase() === 'yyyy-mm-dd') {return `${y}-${m}-${d}`;} else {// 获取时分秒var hh = dt.getHours().toString().padStart(2, '0');var mm = dt.getMinutes().toString().padStart(2, '0');var ss = dt.getSeconds().toString().padStart(2, '0');return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;}}}使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString=’’) 或 String.prototype.padEnd(maxLength, fillString=’’)来填充字符串；
全局过滤器
// 定义一个全局过滤器Vue.filter('dataFormat', function (input, pattern = '') {var dt = new Date(input);// 获取年月日var y = dt.getFullYear();var m = (dt.getMonth() + 1).toString().padStart(2, '0');var d = dt.getDate().toString().padStart(2, '0');// 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日// 否则，就返回 年-月-日 时：分：秒if (pattern.toLowerCase() === 'yyyy-mm-dd') {return `${y}-${m}-${d}`;} else {// 获取时分秒var hh = dt.getHours().toString().padStart(2, '0');var mm = dt.getMinutes().toString().padStart(2, '0');var ss = dt.getSeconds().toString().padStart(2, '0');return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;}});注意：当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！
键盘修饰符以及自定义键盘修饰符
1.x中自定义键盘修饰符【了解即可】
Vue.directive('on').keyCodes.f2 = 113;2.x中自定义键盘修饰符
Vue.config.keyCodes.f2 = 113;
<input type="text" v-model="name" @keyup.f2="add">自定义指令
// 自定义全局指令 // 使用 Vue.directive() 定义全局的指令 v-focus// 其中：参数1 ： 指令的名称，注意，在定义的时候，指令的名称前面，不需要加 v- 前缀, // 但是： 在调用的时候，必须 在指令名称前 加上 v- 前缀来进行调用// 参数2： 是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作Vue.directive('focus', {bind: function (el) { // 每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次// 注意： 在每个 函数中，第一个参数，永远是 el ，表示 被绑定了指令的那个元素，这个 el 参数，是一个原生的JS对象// 在元素 刚绑定了指令的时候，还没有 插入到 DOM中去，这时候，调用 focus 方法没有作用// 因为，一个元素，只有插入DOM之后，才能获取焦点// el.focus()},inserted: function (el) { // inserted 表示元素 插入到DOM中的时候，会执行 inserted 函数【触发1次】el.focus()// 和JS行为有关的操作，最好在 inserted 中去执行，放置 JS行为不生效},updated: function (el) { // 当VNode更新的时候，会执行 updated， 可能会触发多次}})// 自定义局部指令 v-color 和 v-font-weight，为绑定的元素设置指定的字体颜色 和 字体粗细：// 样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式// 将来元素肯定会显示到页面中，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素directives: {color: { // 为元素设置指定的字体颜色bind(el, binding) {el.style.color = binding.value;}},'font-weight': function (el, binding2) { // 自定义指令的简写形式，等同于定义了 bind 和 update 两个钩子函数el.style.fontWeight = binding2.value;}}
<input type="text" v-model="searchName" v-focus v-color="'red'" v-font-weight="900">Vue 1.x 中 自定义元素指令【已废弃,了解即可】
Vue.elementDirective('red-color', {bind: function () {this.el.style.color = 'red';}
});
使用方式：
<red-color>1232</red-color>
相关文章
- vue.js 1.x 文档
- vue.js 2.x 文档
- String.prototype.padStart(maxLength, fillString)
- js 里面的键盘事件对应的键码
- Vue.js双向绑定的实现原理# Vue.js - Day1
课程介绍
前5天： 都在学习Vue基本的语法和概念；打包工具 Webpack , Gulp
后5天： 以项目驱动教学；
什么是Vue.js
Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex）
Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！
Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）
前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；
为什么要学习流行框架
- 企业为了提高开发效率：在企业中，时间就是效率，效率就是金钱；
- 企业中，使用框架，能够提高开发的效率；
提高开发效率的发展历程：原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Angular.js / Vue.js（能够帮助我们减少不必要的DOM操作；提高渲染效率；双向数据绑定的概念【通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了】）
在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑；
增强自己就业时候的竞争力
- 人无我有，人有我优
- 你平时不忙的时候，都在干嘛？
框架和库的区别
- 框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。
- node 中的 express；
- 库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。
- 从Jquery 切换到 Zepto
- 从 EJS 切换到 art-template
Node（后端）中的 MVC 与 前端中的 MVVM 之间的区别
MVC 是后端的分层开发概念；
MVVM是前端视图层的概念，主要关注于 视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , VM （ViewModel）
为什么有了MVC还要有MVVM
Vue.js 基本代码 和 MVVM 之间的对应关系
Vue之 - 基本的代码结构和插值表达式、v-cloak
1.el 指定要控制的区域
2.data 是个对象，指定了控制的区域内要用到的数据
3.methods 虽然带个s后缀，但是是个对象，这里可以自定义了方法
4.在 VM 实例中，如果要访问 data 上的数据，或者要访问 methods 中的方法， 必须带 this
1.使用 v-cloak 能够解决 插值表达式闪烁的问题
2.默认 v-text 是没有闪烁问题的
3.v-text会覆盖元素中原本的内容，但是 插值表达式 只会替换自己的这个占位符，不会把 整个元素的内容清空
Vue指令之v-text和v-html
Vue指令之v-bind的三种用法
属性绑定机制
直接使用指令
v-bind使用简化指令
:在绑定的时候，拼接绑定内容：
:title="btnTitle + ', 这是追加的内容'"
Vue指令之v-on和跑马灯效果
Vue指令之v-on
事件绑定机制
直接使用指令
v-on使用简化指令
@
跑马灯效果
- HTML结构：
<div id="app"><p>{{info}}</p><input type="button" value="开启" v-on:click="go"><input type="button" value="停止" v-on:click="stop"></div>- Vue实例：
// 注意：在 VM实例中，如果想要获取 data 上的数据，或者 想要调用 methods 中的 方法，必须通过 this.数据属性名 或 this.方法名 来进行访问，这里的this，就表示 我们 new 出来的 VM 实例对象// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {info: '猥琐发育，别浪~！',intervalId: null // 在data上定义 定时器Id},methods: {go() {// 如果当前有定时器在运行，则直接returnif (this.intervalId != null) {return;}// 开始定时器this.intervalId = setInterval(() => {this.info = this.info.substring(1) + this.info.substring(0, 1);}, 500);// 注意： VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把 最新的数据，从data 上同步到页面中去；【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】},stop() {clearInterval(this.intervalId);// 每当清除了定时器之后，需要重新把 intervalId 置为 nullthis.intervalId = null;}}});// 分析：// 1. 给 【浪起来】 按钮，绑定一个点击事件 v-on @// 2. 在按钮的事件处理函数中，写相关的业务逻辑代码：拿到 msg 字符串，然后 调用 字符串的 substring 来进行字符串的截取操作，把 第一个字符截取出来，放到最后一个位置即可；// 3. 为了实现点击下按钮，自动截取的功能，需要把 2 步骤中的代码，放到一个定时器中去；
Vue指令之v-on的缩写和事件修饰符
事件修饰符：stop、prevent、capture、self、once
- .stop 阻止冒泡
<div class="inner" @click="div1Handler"><input type="button" value="戳他" @click.stop="btnHandler">
</div>
<script>// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {},methods: {div1Handler() {console.log('这是触发了 inner div 的点击事件')},btnHandler() {console.log('这是触发了 btn 按钮 的点击事件')},}});</script>
- .prevent 阻止默认事件
<a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a>
<script>// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {},methods: {linkClick() {console.log('触发了连接的点击事件')},}});</script>
- .capture 添加事件侦听器时使用事件捕获模式
<div class="inner" @click="div1Handler"><input type="button" value="戳他" @click="btnHandler"></div><script>// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {},methods: {div1Handler() {console.log('这是触发了 inner div 的点击事件')},}});</script>
- .self 只当事件在该元素本身（比如不是子元素）触发时触发回调
<!-- 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 -->
<div class="inner" @click="div1Handler"><input type="button" value="戳他" @click="btnHandler"></div> <!-- .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为 -->
<div class="outer" @click="div2Handler"><div class="inner" @click.self="div1Handler"><input type="button" value="戳他" @click="btnHandler"></div></div><script>// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {},methods: {div1Handler() {console.log('这是触发了 inner div 的点击事件')},div2Handler() {console.log('这是触发了 outer div 的点击事件')}}});</script>
- .once 只触发一次事件处理函数
<a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a>
Vue指令之v-model和双向数据绑定
Vue指令之v-model
1.v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V， 无法实现数据的双向绑定
2.使用 v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定
3.注意： v-model 只能运用在 表单元素中
input(radio, text, address, email…) select checkbox textarea
简易计算器案例
- HTML 代码结构
<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>- Vue实例代码：
// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {n1: 0,n2: 0,result: 0,opt: '0'},methods: {getResult() {switch (this.opt) {case '0':this.result = parseInt(this.n1) + parseInt(this.n2);break;case '1':this.result = parseInt(this.n1) - parseInt(this.n2);break;case '2':this.result = parseInt(this.n1) * parseInt(this.n2);break;case '3':this.result = parseInt(this.n1) / parseInt(this.n2);break;}}}});在Vue中使用样式
使用class样式
- 数组
<h1 :class="['red', 'thin']">这是一个邪恶的H1</h1>
- 数组中使用三元表达式
<h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1>
- 数组中嵌套对象
<h1 :class="['red', 'thin', {'active': isactive}]">这是一个邪恶的H1</h1>
- 直接使用对象
<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1>
使用内联样式
- 直接在元素上通过
:style的形式，书写样式对象
<h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1>
- 将样式对象，定义到
data中，并直接引用到:style中
- 在data上定义样式：
data: {h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}
- 在元素中，通过属性绑定的形式，将样式对象应用到元素中：
<h1 :style="h1StyleObj">这是一个善良的H1</h1>
- 在
:style中通过数组，引用多个data上的样式对象
- 在data上定义样式：
data: {h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },h1StyleObj2: { fontStyle: 'italic' }
}
- 在元素中，通过属性绑定的形式，将样式对象应用到元素中：
<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>
Vue指令之v-for和key属性
- 迭代数组
<ul><li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}</li>
</ul>
- 迭代对象中的属性
<!-- 循环遍历对象身上的属性 --><div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>- 迭代数字
注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始
<p v-for="i in 10">这是第 {{i}} 个P标签</p>2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。(只接受 string / number)
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。
Vue指令之v-if和v-show
v-if的特点：每次都会重新删除或创建元素v-show的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式v-if 有较高的切换性能消耗
v-show 有较高的初始渲染消耗
如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show
如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if
一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。
品牌管理案例
添加新品牌
add() { // 添加的方法// console.log('ok')// 分析：// 1. 获取到 id 和 name ,直接从 data 上面获取 // 2. 组织出一个对象// 3. 把这个对象，调用 数组的 相关方法，添加到 当前 data 上的 list 中// 4. 注意：在Vue中，已经实现了数据的双向绑定，每当我们修改了 data 中的数据，Vue会默认监听到数据的改动，自动把最新的数据，应用到页面上；// 5. 当我们意识到上面的第四步的时候，就证明大家已经入门Vue了，我们更多的是在进行 VM中 Model 数据的操作，同时，在操作Model数据的时候，指定的业务逻辑操作；var car = { id: this.id, name: this.name, ctime: new Date() }this.list.push(car)this.id = this.name = ''}
删除品牌
del(id) { // 根据Id删除数据// 分析：// 1. 如何根据Id，找到要删除这一项的索引// 2. 如果找到索引了，直接调用 数组的 splice 方法/* this.list.some((item, i) => {if (item.id == id) {this.list.splice(i, 1)// 在 数组的 some 方法中，如果 return true，就会立即终止这个数组的后续循环return true;}}) */var index = this.list.findIndex(item => {if (item.id == id) {return true;}})// console.log(index)this.list.splice(index, 1)},根据条件筛选品牌
- 1.x 版本中的filterBy指令，在2.x中已经被废除：
filterBy - 指令
<tr v-for="item in list | filterBy searchName in 'name'"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.ctime}}</td><td><a href="#" @click.prevent="del(item.id)">删除</a></td></tr>- 在2.x版本中手动实现筛选的方式：
- 筛选框绑定到 VM 实例中的
searchName属性：
<hr> 输入筛选名称：<input type="text" v-model="searchName">- 在使用
v-for指令循环每一行数据的时候，不再直接item in list，而是in一个 过滤的methods 方法，同时，把过滤条件searchName传递进去：
<div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title">添加品牌</h3></div><div class="panel-body form-inline"><label>Id:<input type="text" class="form-control" v-model="id"></label><label>Name:<input type="text" class="form-control" v-model="name"></label><!-- 在Vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了 --><input type="button" value="添加" class="btn btn-primary" @click="add()"><label>搜索名称关键字：<input type="text" class="form-control" v-model="keywords"></label></div></div><tbody><tr v-for="item in search(searchName)"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.ctime}}</td><td><a href="#" @click.prevent="del(item.id)">删除</a></td></tr></tbody>search过滤方法中，使用 数组的filter方法进行过滤：
// 注意： forEach some filter findIndex 这些都属于数组的新方法，// 都会对数组中的每一项，进行遍历，执行相关的操作；
search(name) {
//第一种方法
/* var newList = []this.list.forEach(item => {if (item.name.indexOf(keywords) != -1) {newList.push(item)}})return newList *///第二种方法 return this.list.filter(x => {return x.name.indexOf(name) != -1;// 注意 ： ES6中，为字符串提供了一个新方法，叫做 String.prototype.includes('要包含的字符串')// 如果包含，则返回 true ，否则返回 false// contain/* if (item.name.includes(keywords)) {return item}*/});}Vue调试工具vue-devtools的安装步骤和使用
Vue.js devtools - 翻墙安装方式 - 推荐
过滤器
概念：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；
过滤器的定义语法
Vue.filter(‘过滤器的名称’, function(){})
过滤器中的 function ，第一个参数，已经被规定死了，永远都是 过滤器 管道符前面 传递过来的数据
过滤器调用时候的格式
{{ name | 过滤器的名称 }}
私有过滤器
- HTML元素：
<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>- 私有
filters定义方式：
filters: { // 私有局部过滤器，只能在 当前 VM 对象所控制的 View 区域进行使用dataFormat(input, pattern = "") { // 在参数列表中 通过 pattern="" 来指定形参默认值，防止报错var dt = new Date(input);// 获取年月日var y = dt.getFullYear();var m = (dt.getMonth() + 1).toString().padStart(2, '0');var d = dt.getDate().toString().padStart(2, '0');// 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日// 否则，就返回 年-月-日 时：分：秒if (pattern.toLowerCase() === 'yyyy-mm-dd') {return `${y}-${m}-${d}`;} else {// 获取时分秒var hh = dt.getHours().toString().padStart(2, '0');var mm = dt.getMinutes().toString().padStart(2, '0');var ss = dt.getSeconds().toString().padStart(2, '0');return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;}}}使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString=’’) 或 String.prototype.padEnd(maxLength, fillString=’’)来填充字符串；
全局过滤器
// 定义一个全局过滤器Vue.filter('dataFormat', function (input, pattern = '') {var dt = new Date(input);// 获取年月日var y = dt.getFullYear();var m = (dt.getMonth() + 1).toString().padStart(2, '0');var d = dt.getDate().toString().padStart(2, '0');// 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日// 否则，就返回 年-月-日 时：分：秒if (pattern.toLowerCase() === 'yyyy-mm-dd') {return `${y}-${m}-${d}`;} else {// 获取时分秒var hh = dt.getHours().toString().padStart(2, '0');var mm = dt.getMinutes().toString().padStart(2, '0');var ss = dt.getSeconds().toString().padStart(2, '0');return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;}});注意：当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！
键盘修饰符以及自定义键盘修饰符
1.x中自定义键盘修饰符【了解即可】
Vue.directive('on').keyCodes.f2 = 113;2.x中自定义键盘修饰符
Vue.config.keyCodes.f2 = 113;
<input type="text" v-model="name" @keyup.f2="add">自定义指令
// 自定义全局指令 // 使用 Vue.directive() 定义全局的指令 v-focus// 其中：参数1 ： 指令的名称，注意，在定义的时候，指令的名称前面，不需要加 v- 前缀, // 但是： 在调用的时候，必须 在指令名称前 加上 v- 前缀来进行调用// 参数2： 是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作Vue.directive('focus', {bind: function (el) { // 每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次// 注意： 在每个 函数中，第一个参数，永远是 el ，表示 被绑定了指令的那个元素，这个 el 参数，是一个原生的JS对象// 在元素 刚绑定了指令的时候，还没有 插入到 DOM中去，这时候，调用 focus 方法没有作用// 因为，一个元素，只有插入DOM之后，才能获取焦点// el.focus()},inserted: function (el) { // inserted 表示元素 插入到DOM中的时候，会执行 inserted 函数【触发1次】el.focus()// 和JS行为有关的操作，最好在 inserted 中去执行，放置 JS行为不生效},updated: function (el) { // 当VNode更新的时候，会执行 updated， 可能会触发多次}})// 自定义局部指令 v-color 和 v-font-weight，为绑定的元素设置指定的字体颜色 和 字体粗细：// 样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式// 将来元素肯定会显示到页面中，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素directives: {color: { // 为元素设置指定的字体颜色bind(el, binding) {el.style.color = binding.value;}},'font-weight': function (el, binding2) { // 自定义指令的简写形式，等同于定义了 bind 和 update 两个钩子函数el.style.fontWeight = binding2.value;}}
<input type="text" v-model="searchName" v-focus v-color="'red'" v-font-weight="900">Vue 1.x 中 自定义元素指令【已废弃,了解即可】
Vue.elementDirective('red-color', {bind: function () {this.el.style.color = 'red';}
});
使用方式：
<red-color>1232</red-color>
相关文章
- vue.js 1.x 文档
- vue.js 2.x 文档
- String.prototype.padStart(maxLength, fillString)
- js 里面的键盘事件对应的键码
- Vue.js双向绑定的实现原理
Vue-入门到实战（一）相关推荐
- 前端萌新看过来了—— 0基础1小时vue入门到实战
Vue.js+element ui从零开始一个项目 浅析一下:Vue.js到底是个什么东西? 项目概览 1. 脚手架安装与搭建 2. 初始创建建议 3. 引入element ui框架 4. 测试UI框 ...
- js模板字符串自定义类名_【Vue.js 入门到实战教程】07Vue 组件注册 | 基本使用和组件嵌套...
来源 | https://xueyuanjun.com/post/21929除了前面介绍的基本语法之外,Vue.js 还支持通过组件构建复杂的功能模块,组件可以称得上是 Vue.js 的灵魂,是 Vu ...
- vue设置cookie的domain无效_【Vue.js入门到实战教程】16Tailwind 与 Bootstrap 的区别和使用入门...
来源 | https://xueyuanjun.com/post/22065我们知道,从 Laravel 8 开始,自带前端脚手架代码默认兼容 Tailwind CSS 框架,取代了之前的 Boots ...
- 4. Vue入门实战教程之vue-element-admin后端API适配
Vue入门实战教程之vue-element-admin后端API适配 1.1 前言 1.2 分析框架 1.1.1 第一个接口:根据账号密码登陆获取token 1.1.2 第二个接口:根据token获取 ...
- CSDN - 盛洪宇（技术胖） - Vue2.x从入门到实战
Vue 全家桶 - Webpack / Vue / Vue-cli / Vue-router / Vuex / Axios / Element UI CSDN - 盛洪宇(技术胖) - Vue2.x从 ...
- Uni-App从入门到实战
uinapp总结 文章目录 uinapp总结 前言 一.创建项目 二.项目结构 三.在pages.json中配置文件 1.全局配置globalstyle 2.page常用 3.tab常用 4.启动模式 ...
- 【微信小程序】微信小程序入门与实战-个人笔记
微信小程序入门与实战 文章目录 微信小程序入门与实战 1 初识微信小程序 1-1 2020版重录说明 1-2 下载小程序开发工具 1-3 新建小程序项目 1-4 小程序appid的注册 1-5 新版小 ...
- 【笔记-node】《Egg.js框架入门与实战》、《用 React+React Hook+Egg 造轮子 全栈开发旅游电商应用》
20210226-20210227:<Egg.js框架入门与实战> 课程地址:https://www.imooc.com/learn/1185 第一章 课程导学 01-01 课程介绍 一. ...
- 微信小程序入门与实战（七月）
微信小程序入门与实战(七月) 第1章 初识微信小程序 第2章 小程序的基本目录结构与文件作用剖析 2-1 小程序页面的4种基本文件类型详解 第3章 rpx响应式单位与flex布局 3-3 新建页面的技 ...
- Vue2+3入门到实战
作为IT技术相关行业不可或缺的岗位之一,前端开发工程师就业前途广阔,一直是很多同学心中转行的首选行业.但很多人还没开始,便被一系列问题难倒了,比如:前端该如何入门?路线图是怎样的?想要找到一份好工作, ...
最新文章
- CSS之定位（绝对定位元素的布局）
- 11.32 php扩展模块装安
- 使用tcpdump查看HTTP请求响应 详细信息 数据
- DOM 4.1 规范成为候选推荐标准陷困境，只因巨头齐反对
- 安全实现Linux网络监控(1)
- 信息安全技术 网络安全等级保护测评要求_【诚资讯】等保2.0版本出炉！信息安全技术 网络安全等级保护基本要求正式发布...
- 机器学习-sk-learn-Facebook数据集预测签到位置
- Android开发之APP打开小程序后小程序无法返回APP，无法打开APP，launchApp无法返回app的原因
- SQL Server IS NULL语句使用举例
- 接口测试工具--Apipost不同脚本的作用
- 创意视觉应用︱基于深度学习的CVaaS计算机视觉即服务案例（Computer Vision as a Service）
- pytorch时空数据处理4——图像转文本/字幕Image-Captionning（二）
- windows下调用外部exe程序 SHELLEXECUTEINFO
- MODIS数据下载流程之地理空间数据云
- java服务器返回中文乱码：？？？
- 支付宝退款，支付宝提现转账
- 基于C语言的AES加密算法实现
- 【数据结构】栈的简单理解以及对栈的基本操作
- 国内电子商务网站分析报告
- python 爬虫与数据可视化
热门文章
- Mac系统介绍,个人理解
- 小米摄像头被谷歌紧急封禁！别人的设备，能看到你家现场
- 放什么风什么的成语（放什么风什么四字成语大全）
- OWASP A4 Insecure Design(不安全的设计)
- spring security的标签库
- 从1G到5G，46年屏幕变迁下，富士康、苹果、三星、华为的浴火重生路...
- 计算机网络之百个为什么？［期末简答必记］
- spring切面的使用@AspectJ注解的3种配置
- 如何打造高精度的写实类游戏角色
- Java：Stream三部曲（一）：函数式接口的理解与常用示例（Runnable、Comparator、Callable、Consumer、Predicate、Supplier、Function）