快速入门vue，含实战案例，“建议收藏”，用到省的百度了#yyds干货盘点# _快速入门

【快速入门vue，含实战案例，“建议收藏”，用到省的百度了#yyds干货盘点#】恢弘志士之气，不宜妄自菲薄。这篇文章主要讲述快速入门vue，含实战案例，“建议收藏”，用到省的百度了#yyds干货盘点#相关的知识，希望能为你提供帮助。
初识Vue

< div id="app"> < !-- mustache语法中，不仅可以直接写变量，也可以写简单的表达式 --> < h2> message+name< /h2> < h2> mesage+ +neme< /h2> < h3> message< /h3> name < /div> < script> //let(变量)/const(常量) //编程范式：声明式编程 const app = new Vue( el: "#app",//用于挂载要管理的元素 data: //定义数据 message: 你好, name: "zaima") //js的编程范式是命令式编程，要一步一步明确指定 < /script>

遍历数组

< div id="app"> < ul> < li v-for="item in movies"> item< /li> < /ul> < /div> < script> const app = new Vue( el: "#app", data: message: 你好, movies: [海王, 星际穿越, 少年派, 盗梦空间]) < /script>

v-bind 基本使用

< !-- 不加v-bind就无法动态获取vue里的东西 --> < div id="app"> < !-- v-bind的简写是: --> < a rel="nofollow" :href="https://www.songbingjia.com/android/aHref"> < /a> < img v-bind:src="https://www.songbingjia.com/android/对应图片地址" > < /div> < script> // hook钩子 const app = new Vue( el: #app, data: message: 你好吖, aHref: "www.baidu.com") < /script>

v-bind动态绑定class（对象语法）

< div id="app"> //哪个类名为true就添加哪个类 < !-- < h2 v-bind:class="类名1:true,类名2:布尔值"> message< /h2> --> < !-- 下面类名可以同时添加 --> < !-- < h2 class="title" v-bind:class="active:isActive,line:isLine"> message< /h2> --> < !-- 里面也可以加函数 --> < h2 class="title" v-bind:class="getClasses()"> message< /h2> < /div> < script> // hook钩子 const app = new Vue( el: #app, data: message: 你好吖, isActive: true, isLine: true , // 里面放事件，函数都放进来 methods: btnClick: function () this.isActive = !this.isActive , // 调用data里的方法都要加this getClasses:function() return active:this.isActive,line:this.isLine) < /script>

v-bind动态绑定style（对象语法）

< div id="app"> < !-- < h2 v-bind:style="key(属性名):value(属性值)"> message< /h2> --> < !-- 属性值变量不用加单引号，固定值加单引号，不加单引号会当变量解析 --> //fontSize = font-size 在vue里前面有-要大写字母 < h2 :style="fontSize:finalSize + px,backgroundColor: finalColor"> message< /h2> < h2 :style="getStyles()"> message< /h2> < /div> < script> const app = new Vue( el: #app, data: message:你好吖, finalSize:50, finalColor:red , methods: getStyles:function() return fontSize:this.finalSize + px,backgroundColor: this.finalColor) < /script>

computed 计算属性基本使用

< div id="app"> < h2> 总价格：totalPrice< /h2> < /div> < script> const app = new Vue( el: #app, data: books:[ id:110,name:"编程艺术",proce:119, id:111,name:"代码大全",proce:119, id:112,name:"深入理解计算机原理",proce:119, id:113,name:"现代操作系统",proce:119, ] ,// computed计算属性 computed: // 计算总价格 totalPrice:function() let result=0; for(let i=0; i< this.books.length; i++) result += this.books[i].procereturn result) < /script>

v-on事件的监听 v-on的参数问题

< div id="app"> < !-- 1.事件调用的方法没有参数 --> < button @click="btn1Click()"> 按钮一< /button> < button @click="btn1Click"> 按钮一< /button> < !-- 2.事件在定义时，写方法时省略了小括号，但是方法本身是需要一个参数的，这个时候，Vue会默认将浏览器生产的event事件对象作为参数传入到方法如果方法不需要参数可以省略小括号--> < !-- < button @click="btn2Click(123)"> 按钮二< /button> < button @click="btn2Click()"> 按钮二< /button> --> < button @click="btn2Click"> 按钮二< /button> < !-- 3.方法定义时，我们需要event对象，同时有需要其他参数 --> < !-- 在调用方式，如何手动获取到浏览器参数的event对象：$event --> < !-- abc不加引号就当作变量 --> < button @click="btn3Click(abc,$event)"> 按钮三< /button> < /div> < script> const app = new Vue( el: #app, data: message:你好吖, abc:123 , methods: btn1Click() console.log("btn1Click"); , btn2Click(event) console.log("------",event); , btn3Click(abc,event) console.log(+++++,abc,event); ) < /script>

v-on的修饰符

< div id="app"> < !-- 1.stop修饰符,阻止了下面事件的冒泡 --> < div @click="divClick"> < button @click.stop="btnClick"> 按钮< /button> < /div> < !-- 2.prevent修饰符,阻止了下面事件向百度提交 --> < form action="baidu"> < input type="submit" value="https://www.songbingjia.com/android/提交" @click.prevent="submitClick"> < /form> < !-- 3.监听某个键盘的键帽,enter只执行keyUP(回车)一个键位 --> < input type="text" @keyup.enter="keyUp"> < !-- 4.once修饰符,只能执行一次 --> < button @click.once="btn2Click"> 按钮2< /button> < /div> < script> var vm = new Vue( el: #app, data: , methods: btnClick() console.log("btnclick"); , divClick() console.log("divclick"); , submitClick() console.log("submitclick"); , keyUp() console.log("keyup"); , btn2Click() console.log("btn2click"); ); < /script>

条件判断 v-if和v-else的使用

< div id="app"> < !-- v-if 当条件为false时,包含v-if指令的元素,根本不会出现在dom中 --> < !-- v-show 当条件为false时,只是包含v-show指令的元素看不到了,但是还存在网页代码中 --> < !-- 跟js的if语句相似，也可以用函数判断决定那个为true --> < h2 v-if="isShow"> < div> abc< /div> < div> abc< /div> < div> abc< /div> < /h2> isShow为false时，显示我 < /div> < script> const app = new Vue( el: #app, data: isShow:false, , methods: ); < /script>

用户登录切换案例

< div id="app"> < span v-if="isUser"> < !-- label里的username这个属性指向input里的id,这样点击label里的文字也可以获取焦点 --> < label for="username"> 用户账号< /label> < !-- 如果不希望文本框的内容被复用就用key设置不同的值,这样文本框才会重新渲染 --> < input type="text" id="username" placeholder="用户账户" key="username"> < /span> < span v-else> < label for="email"> 用户邮箱< /label> < input type="text" id="email" placeholder="用户邮箱" key="email"> < /span> < button @click="isUser = !isUser"> 切换类型< /button> < /div> < script> const app = new Vue( el: #app, data: isUser: true, , methods: ); < /script>

v-for循环遍历基本使用

< div id="app"> < ul> < !-- < li v-for="item in info"> item< /li> 把所有数组或所有对象的value（属性值） --> < !-- value获取值，key获取名字 info遍历的对象--> < li v-for="(value,key) in info"> value-key< /li> < !-- index获取下标 --> < li v-for="(value,key,index) in info"> value-key-index< /li> < /ul> < /div> < script> const app = new Vue( el: #app, data: info: name:why, age:18, height:1.88, methods: ); < /script>

补充：数组中那些方法是响应式

< div id="app"> < ul> < !-- 加key可以提高效率,一般加 :key="item --> < li v-for="item in letters"> item< /li> < /ul> < button @click="btnClick"> 按钮< /button> < /div> < script> const app = new Vue( el: #app, data: letters: [a, b, c, d] , methods: btnClick() // 1.push方法，从最后添加多个元素 // this.letters.push(aaa,bbb) // 4.unshift(),从数组最前面添加元素多个元素 // this.letters.unshift(aaa) // 2.pop()，从最后删除 // this.letters.pop(); //3.shift(),从第一个删除 // this.letters.shift(); // splice()作用：删除/插入/替换元素 // 删除元素：第二个参数传入你要删除几个元素（如果不传，就删除后面所有） // 替换元素：第二个参数，表示我们要替换几个元素，后面是用来替换前面的元素 // (可以说第二个值后面都是添加的值，加几个都可以) // this.letters.splice(1,2,m,n,l,o) // 插入元素：第二个写0，并跟上要插的元素 // this.letters.splice(1,0,ha,he) // 5.sort()排序 // 6.reverse()反转 // this.letters.reverse() // 7.vue里的内部的函数 // Vue.set(要修改的对象，索引值，修改后的值) // Vue.set(this.letters,0,bbb)// 2.通过索引值修改数组中的元素,页面不会自动刷新，因为不是响应式的方法,别用这种方式 // this.letters[0]=bbb; // function sum(...num) //...可以添加多个元素 // // sum(1,2,3,4); ); < /script>

点击切换颜色案例

< div id="app"> < ul> < !--class里的active为true才用这个类 ,点击第几个下标--> < li v-for="(item,index) in movies" :class="active:currentIndex === index" @click="liClick(index)"> item < /li> < /ul> < /div> < script> const app = new Vue( el: #app, data: movies: [海王, 海贼王, 海尔兄弟, 加勒比海盗], currentIndex: 0 , methods: liClick(index) // 让currentIndex等于点击的下标,这样第几个下标就变色了 this.currentIndex = index); < /script>

v-mode(双向绑定) v-mode基本使用

< div id="app"> < !-- v-mode用于表单的双向绑定，文本框的值改变data里对应的值也改变 --> < label for="male"> < !-- input里添加name属性值相同他们就只能选择一个选项，互斥 --> < !-- v-model的值相同也会互斥 --> < input type="radio" id="male" value="https://www.songbingjia.com/android/男" v-model="sex"> 男 < /label> < label for="female"> < input type="radio" id="female" value="https://www.songbingjia.com/android/女" v-model="sex"> 女 < /label> < h2> 您选择的性别是：sex< /h2> < /div> < script> const app = new Vue( el: #app, data: // 这里写啥就默认选中啥，传的是value值 sex:男 , methods: ); < /script>

v-mode结合checkbox

< div id="app"> < !-- 1.checkbox单选框 ,v-model对应布尔类型--> < !-- < label for="agree"> --> < !-- 点击之后isAgree就true了,因为下面disabled取反了 --> < !-- < input type="checkbox" id="agree" v-model="isAgree"> 同意协议 --> < !-- < /label> --> < !-- < h2> 您的选则是：isAgree< /h2> --> < !-- disabled的值为ture就禁止点鸡了 --> < !-- < button :disabled="!isAgree"> 下一步< /button> --> < !-- 2.checkbox多选框,v-model对应数组类型 --> < !-- 选中之后获取value值 --> < input type="checkbox" value="https://www.songbingjia.com/android/篮球" v-model="hobbies"> 篮球 < input type="checkbox" value="https://www.songbingjia.com/android/足球" v-model="hobbies"> 足球 < input type="checkbox" value="https://www.songbingjia.com/android/乒乓球" v-model="hobbies"> 乒乓球 < input type="checkbox" value="https://www.songbingjia.com/android/羽毛球" v-model="hobbies"> 羽毛球 < h2> 您的爱好是:hobbies< /h2> < /div> < script> const app = new Vue( el: #app,data: isAgree: false,//单选框 hobbies: []//多选框 , methods: ); < /script>

v-mode修饰符

< div id="app"> < !-- 1.修饰符：lazy这个修饰符鼠标焦点消失之后才传给vue值 --> < input type="text" v-model.lazy="message"> < h2> message< /h2> < !-- 2.修饰符：number改成数字类型，原本是字符串类型。 type="number"这个表示只能输入数字，但获取的是字符串的数字 --> < input type="number" v-model.number="age"> < h2> age-typeof age< /h2> < !-- 3.修饰符：trim去除两侧空格--> < input type="text" v-model.trim="name"> < h2> 您输入的名字：name< /h2> < /div> < script> const app = new Vue( el: #app, data: message:你好吖, age:0, name: , methods: ); < /script>

最后
如果对您有帮助，希望能给个