快速入门vue，爆肝一万多字，“建议收藏”，用到省的百度了（含实战案例）
Posted 前端老实人
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了快速入门vue，爆肝一万多字，“建议收藏”，用到省的百度了（含实战案例）相关的知识，希望对你有一定的参考价值。
目录
初识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: "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].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>期待各位小伙伴加入我们一起学习的队伍哦❤
以上是关于快速入门vue，爆肝一万多字，“建议收藏”，用到省的百度了（含实战案例）的主要内容，如果未能解决你的问题，请参考以下文章
❤️❤️爆肝3万字整理小白入门与提升分布式版本管理软件：Git，图文并茂(建议收藏)--已码一万字❤️❤️
爆肝一周面试10多家中大厂后的万字总结——❤️JavaWeb篇❤️（建议收藏）