目录

初识Vue

遍历数组

v-bind

基本使用

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

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

computed 计算属性

基本使用

v-on事件的监听

v-on的参数问题

v-on的修饰符

条件判断

v-if和v-else的使用

用户登录切换案例

v-for循环遍历

基本使用

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

点击切换颜色 案例

v-mode(双向绑定)

v-mode基本使用

v-mode结合checkbox

v-mode修饰符

---

初识Vue <div id="app"> <!-- mustache语法中，不仅可以直接写变量，也可以写简单的表达式 --> <h2>{{message+name}}</h2> <h2>{{mesage+' '+neme}}</h2> <h3>{{message}}</h3> <h1>{{name}}</h1> </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 :href="aHref"></a> <img v-bind:src="对应图片地址" alt=""> </div> <script> // hook钩子 const app = new Vue({ el: '#app', data: { message: '你好吖', aHref: "·" } }) </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].proce } return 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="提交" @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> <h1 v-else>isShow为false时，显示我</h1> </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="男" v-model="sex">男 </label> <label for="female"> <input type="radio" id="female" value="女" 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="篮球" v-model="hobbies">篮球 <input type="checkbox" value="足球" v-model="hobbies">足球 <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球 <input type="checkbox" value="羽毛球" 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>

期待各位小伙伴加入我们一起学习的队伍哦?

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。