购物网站技术方案,d网站建设的目的,企业网站的建设思维导图,策划常用指令
1. v-bind
固定绑定与动态绑定#xff1a;
语法#xff1a; 标准语法#xff1a;v-bind:属性动态数据 简写语法#xff1a;:属性动态数拓
!DOCTYPE html
html langenheadme…常用指令
1. v-bind
固定绑定与动态绑定
语法 标准语法v-bind:属性动态数据 简写语法:属性动态数拓
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlevue学习使用/title!-- 第1步 引入vue库文件 --script src./js/vue.js/script
/headbody!-- 第2步挂载点 --div idapp!-- v-bind动态属性数据绑定 --!-- 固定 --!-- img srchttp://www.mobiletrain.org/images_index/right-fixed-face.png alt --!-- src属性中的数据它是通过data数据源中得到的 -- 动态 --!-- 语法标准语法v-bind:属性动态数据简写语法:属性动态数拓--img v-bind:srcsrc altimg :srcsrc alt/div!-- 第3步实例化vue --scriptconst vm new Vue({el: #app,data: {src: http://www.mobiletrain.org/images_index/right-fixed-face.png}})/script/body/html
2. v-for
概述对一组数组或对象的选项列表进行渲染。
v-for指令需要使用 (item,index) in 数组或对象 形式的特殊语法同时还需要指定key值,key的作用在vue进行新旧数据比对渲染页面里如果有key值会提升比对性能加快渲染key使用唯一的值来赋值。
vue2中小括号可以写也可以不写在vue3中一定要写小括号
注意
vue2中如果一个标签中同时有v-if和v-for则v-for的优先级高于v-if所以在vue2中不推荐两者在一个标签中vue3中v-if优先级高于v-forv-for(元素,索引) in/of 数组v-for(元素,键名,索引) in/of 对象v-for建议给循环项每个添加一个key来作标识用于提升性能,key值一定要唯一不重复的不太建议使用循环的索引当作key值一般在和后台请求数据时要求后台提供一个唯一的id给我们
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlevue学习使用/title!-- 第1步 引入vue库文件 --script src./js/vue.js/script
/headbody!-- 第2步挂载点 --div idapp!-- li v-for(item,index) in user{{index}} -- {{item}}/li --!-- li v-foritem,index in user{{index}} -- {{item}}/li --li v-foritem,index in user :keyitem.id{{item.name}}/li!-- 循环对象 --!-- div v-foritem,key,index in user :keykey{{index}} -- {{key}} -- {{item}}/div --/div!-- 第3步实例化vue --scriptconst vm new Vue({el: #app,data: {// user: [张三, 李四, 王五]user: [{ id: 2, name: 李四 }, { id: 1, name: 张三 }]// user: { id: 1, name: 张三 } }})/script/body/html
3. v-on
3.1 v-on事件
语法 标准语法v-on:事件名实现的方法[此方法定义在vue配置中的methods中] 简写语法 事件名方法使用很频繁
注意
绑定的方法它可以写小括号也可以不写小括号绑定的方法是可以写在data配置中但是不建议data中属性会进行劫持methods中定义方法不用使用箭头函数但是在方法体中建议使用箭头函数用来保持this指向
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlevue学习使用/title!-- 第1步 引入vue库文件 --script src./js/vue.js/script
/headbody!-- 第2步挂载点 --div idapp!-- v-on:事件名实现的方法[此方法定义在vue配置中的methods中]v-on使用很频繁 事件名方法绑定的方法它可以写小括号也可以不写小括号--h3{{num}}/h3!-- button v-on:clickclickFn点击事件/button --button clickclickFn点击事件/button/div!-- 第3步实例化vue --scriptconst vm new Vue({el: #app,data: {// 绑定的方法是可以写在data配置中但是不建议data中属性会进行劫持// clickFn: function () {// console.log(我是一个点击事件);// }num: 100},// 注methods中定义方法不用使用箭头函数但是在方法体中建议使用箭头函数用来保持this指向methods: {// clickFn: function () {// console.log(我是一个点击事件);// }// 简写clickFn() {// var _this thissetTimeout(() {this.numconsole.log(我是一个点击事件);}, 1000);}// 箭头函数 没有作用域找父级// clickFn: () {// console.log(this);// this.num// console.log(我是一个点击事件);// }}})/script/body/html
3.2 v-on事件对象
概述
绑定的方法它可以写小括号也可以不写小括号如果你绑定方法时没有写小括号则vue在解析时会自动给你映射一个event给绑定方法如果你绑定方法时有写小括号则需要手动把event对象传过去$event,$event可以传多个 但是建议只传一个一般写在第1位或最后1位
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlevue学习使用/title!-- 第1步 引入vue库文件 --script src./js/vue.js/script
/headbody!-- 第2步挂载点 --div idapph3{{num}}/h3!-- 如果你绑定方法时没有写小括号则vue在解析时会自动给你映射一个event给绑定方法 --!-- button clickclickFn点击事件/button --!-- 如果你绑定方法时有写小括号则需要手动把event对象传过去$event,$event可以传多个但是建议只传一个一般写在第1位或最后1位--button uname李四 data-uname张三 clickclickFn($event)点击事件/buttoninput typetext keyuponEnter/div!-- 第3步实例化vue --scriptconst vm new Vue({el: #app,data: {num: 100},methods: {// event可以用它来完成dom数据的获取clickFn(evt) {this.num// 自定义的需要使用getAttribute方法简写evt.target.name必须使用标签内置属性console.log(evt.target.getAttribute(uname));console.log(evt.target.dataset.uname)},onEnter(evt) {// 回车键是13if (evt.keyCode 13) {console.log(evt.target.value);}}}})/script/body/html
4. todolist
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlevue学习使用/title!-- 第1步 引入vue库文件 --script src./js/vue.js/script
/headbody!-- 第2步挂载点 --div idappinput placeholder请输入内容 typetext keyuponEnterhrul!-- 条件渲染 --li v-iftodos.length0无任务/lili v-else v-foritem,index in todos :keyitem.idspan{{item.title}}/span!-- span clickdel(item.id)删除/span --span clickdel(index)删除/span/li/ul/div!-- 第3步实例化vue --scriptconst vm new Vue({el: #app,data: {todos: []},methods: {onEnter(evt) {if (evt.keyCode 13) {this.todos.push({// Date.now() 返回自1970年1月1日00:00:00 UTC以来经过的毫秒数id: Date.now(),title: evt.target.value.trim()})evt.target.value }},// del(id) {// // 删除// this.todos this.todos.filter(item item.id ! id)// }del(index) {// splice 可以用来替换/删除/添加数组内某一个值或几个值该方法会改变初始数组。// 删除 它可以使用 vue中提供的变异方法splice来完成用此方法它会触发视图更新this.todos.splice(index, 1)}}})/script/body/html
5. 事件修饰符
多个修饰符通过点来连接操作 用来处理事件的特定行为。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlevue学习使用/title!-- 第1步 引入vue库文件 --script src./js/vue.js/script
/headbody!-- 第2步挂载点 --div idapp!-- 事件修饰符 --!-- input placeholder请输入内容 typetext keyup.enteronEnter --!-- 多个修饰符通过点来连接操作 用来处理事件的特定行为 --!-- keyup.alt.112alt键F1键 --input placeholder请输入内容 typetext keyup.alt.112onEnter hrul!-- 条件渲染 --li v-iftodos.length0无任务/lili v-else v-foritem,index in todos :keyitem.id!-- once事件只绑定一次 --a click.prevent.onceshowDetail hrefhttp://www.baidu.com{{item.title}}/a!-- span clickdel(item.id)删除/span --span clickdel(index)删除/span/li/ul/div!-- 第3步实例化vue --scriptconst vm new Vue({el: #app,data: {todos: []},methods: {showDetail() {console.log(1111);},onEnter(evt) {this.todos.push({id: Date.now(),title: evt.target.value.trim()})evt.target.value },// del(id) {// // 删除// this.todos this.todos.filter(item item.id ! id)// }del(index) {// 删除 它可以使用 vue中提供的变异方法splice来完成用此方法它会触发视图更新this.todos.splice(index, 1)}}})/script/body/html
6. 动态样式
6.1 class
注意 class和style都属于DOM属性所以在vue中都用:class和:style表示 对象: {key它就是样式名称:布尔值【true生效false不生效】} -- 一般用于开关显示的样式,不太适合添加新的属性样式
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlevue学习使用/title!-- 第1步 引入vue库文件 --script src./js/vue.js/scriptstyle.active {color: red;}.font30 {font-size: 30px;}/style
/headbody!-- 第2步挂载点 --div idapp!-- class样式的动态添加对象和数组方式class和style都属于DOM属性所以在vue中都用:class和:style表示对象: {key它就是样式名称:布尔值【true生效false不生效】} -- 一般用于开关显示的样式,不太适合添加新的属性样式--!-- div :classtitleClass我是一个标题/divbutton clickaddClass添加样式/button --!-- 数组:[元素样式名称]一般对于追加新样式使用数组--div :classtitleStyle我是一个标题/divbutton clickaddStyle添加样式/button/div!-- 第3步实例化vue --scriptconst vm new Vue({el: #app,data: {titleClass: { active: false },titleStyle: []},methods: {addClass() {// 点击切换// this.titleClass.active !this.titleClass.active// this.titleClass.active true//这里执行的时候会刷新数据会顺带执行了下一句// this.titleClass.font30 true//注意把上一句注释只执行这一句的时候样式不会生效因为这里是是新加的属性并没有被劫持// console.log(this.$data);// Vue方法// 动态给对象添加成员属性Vue中的方法// this.$set(this.titleClass, font30, true)// let obj Object.assign(参数1地址和返回值地址是同一个地址)},addStyle() {// 给数组添加元素元素就是样式名称这样它会就追加样式// push unshift shift pop splice sort reverse 调用时都会让视图更新this.titleStyle.push(active)this.titleStyle.push(font30)}}})/script/body/html
6.2 style
style样式的动态添加分为对象和数组方式。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlevue学习使用/title!-- 第1步 引入vue库文件 --script src./js/vue.js/script
/headbody!-- 第2步挂载点 --div idapp!-- style样式的动态添加对象和数组方式--!-- 对象--div :style{color:blue,fontSize:30px}我是一个标题/div!-- 数组--div :style[{color:blue},{fontSize:30px}]我是一个标题/div!-- button clickaddStyle添加样式/button --/div!-- 第3步实例化vue --scriptconst vm new Vue({el: #app,data: {},methods: {}})/script/body/html
7. input表单
概述
在没有使用v-model指令时来通过data数据控制表单项中的值还是麻烦的绑定属性和事件来完成 -- 受控组件 v-model它是一个语法糖value和事件的综合体
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlevue学习使用/title!-- 第1步 引入vue库文件 --script src./js/vue.js/script
/headbody!-- 第2步挂载点 --div idappdivinput typetext v-modelusername/div/div!-- 第3步实例化vue --scriptconst vm new Vue({el: #app,data: {username: },methods: {setUsername(evt) {this.username evt.target.value.trim()}}})/script/body/html
8. v-model修饰
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlevue学习使用/title!-- 第1步 引入vue库文件 --script src./js/vue.js/script
/headbody!-- 第2步挂载点 --div idapp!-- v-model修饰符 --!-- 延时更新数据源中的数据 光标移开才会改变数据 --!-- input v-model.lazytitle --!-- 去空格 trim --!-- input v-model.trimtitle --!-- 转为数值 number --input typenumber v-model.numbern1input typenumber v-model.numbern2 {{n1n2}}/div!-- 第3步实例化vue --scriptconst vm new Vue({el: #app,data: {title: ,n1: 1,n2: 2}})/script/body/html
