gitHub address: lesson04 in https://github.com/manlili/vue_learn
Double parentheses for data binding
(1) Writing method one: {{message}}, which can respond in real time
(2) Writing method 2: {{*message}}, single interpolation, future data changes will not cause interpolation updates (after vue2.0, use v-once <p v-once>{{message}}< /p> One-time change, no update when data changes)
(3) Double-bracket tags can also be used on attributes (you cannot write this after vue2.0, you must write: <p :class="'lili-'+message">On</p>)
For example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue interpolation</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
.lili-xiaoman {
color: red;
}
</style>
</head>
<body>
<div class="test">
<p>{{message}}</p> <!--This value can be responded to in real time-->
<p>{{*message}}</p> <!--Single interpolation, future data changes will not cause interpolation updates, such as writing in the console: myVue.message=123-->
<p class="lili-{{message}}">Double bracket tags can also be used on attributes</p>
</div>
<script type="text/javascript">
var myVue = new Vue (
el: ".test",
data: {
message:"xiaoman"
}
})
</script>
</body>
</html>
When I change the message in the console, {{*message}} does not change the value
The double and double brackets can be javascript unit expressions
For example (only unit expressions are supported)
|
1
2
3
|
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
|
but not supported
<!-- This is a statement, not an expression: -->
{{ var a = 1 }}
<!-- Process control is also not allowed, you can use ternary expressions instead -->
{{ if (ok) { return message } }}
The complete test code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Content inside vue double brackets</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<div class="test">
<p>{{message+1}}</p> <!--JavaScript expressions, but only cell expressions are supported -->
</div>
<script type="text/javascript">
var myVue = new Vue (
el: ".test",
data: {
message:12
}
});
</script>
</body>
</html>
The output above is 13
Three double brackets can put filters
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue data binding</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<div class="test">
<p>{{message | sum}}</p>
</div>
<script type="text/javascript">
Vue.filter("sum", function(value) { //The global method Vue.filter() registers a custom filter, which must be placed in front of the Vue instantiation
return value + 4;
});
var myVue = new Vue (
el: ".test",
data: {
message: 12
}
});
</script>
</body>
</html>
The output value of the above code is 16
4. Binding data with directives (directives are special prefixed v- features)
Take an example of v-if:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue data binding</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<div class="test">
<p v-if="isShow">isShow controls whether I show 1</p>
<p v-if="!isShow">isShow controls whether I show 2</p>
</div>
<script type="text/javascript">
var myVue = new Vue (
el: ".test",
data: {
isShow: true,
}
});
</script>
</body>
</html>
The above only shows the first div
Five v-bind binding data
Notes:
(1) It is also correct to write {{}} directly in the property, because Vue will convert the double brackets in the property to v-bind when rendering internally, which will be slightly slower than using v-bind directly.
(2) v-bind can be abbreviated as:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue data binding</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<div class="test">
<a href={{url}}>Click me to jump to Baidu homepage</a> <!--This is correct, in fact, the internal feature interpolation will be converted to v-bind binding, which will slightly reduce efficiency -->
<a v-bind:href="url">Click me to jump to Baidu homepage</a> <!--Abbreviated as:href-->
<div style="color: {{colorA}}">I am red</div> <!--This way of writing is correct, in fact, the internal feature interpolation will be converted to v-bind binding, which will reduce slightly Efficiency -->
<div v-bind:style="{color: colorB}">I am green</div> <!--Abbreviated as:style-->
</div>
<script type="text/javascript">
var myVue = new Vue (
el: ".test",
data: {
url: "https://www.baidu.com/",
colorA: 'red',
colorB: 'green'
}
});
</script>
</body>
</html>
Six v-on binding data
(1) v-on is implemented in the methods of vue
(2) v-on can be abbreviated as @
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue data binding</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<div class="test">
<button v-on:click="goAction()"> <!--can be shortened to @click-->
Click me to jump to Baidu
</button>
</div>
<script type="text/javascript">
var myVue = new Vue (
el: ".test",
methods: {
goAction: function () {
location.href = "https://www.baidu.com/";
}
}
});
</script>
</body>
</html>