印团网网站是哪家做的,泰安市建设职工培训中心网站进不去,代理做网站,自动翻译网站软件四、事件监听 在前端开发中#xff0c;我们需要经常和用于交互。 这个时候#xff0c;我们就必须监听用户发生的时间#xff0c;比如点击、拖拽、键盘事件等等 在Vue中如何监听事件呢#xff1f;使用v-on指令 v-on介绍 作用#xff1a;绑定事件监听器 缩写#xff1a; 预…四、事件监听 在前端开发中我们需要经常和用于交互。 这个时候我们就必须监听用户发生的时间比如点击、拖拽、键盘事件等等 在Vue中如何监听事件呢使用v-on指令 v-on介绍 作用绑定事件监听器 缩写 预期Function | Inline Statement | Object 参数event
下面我们就具体来学习v-on的使用。
1.v-on基础
这里我们用一个监听按钮的点击事件来简单看看v-on的使用 下面的代码中 我们使用了v-on:clickcounter” 另外我们可以将事件指向一个在methods中定义的函数
注v-on也有对应的语法糖 v-on:click可以写成click
2.v-on参数
当通过methods中定义方法以供click调用时需要注意参数问题 情况一如果该方法不需要额外参数那么方法后的()可以不添加。 但是注意如果方法本身中有一个参数那么会默认将原生事件event参数传递进去 情况二如果需要同时传入某个参数同时需要event时可以通过$event传入事件。 3.v-on修饰符 在某些情况下我们拿到event的目的可能是进行一些事件处理。 Vue提供了修饰符来帮助我们方便的处理一些事件
stop - 调用 event.stopPropagation()。prevent - 调用 event.preventDefault()。{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。native - 监听组件根元素的原生事件。once - 只触发一次回调。 五、条件判断
1. v-if、v-else-if、v-else
v-if、v-else-if、v-else
这三个指令与JavaScript的条件语句if、else、else if类似。Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件 简单的案例演示 v-if的原理
v-if后面的条件为false时对应的元素以及其子元素不会渲染。也就是根本没有不会有对应的标签出现在DOM中。
条件渲染案例: 我们来做一个简单的小案例 用户再登录时可以切换使用用户账号登录还是邮箱地址登录。 类似如下情景 案例中存在的小问题 小问题 如果我们在有输入内容的情况下切换了类型我们会发现文字依然显示之前的输入的内容。 但是按道理讲我们应该切换到另外一个input元素中了。 在另一个input元素中我们并没有输入内容。 为什么会出现这个问题呢 问题解答 这是因为Vue在进行DOM渲染时出于性能考虑会尽可能的复用已经存在的元素而不是重新创建新的元素。 在上面的案例中Vue内部会发现原来的input元素不再使用直接作为else中的input来使用了。 解决方案
如果我们不希望Vue出现类似重复利用的问题可以给对应的input添加key并且我们需要保证key的不同
2. v-show v-show的用法和v-if非常相似也用于决定一个元素是否渲染 v-if和v-show对比 v-if和v-show都可以决定一个元素是否渲染那么开发中我们如何选择呢 v-if当条件为false时压根不会有对应的元素在DOM中。v-show当条件为false时仅仅是将元素的display属性设置为none而已。
开发中如何选择呢
当需要在显示与隐藏之间切片很频繁时使用v-show当只有一次切换时通过使用v-if
六、循环遍历
1.v-for遍历数组 当我们有一组数据需要进行渲染时我们就可以使用v-for来完成。 v-for的语法类似于JavaScript中的for循环。 格式如下item in items的形式。
我们来看一个简单的案例 如果在遍历的过程中不需要使用索引值 v-foritem in names 依次从names中取出item并且在元素的内容中我们可以使用Mustache语法来使用item 如果在遍历的过程中我们需要拿到元素在数组中的索引值呢 语法格式v-for(item, index) in items 其中的index就代表了取出的item在原数组的索引值。
2.v-for遍历对象
v-for可以用户遍历对象 比如某个对象中存储着你的个人信息我们希望以列表的形式显示出来。
3.组件的key属性
key的作用主要是为了高效的更新虚拟DOM
4.检测数组更新 因为Vue是响应式的所以当数据发生变化时Vue会自动检测数据变化视图会发生对应的更新。 Vue中包含了一组观察数组编译的方法使用它们改变数组也会触发视图的更新。 push() 在数组最后面添加元素可传入1个或者多个参数pop()删除数组中的最后一个元素shift()删除数组中的第一个元素unshift()在数组最前面添加元素splice()删除元素/插入元素/替换元素sort()正序排列reverse()倒序排列
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodydiv idappulli v-foritem in letters{{item}}/li/ulbutton clickbtnClick按钮/button
/divscript src../js/vue.js/script
scriptconst app new Vue({el: #app,data: {letters: [A,B,C,D,E]},methods:{btnClick() {// 0注意通过索引值修改数组中的元素(无法做到响应式数组的内容改变时页面内容不会响应式变化)// this.letters[0] bbbb/*以下几种改变数组的方法是响应式的*/// 1.push方法// this.letters.push(AAA);// this.letters.push(AAA,bbbb);// 2.pop():删除数组中的最后一个元素// this.letters.pop();// 3.shift()删除数组中的第一个元素// this.letters.shift();// 4.unshift()在数组最前面添加元素// this.letters.unshift(aaaa);// this.letters.unshift(aaaa,BBBB);// 5.// splice的作用删除元素/插入元素/替换元素// 删除元素第二个参数传入 你要删除几个元素(如果没有传参数就删除后面所有的元素)// 替换元素第二个参数表示我们要替换几个元素后面的参数是用来替换前面的元素// 插入元素第二个参数传入0并且后面跟上要插入的元素// splice(start):// this.letters.splice(2,2,ab,cz);// this.letters.splice(2,0,X,Y)// 6.sort()// this.letters.sort()// 7.reverse()// this.letters.reverse()// set(要修改的对象,索引值修改后的值)Vue.set(this.letters,0,bbbbbbbb)}}})
/script/body
/html七、阶段案例
图书购物车 代码实现HTML、CSS
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet hrefstyle.css
/head
bodydiv idappdiv v-ifbooks.lengthtabletheadtrth/thth书籍名称/thth出版日期/thth价格/thth购买数量/thth操作/th/tr/theadtbodytr v-for(item,index) in bookstd{{item.id}}/tdtd{{item.name}}/tdtd{{item.date}}/td!-- td{{ item.price.toFixed(2)}}/td--!-- td{{getFinalPrice(item.price)}}/td--td{{item.price | showPrice}}/tdtdbutton clickdecrement(index) v-bind:disableditem.count 1-/button{{item.count}}button clickincrement(index)/button/tdtdbutton clickremoveHandle(index)移除/button/td/tr/tbody/tableh2总价格{{totalPrice | showPrice}}/h2/divh2 v-else购物车为空/h2
/divscript src../js/vue.js/script
script srcmain.js/script
/body
/htmltable {border: 1px solid #e9e9e9;border-collapse: collapse;border-spacing: 0;
}th, td {padding: 8px 16px;border: 1px solid #e9e9e9;text-align: center;
}th {background-color: #f7f7f7;color: #5c6b77;font-weight: 600;
}const app new Vue({el:#app,data:{books: [{id: 1,name: 《Python入门》,date: 2020-10,price: 85.00,count: 36},{id: 2,name: 《Vue从入门到精通》,date: 2020-10,price: 99.00,count: 22},{id: 3,name: 《算法导论》,date: 2020-08,price: 32.00,count: 10},{id: 4,name: 《软件工程》,date: 2020-02,price: 105.00,count: 50}]},methods: {getFinalPrice(price) {return price.toFixed(2);},increment(index) {console.log(increment,index);this.books[index].count;},decrement(index) {console.log(decrement,index);this.books[index].count--;},removeHandle(index) {this.books.splice(index,1);}},filters: {showPrice(price) {return price.toFixed(2);}},computed: {totalPrice() {/*// 1. 普通的for循环let totalPrice 0;for (let i 0; i this.books.length; i) {totalPrice this.books[i].price * this.books[i].count;}return totalPrice;*//*// 2. for(let i in this..books)let totalPrice 0;for (let i in this.books) {totalPrice this.books[i].price * this.books[i].count;}return totalPrice;*//*// 3. for(let item of this.books)let totalPrice 0;for (let item of this.books) {totalPrice item.price * item.count;}return totalPrice;*/// 4.reducereturn this.books.reduce(function (preValue,book) {return preValue book.price * book.count},0)}}})// 编程范式命令式编程/声明式编程
// 编程范式面向对象编程第一公民对象/函数式编程第一公民函数
// filter /map /reduce
// filter 中的回调函数有一个要求必须返回一个boolean值
// true :当返回true时函数内部会自动将这次回调的n加入到心得数组中
// false当返回false时函数内部会过滤掉这次的n
const nums [10,20,111,222,444,40,50]/*let total nums.filter(function (n) {return n 100;
}).map(function (n) {return n * 2;
}).reduce(function (preValue,n) {return preValue n;
},0)
console.log(total);*/
let total nums.filter(n n 100).map(n n * 2).reduce((preValue,n) preValue n)
console.log(total);
/*
// 1. filter函数的使用
// 10 20 40 50
let newNums nums.filter(function (n) {return n 100;
})
console.log(newNums);// 2. map函数的使用
// 20,40,80,100
let new2Nums newNums.map(function (n) {return n*2;
})
console.log(new2Nums);// 3. reduce函数的使用
// educe函数的作用对数组中所有的内容进行汇总
/!*
// new2Nums.reduce(function (preValue,n) {
// return 100;
// },0)
// 第一次preValue0,n20
// 第二次preValue100,n40
// 第三次preValue100,n80
// 第四次preValue100,n100
*!/let total new2Nums.reduce(function (preValue,n) {return preValue n;
},0)
// 第一次preValue0,n20
// 第二次preValue20,n40
// 第三次preValue60,n80
// 第四次preValue140,n100
// 第五次preValue n240
console.log(total);
*/
八、双向绑定v-model
1.表单绑定v-model 表单控件在实际开发中是非常常见的。 特别是对于用户信息的提交需要大量的表单。 Vue中使用v-model指令来实现表单元素和数据的双向绑定。 案例的解析
当我们在输入框输入内容时 因为input中的v-model绑定了message所以会实时将输入的内容传递给messagemessage发生改变。当message发生改变时因为上面我们使用Mustache语法将message的值插入到DOM中所以DOM会发生响应的改变。所以通过v-model实现了双向的绑定。 当然我们也可以将v-model用于textarea元素
2.v-model原理
v-model其实是一个语法糖它的背后本质上是包含两个操作
v-bind绑定一个value属性v-on指令给当前元素绑定input事件
也就是说下面的代码等同于下面的代码
input typetext v-modelmessage
等同于
input typetext v-bind:valuemessage v-on:inputmessage $event.target.value3.v-modelradio
当存在多个单选框时
4.v-modelcheckbox
复选框分为两种情况单个勾选框和多个勾选框 单个勾选框 v-model即为布尔值。 此时input的value并不影响v-model的值。 多个复选框 当是多个复选框时因为可以选中多个所以对应的data中属性是一个数组。 当选中某一个时就会将input的value添加到数组中。
5.v-modelselect 和checkbox一样select也分单选和多选两种情况。 单选只能选中一个值。 v-model绑定的是一个值。 当我们选中option中的一个时会将它对应的value赋值到mySelect中多选可以选中多个值。 v-model绑定的是一个数组。 当选中多个值时就会将选中的option对应的value添加到数组mySelects中 6.值绑定 初看Vue官方值绑定的时候我很疑惑what the hell is that 但是仔细阅读之后发现很简单就是动态的给value赋值而已 我们前面的value中的值可以回头去看一下都是在定义input的时候直接给定的。 但是真实开发中这些input的值可能是从网络获取或定义在data中的。 所以我们可以通过v-bind:value动态的给value绑定值。 这不就是v-bind吗 这不就是v-bind在input中的应用吗搞的我看了很久搞不清他想讲什么。 这里不再给出对应的代码因为会用v-bind就会值绑定的应用了。
7.修饰符
lazy修饰符 默认情况下v-model默认是在input事件中同步输入框的数据的。 也就是说一旦有数据发生改变对应的data中的数据就会自动发生改变。 lazy修饰符可以让数据在失去焦点或者回车时才会更新
number修饰符 默认情况下在输入框中无论我们输入的是字母还是数字都会被当做字符串类型进行处理。 但是如果我们希望处理的是数字类型那么最好直接将内容当做数字处理。 number修饰符可以让在输入框中输入的内容自动转成数字类型
trim修饰符 如果输入的内容首尾有很多空格通常我们希望将其去除 trim修饰符可以过滤内容左右两边的空格
