vue.js基础
(本站将持续更新.....)
介绍
vue.js是什么
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
起步
你可以通过创建.html文件，然后通过如下方式应用Vue：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者去官方网站下载.vue文件。
实例
声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
<div id="app">
{{ message }}
</div>
<script>
// 编程范式：声明式编程
const app = new Vue({
el: '#app', //用于挂载要管理的元素
data: { //定义数据
message: 'Hello Vue'
}
})
</script>
v-bind的基本使用
<div id='app'>
<h1>{{message}}</h1>
<!-- 普通写法，使用v-bind指令 -->
<img v-bind:src='imgURL' alt="" width="600px">
<h1>{{message1}}</h1>
<!-- 语法糖写法 -->
<img :src="imgURL" alt="" width="600px">
</div>
<script>
var app = new Vue({
el:'#app',
data: {
message:'图片绑定:',
message1: '图片绑定语法糖写法:',
imgURL:'https://files.dbnuo.com/wallpaper/wallhaven-83yl1y.webp',
}
})
</script>
v-bind动态绑定style
<style>
.active{
color: red;
}
.line{
font-size: 40px;
font-weight: 600;
}
</style>
<div id='app'>
<h2 v-bind:class='{active:isActive, line:isLine}'>{{message}}</h2>
<h2 v-bind:class='getClasses()'>{{message}}</h2>
<button v-on:click='change'>按钮</button>
</div>
<script>
let app = new Vue({
el:'#app',
data: {
message:'你好啊.Vue!',
isActive:true,
isLine:true,
},
methods: {
change:function() {
this.isActive = !this.isActive;
this.isLine = !this.isLine;
},
getClasses:function() {
return {active:this.isActive, line:this.isLine}
},
}
})
</script>
计算属性
计算属性写法
<div id='app'>
<h3>{{pricesText}}{{allPrices}}</h3>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
pricesText: '总价格：',
books: [
{id: 100, name: 'javascript', price: 100},
{id: 101, name: 'linux', price: 120},
{id: 102, name: 'my sql', price: 145},
{id: 103, name: 'jquery', price: 78},
]
},
computed: {
allPrices: function() {
let result = 0;
for(let i = 0; i < this.books.length; i++) {
result += this.books[i].price;
}
return result;
}
}
})
</script>
计算属性setter和getter
<div id='app'>
<h2>{{fullName}}</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'lenorn',
lastName: 'bob',
},
computed: {
fullName: {
set:function(newValue) {
const names = newValue.split();
this.firstName = newValue[0];
this.lastName = newValue[1];
},
get:function() {
return this.firstName + ' ' +this.lastName;
}
}
}
})
</script>
计算属性(computed)和(methods)的对比
<div id="app">
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
</div>
<script>
const app = new Vue({
el:'#app',
data: {
firstName: 'lenorn',
lastName: 'bob',
},
methods: {
getFullName: function() {
console.log('getFullName');
return this.firstName + ' ' + this.lastName;
}
},
computed: {
fullName: function() {
console.log('fullName');
return this.firstName + ' ' + this.lastName;
}
}
})
</script>
v-on
v-on写法
<div id='app'>
<h2>当前计数{{num}}</h2>
<button v-on:click="add">+</button>
<!-- @是v-on的语法糖写法 -->
<button @click="sub">-</button>
</div>
<script>
const app = new Vue({
el:'#app',
data: {
num:0
},
methods: {
add: function() {
this.num++;
},
sub: function() {
this.num--;
}
},
})
</script>
v-on的传参问题
<div id="app">
<!-- 事件调用方法没有参数 -->
<button v-on:click='btn1Click'>按钮1</button>
<!-- 在事件定义时，写方法时省略了小括号，但是方法本身是需要一个参数的，这个时候，
Vue会默认将浏览器生产的event事件对象作为参数传入到方法-->
<button v-on:click='btn2Click()'>按钮2</button>
<button v-on:click='btn2Click(123)'>按钮3</button>
<button v-on:click='btn2Click'>按钮4</button>
<!-- 方法定义是，我们需要event对象，同时也需要其他参数,
如果在调用中想获取event对象，就必须写出 '$event' -->
<button v-on:click='btn3Click()'>按钮5</button>
<button v-on:click="btn3Click('abc',$event)">按钮6</button>
<button v-on:click='btn3Click'>按钮7</button>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
},
methods: {
btn1Click() {
console.log('btn1Click');
},
btn2Click(event) {
console.log(event,'btn2Click');
},
btn3Click(abc, event) {
console.log('++++++',abc,event);
}
}
})
</script>
v-on中修饰符(事件监听)
<div id="app">
<div v-on:click='divClick'>
<!-- 1.stop：停止(阻止)冒泡 -->
<button v-on:click.stop='btn1Click'>按钮1</button>
</div>
<br>
<form action="baidu">
<!-- 2.prevent：阻止默认行为 -->
<input type="submit" value="提交" @click.prevent='formClick'>
</form>
<!-- 3.监听某个键盘的键帽：例如(回车：enter) -->
<input type="text" @keyup.enter='keyup'> <br>
<!-- 4.once：只触发一次回调 -->
<button @click.once='once'>按钮2</button>
</div>
<script>
const app = new Vue({
el:'#app',
data: {
},
methods: {
btn1Click() {
console.log('btn1');
},
divClick() {
console.log('div');
},
formClick() {
console.log('form');
},
keyup() {
console.log('keyup');
},
once() {
console.log('once');
}
}
})
</script>
v-if条件判断
v-if的写法
<div id="app">
<div v-if=isshow>
<h2>{{message}}</h2>
<h2>{{message}}</h2>
<h2>{{message}}</h2>
<h2>{{message}}</h2>
<h2>{{message}}</h2>
</div>
<div v-else>
<h1>isshow为false时显示我</h1>
</div>
<div>
<h3 v-if='score>=80'>优秀</h3>
<h3 v-else-if='score>=70'>良好</h3>
<h3 v-else-if='score>=60'>及格</h3>
<h3 v-else>不及格</h3>
</div>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message:'你好啊',
isshow:true,
score:80,
},
})
</script>
v-if和v-show的区别
<div id='app'>
<!-- v-if：当条件为false时，包含v-if指令的元素，根本不会存在dom中 -->
<h2 v-if='isShow'>{{message}}</h2>
<!-- v-show：当条件为false是，v-show只是为元素增加了行内样式：display:none -->
<h2 v-show='isShow'>{{message}}</h2>
</div>
<script>
const app = new Vue({
el:'#app',
data: {
message:'你好啊',
isShow:true,
}
})
</script>
v-for循环遍历
v-for循环遍历的写法
<div id='app'>
<ul>
<!-- 在遍历的过程中，没有使用索引值(下标值) -->
<li v-for = 'item in names'>{{item}}</li> <br>
<!-- 在遍历过程中，获取索引值 -->
<li v-for = '(item, index) in names'>{{index+1}}.{{item}}</li>
</ul>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
names:['shy','kobe','james','curry']
}
})
</script>
v-for遍历对象
<div id='app'>
<ul>
<!-- 在遍历对象中，如果只是获得一个值，那么获得的是value -->
<li v-for='item in info'>{{item}}</li> <br>
<!-- 获取value和key的格式：(value, key) -->
<li v-for='(value, key) in info'>{{key}}-{{value}}</li> <br>
<!-- 获取value,key和index -->
<li v-for='(value, key, index) in info'>{{index+1}}.{{key}}-{{value}}</li>
</ul>
</div>
<script>
const app = new Vue({
el:'#app',
data: {
info: {
name:'boy',
age:18,
height:1.88,
}
}
})
</script>
v-for使用过程中添加key
<div id='app'>
<ul>
<!-- key的作用是为了高效的更新虚拟DOM
或者说：加key是为了内部修改节点的时候效率更高 -->
<li v-for = 'item in letter' :key='item'>{{item}}</li>
</ul>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
letter: ['A','B','C','D','E','F'],
},
})
</script>
购物车案例
<div id='app'>
<div v-if='books.length > 0'>
<table>
<thead>
<tr>
<th></th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for='(item, index) in books'>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td>{{item.price * item.count | showPrice}}</td>
<td>
<button @click='add(index)'>+</button>
{{item.count}}
<button @click='sub(index)' v-bind:disabled='item.count <= 1'>-</button>
</td>
<td><button @click='removeClick(index)'>移除</button></td>
</tr>
</tbody>
</table>
总价格：{{getPrice | showPrice}}
</div>
<h2 v-else>当前购物车为空</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
books:[
{id:1, name:'《算法导论》',date:'2006-9',price:85.00,count:1},
{id:1, name:'《UNIX编程艺术》',date:'2006-2',price:59.00,count:1},
{id:1, name:'《编程珠玑》',date:'2008-10',price:39.00,count:1},
{id:1, name:'《代码大全》',date:'2006-3',price:128.00,count:1},
],
allPrice:0,
},
methods: {
add(index) {
this.books[index].count++;
},
sub(index) {
this.books[index].count--;
},
removeClick(index) {
this.books.splice(index, 1);
}
},
computed: {
getPrice() {
return this.books.reduce(function(pre, book) {
return pre + book.price * book.count;
}, 0);
},
},
//filters是vue中的修饰符
filters: {
showPrice(price) {
return '￥' + price.toFixed(2);
}
}
})
</script>
v-model
v-model的使用
<body>
<div id='app'>
<input type="text" v-model = 'message'>
{{message}}
</div>
<script src="vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message:'你好啊！',
}
})
</script>
</body>
v-model的原理
<body>
<div id="app">
<input type="text" :value="message" @input = "message = $event.target.value">
<h2>{{message}}</h2>
<!-- 总结： -->
<input type="text" v-model="message">
<!-- 等同于 -->
<input type="text" :value="message" @input = "message = $event.target.value">
<h2>{{message}}</h2>
</div>
<script src="vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data: {
message:'你好啊',
}
})
</script>
</body>
v-model结合radio
<body>
<div id='app'>
<label for="man">
<input type="radio" id='man' v-model = 'sex' value="男">男
</label>
<label for="woman">
<input type="radio" id='woman' v-model = 'sex' value="女">女
</label>
<h2>您的性别是：{{sex}}</h2>
</div>
<script src="vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
sex:'男',
}
})
</script>
</body>
v-model结合checkbox
<body>
<div id='app'>
<h3>
<label for="ball1">
<input type="checkbox" id='ball1' value='篮球' v-model='isHobys'>篮球
</label>
<label for="ball2">
<input type="checkbox" id='ball2' value='足球' v-model='isHobys'>足球
</label>
<label for="ball3">
<input type="checkbox" id='ball3' value='羽毛球' v-model='isHobys'>羽毛球
</label>
<label for="ball4">
<input type="checkbox" id='ball4' value='乒乓球' v-model='isHobys'>乒乓球
</label> <br>
您选择的兴趣有：{{isHobys}}
</h3>
<hr>
<label for="agreen">
<h3><input type="checkbox" id='agreen' v-model='isAgreen'>同意协议</h3>
</label>
<button :disabled='!isAgreen'>下一步</button>
</div>
<script src="vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data: {
isHobys:[],
isAgreen:false,
}
})
</script>
</body>
v-model结合select
<body>
<div id='app'>
<!-- 选择一个 -->
<select name="abc" v-model='fruit'>
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="葡萄">葡萄</option>
<option value="菠萝">菠萝</option>
</select>
<h2>你选择的是:{{fruit}}</h2>
<!-- 选择多个 -->
<select name="abc" v-model='fruits' multiple>
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="葡萄">葡萄</option>
<option value="菠萝">菠萝</option>
</select>
<h2>你选择的是:{{fruits}}</h2>
</div>
<script src="vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data: {
fruit:'香蕉',
fruits:[],
}
})
</script>
</body>
v-model值绑定
<body>
<div id='app'>
<h3>
<label v-for='items in orignHobbys' :for="items">
<input type='checkbox' :id='items' :value='items' v-model='hobbys'>{{items}}
</label> <br>
您选择的兴趣有：{{hobbys}}
</h3>
</div>
<script src="vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data: {
hobbys:[],
orignHobbys:['篮球','高尔夫','台球','足球','乒乓球','羽毛球'],
}
})
</script>
</body>
v-model修饰符
<body>
<div id='app'>
<!-- 1.修饰符：lazy(有点像懒加载，用户按回车或者失去焦点才会同步) -->
<input type="text" v-model.lazy='message'>
<h2>{{message}}</h2>
<!-- 2.修饰符：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 src="vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message:'Vue!',
age:20,
name:'',
}
})
</script>
</body>
下一篇：Vue组件化开发
组件化是Vue的精髓，Vue就是由一个一个的组件构成的。Vue的组件化设计到的内容又非常多。
通俗点就是一下2点：
1.如果我们将一个页面中所有的逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。
2.但如果，我们将一个页面拆分成一个个小的功能块，每个功能块完全属于自己这部分的独立的功能，那么之后整个页面的管理和维护就变得非常的容易了。
浙公网安备 33010602011771号