Vue 基础1
本文所有内容均来自 书籍《vue.js实战》
v-model
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello world</title>
</head>
<body>
<div id="app">
<input type="text" v-model="name" placeholder="your name">
<h1>Hello,{{ name }}</h1>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
<!-- #app为某个元素的id -->
el:'#app',
data: {
name: ''
}
})
</script>
</body>
</html>
为缩减篇幅,本文后面所有代码 都只给出body标签内的内容
v-html 、v-pre
<div id="app">
<span v-html="link"></span>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data: {
link: '<a href="#">这是一个链接</a>'
}
})
</script>
<div id="app">
<span v-pre>{{只为显示双大括号}}</span>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data: ''
})
</script>
三元运算符,四则运算
<div id="app">
<!-- Vue .js 只支持单个表达式,不支持语句和流控制 -->
{{ number / 10 }}
{{ isOK ? 'Y' : 'N' }}
{{ text.split(',').reverse().join(',') }}
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data: {
number: 100,
isOK: false,
text: '123,456'
}
})
</script>
过滤器
<div id="app">
{{ date | formatDate}}<!-- 使用过滤器格式化时间 -->
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var padDate = function(value) {
return value < 10 ? '0' + value : value
};
var app = new Vue({
el:'#app',
data: {
date : new Date()
},
filters: {
formatDate: function(value) {
var date = new Date(value);
var year = date.getFullYear();
var month = padDate(date.getMonth()+1);
var day = padDate(date.getDate());
var hours = padDate(date.getHours());
var minutes = padDate(date.getMinutes());
var seconds = padDate(date.getSeconds());
return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
}
},
mounted: function() {
var _this = this;// 声明一个变量指向Vue实例this,保证作用域一致
this.timer = setInterval(function() {
_this.date = new Date(); // 修改数据
}, 1000);
},
beforeDestroy: function() {
if(this.timer) {
clearInterval(this.timer);
}
}
})
</script>
过滤器应当用于处理简单的文本转换,如果要实现更为复杂的数据变换,应该使用计算属性
v-bind
<div id="app">
<a v-bind:href="url">链接</a>
<img v-bind:src="imgUrl">
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data: {
url : 'https://www.github.com',
imgUrl : 'https://gitee.com/jack541/repo-for-pic-go/raw/master/img/image-20220102162032176.png'
}
})
</script>
以下两句等效:
<a v-bind:href="url">链接</a>
<a :href="url">链接</a>
v-on
<div id="app">
<p v-if="show">这是一段文本</p>
<button v-on:click="handleClose">点击隐藏</button>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data: {
show : true
},
methods: {
handleClose: function(){
if (this.show == true)
this.show = false;
else
this.show = true;
}
}
})
</script>
以下两句等效:
<button v-on:click="handleClose">点击隐藏</button>
<button @click="handleClose">点击隐藏</button>
computed属性用法
<div id="app">
{{ reversedText }}
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data: {
text: '123,456'
},
computed: {
reversedText: function() {
return this.text.split(',').reverse().join(',');
}
}
})
</script>
<div id="app">
总价:{{ prices }}
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data: {
package1: [
{
name: 'iPhone 13 128G',
price: 5999,
count: 3
},{
name: 'iPad mini6',
price: 3799,
count: 5
}
],
package2: [
{
name: 'iPhone 13 pro 256G',
price: 8999,
count: 3
},{
name: 'Mac Pro intel i9 1TB SDD 32G RAM',
price: 21999,
count: 1
}
]
},
computed: {
prices : function() {
var prices = 0;
for (var i = 0; i < this.package1.length; i++) {
prices += this.package1[i].price * this.package1[i].count;
}
for (var i = 0; i < this.package2.length; i++) {
prices += this.package2[i].price * this.package2[i].count;
}
return prices;
}
}
})
</script>
setter getter
<div id="app">
姓名:{{ fullName }}
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data: {
firstName: 'jack',
lastName: 'green'
},
computed: {
fullName: {
//getter 用于读取
get: function () {
return this.firstName + ' ' + this.lastName;
},
// setter 写入时出发
set: function (newValue) {
var names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
}
})
</script>
计算缓存
计算属性是基于它的依赖缓存的。 一个计算属性所依赖的数据发生变化时,它才会重新取值。
<div id="app">
<!-- 注意,这里的 reversedText是方法,所以要带()-->
{{ reversedText() }}
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data: {
text: '123,456'
},
methods: {
reversedText: function() {
return this.text.split(',').reverse().join(',');
}
}
})
</script>
使用 v-bind切换class属性
<div id="app">
<div :class="{ 'active': isActive, 'error': isError }"></div>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data: {
isActive: true,
isError: false
}
})
</script>