1. Interpolation
Interpolation: Use double curly braces { {}} to bind data to the template to achieve simple data rendering. For example: <p>{ {message}}</p>, where message is a variable.
1.1.3 Properties
Values in HTML attributes should use the v-bind directive
1.1.4 Expressions
1.1.1 Text
{ {msg}
1.1.2 html
Use v-html
Vue provides full JavaScript expression support
The effect is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>入门</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style type="text/css">
.f30{
font-size: 30px;
}
</style>
</head>
<body>
<div id="app">
{
{msg}}
<p>html解析</p>
{
{msg2}}
<b :class="msg3" v-html="msg2"></b>
{
{msg4+1}}
{
{sb.substring(3,8)}}
<input v-model="ok">
{
{ok==1? "你好我是雪豹":"妈妈每天都给我抽点支烟，以及听雪"}}
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data(){
return {msg:'hellow 你好 vue',
msg2:'<span style="color:yellow">hello 你好vue </span>',
msg3:'f30',
msg4:5,
ok:1,
sb:'邓郑伟学坤坤跳舞'
}
}
})
</script>
</body>
</html>
2. Instructions:
Using special attributes starting with v-, you can implement functions such as DOM operations, conditional rendering, looping, and event binding. For example: <p v-if="isShow">{ {message}}</p>, where v-if is a conditional rendering instruction.
core instructions
(v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model
v-if|v-else|v-else-if: Determine whether to render the element based on the bool value of the subsequent expression
They can only be brother elements
The previous sibling element of v-else-if must be v-if
The previous sibling element of v-else must be v-if or v-else-if
v-show: similar to v-if, except that it will render elements whose expression behind them is false, and will add css code to such elements: style="display:none"
v-for: JS-like traversal,
Traverse the array: v-for="item in items", items is an array, item is an array element in the array
Traverse objects: v-for="(value,key,index) in stu", value attribute value, key attribute name, index subscript
v-bind
v-on
v-model: used to create two-way data binding on form control elements such as input, select, textarea, checkbox, radio, etc., and automatically update the value of the bound element based on the value on the form.
v-for/v-model binds [multi-select] check boxes and radio buttons together
use:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<title>指令</title>
</head>
<body>
<div id="app">
<input v-model="score">
<b v-if="score < 60 ">不及格</b>
<b v-else-if="score >= 60 && score <70 ">及格</b>
<b v-else-if="score >= 70 && score <80 ">中等</b>
<b v-else-if="score >= 80 && score <90 ">良好</b>
<b v-else="score >=90 && score <100>">优秀</b>
<b>{
{array}}</b>
<i v-for="a in array">{
{a}}||</i>
<i v-for="u in User">{
{u.name}}喜欢{
{u.hobby}}今年{
{u.age}}</i>
<br />
<select>
<option v-for="h in hobby" :value="h.id">
{
{h.name}}
</option></select>
<br />
<div v-for="h in hobby"><input type="checkbox" name="hpbby" :value="h.id">{
{h.name}}</div>
<p>v-show</p>
<div v-show="score>90">v-show-上优秀学员名单</div>
<div v-if="score>90">v-if-上优秀学员名单</div>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data(){
return {score:60,
array:[1,2,3,4],
User:[{name:'小威',hobby:'玩棒子',age:18},
{name:'小威',hobby:'玩棒子',age:18},
{name:'小威',hobby:'玩棒子',age:18}],
hobby:[{id:1,name:'洗脚'},
{id:2,name:'保健'},
{id:3,name:'按摩'},
{id:4,name:'spa'}]
}
}
})
</script>
</body>
</html>Effect:
3.Dynamic parameters
Dynamic parameters: In addition to using fixed instruction names, dynamic parameters can also be used to dynamically bind data. For example: <a v-bind:href="url">{ { message }}</a>, where v-bind dynamically binds the value of the href attribute.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<title>指令</title>
</head>
<body>
<div id="app">
<input v-model="score">
<b v-if="score < 60 ">不及格</b>
<b v-else-if="score >= 60 && score <70 ">及格</b>
<b v-else-if="score >= 70 && score <80 ">中等</b>
<b v-else-if="score >= 80 && score <90 ">良好</b>
<b v-else="score >=90 && score <100>">优秀</b>
<b>{
{array}}</b>
<i v-for="a in array">{
{a}}||</i>
<i v-for="u in User">{
{u.name}}喜欢{
{u.hobby}}今年{
{u.age}}</i>
<br />
<select>
<option v-for="h in hobby" :value="h.id">
{
{h.name}}
</option></select>
<br />
<div v-for="h in hobby"><input type="checkbox" name="hpbby" :value="h.id">{
{h.name}}</div>
<p>v-show</p>
<div v-show="score>90">v-show-上优秀学员名单</div>
<div v-if="score>90">v-if-上优秀学员名单</div>
<p>动态参数</p>
<input v-model="evname"/>
<button v-on:[evname]="test">点我</button>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data(){
return {score:60,
array:[1,2,3,4],
User:[{name:'小威',hobby:'玩棒子',age:18},
{name:'小威',hobby:'玩棒子',age:18},
{name:'小威',hobby:'玩棒子',age:18}],
hobby:[{id:1,name:'洗脚'},
{id:2,name:'保健'},
{id:3,name:'按摩'},
{id:4,name:'spa'}],
evname:'click'
};
}
,methods:{
test(){
alert("点我试试")
}
}
})
</script>
</body>
</html>
4.Filter
Vue allows custom filters, generally used for common text formatting. Filters are available in two places: double curly brace interpolation and v-bind expressions . Filters should be added at the end of js expressions, using pipe operations. Symbol " | "
local filter
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<title>过滤器</title>
</head>
<body>
<div id='app'>
<p>局部过滤器</p>
{
{msg}}
<p>局部过滤器串行使用</p>
{
{msg | filterA | filterB}}
<p>局部过滤器传参</p>
{
{msg | filterC(2,5)}}
</div>
<script type="text/javascript">
new Vue({
el:'#app',
filters:{
'filterA':function(v){
return v.substring(0,5);
},
'filterB':function(v){
return v.substring(2,5);
},
'filterC':function(v,begin,end){
return v.substring(begin,end);
}
},
data(){
return {
msg:'你好 饿了么'
}
}
})
</script>
</body>
</html>
global filter
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="date.js"></script>
<title>过滤器</title>
</head>
<body>
<div id='app'>
<p>局部过滤器</p>
{
{msg}}
<p>局部过滤器串行使用</p>
{
{msg | filterA | filterB}}
<p>局部过滤器传参</p>
{
{msg | filterC(2,5)}}
<p>全局过滤器</p>
没有过滤器的结果： {
{time}}
有过滤器的结果：{
{time|fmtDate}}
<script src="js/date.js"></script>
</div>
<script type="text/javascript">
Vue.filter('fmtDate', function(value) {
return fmtDate(value, 'yyyy年MM月dd日')
});
new Vue({
el:'#app',
filters:{
'filterA':function(v){
return v.substring(0,5);
},
'filterB':function(v){
return v.substring(2,5);
},
'filterC':function(v,begin,end){
return v.substring(begin,end);
}
},
data(){
return {
msg:'你好 饿了么',
time:new Date()
}
}
})
</script>
</body>
</html>data.js
//给Date类添加了一个新的实例方法format
Date.prototype.format = function (fmt) {
//debugger;
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
};
function fmtDate(date, pattern) {
var ts = date.getTime();
var d = new Date(ts).format("yyyy-MM-dd hh:mm:ss");
if (pattern) {
d = new Date(ts).format(pattern);
}
return d.toLocaleString();
};
result:
5. Computed properties and monitoring properties
Computed properties
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<meta charset="utf-8">
<title>计算属性监听属性</title>
</head>
<body>
<div id="app">
<p>计算属性</p>
单价：<input v-model="price">
数量：<input v-model="num">
小计:{
{count}}
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data(){
return {
price:79,
num:1
};
},
computed:{
count:function(){
return this.price*this.num
}
}
})
</script>
</body>
</html>Effect:
Change to 2
Characteristics of computed attributes: one party affects the other (one-way)
Listening properties:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<meta charset="utf-8">
<title>计算属性监听属性</title>
</head>
<body>
<div id="app">
<p>计算属性</p>
单价：<input v-model="price">
数量：<input v-model="num">
小计:{
{count}}
<p>监听属性</p>
千米：<input v-model="km" />
米：<input v-model="m"/>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data(){
return {
price:79,
num:1,
m:1000,
km:1
};
},
computed:{
count:function(){
return this.price*this.num
}
},
watch:{
km:function(v){
this.m=parseInt(v) * 1000;
},
m:function(v){
this.km=parseInt(v) / 1000;
}
}
})
</script>
</body>
</html>Effect:
Monitoring attribute characteristics: two parties influence each other (two-way)
Practical case:
shopping cart:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>购物车</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<style>
.container {
width: 600px;
margin: 0 auto;
}
table {
border-collapse: collapse;
width: 100%;
}
table td {
border: 1px solid #ddd;
padding: 10px;
text-align: center;
}
.input-wrapper {
display: flex;
justify-content: center;
align-items: center;
}
button {
padding: 5px 10px;
background-color: #eee;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app" class="container">
<p>购物车</p>
<table>
<thead>
<tr>
<th>物品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in items" :key="index">
<td>{
{ item.name }}</td>
<td>{
{ item.price }}</td>
<td class="input-wrapper">
<button @click="decrement(index)">-</button>
<input v-model="item.quantity" />
<button @click="increment(index)">+</button>
</td>
<td>{
{ item.price * item.quantity }}</td>
</tr>
<tr>
<td colspan="3">总价</td>
<td>{
{ total }}</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
items: [
{ name: '帽子', price: 10, quantity: 1 },
{ name: '衣服', price: 30, quantity: 1 },
{ name: '裤子', price: 20, quantity: 1 },
{ name: '肾宝片', price: 200, quantity: 1 },
{ name: '羊腰子', price: 20, quantity: 1 },
],
};
},
methods: {
increment(index) {
this.items[index].quantity++;
},
decrement(index) {
if (this.items[index].quantity > 1) {
this.items[index].quantity--;
}
},
},
computed: {
total() {
return this.items.reduce((sum, item) => sum + (item.price * item.quantity), 0);
},
},
});
</script>
</body>
</html>Effect:
