1.vue Basic Grammar
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- interpolation -->
<h3>{{msg}}</h3>
<!--Use v-html Instructions for Output html Code -->
<span v-html="ss"></span>
<!--HTML Values in attributes should be used v-bind instructions -->
<!-- <input :value="val" /> -->
<input v-bind:value="val" />
<!-- Vue Provides complete JavaScript Expression support -->
{{str.toUpperCase()}}
{{number+3}}
<span :id="'book'+id">dynamic ID</span>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data() {
return {
msg:'xxxxxxxxxx',
ss:'<h2 style="color:red;">java Getting Started to Mastery</h2>',
val:23,
str:'java Getting Started to Mastery',
number:12,
id:1,
}
}
})
</script>
</body>
</html>
2. Instructions and dynamic parameters
Instructions refer to special attributes with a prefix of "v-".
- The sibling element on v-else-if must be v-if
- A sibling element on v-else must be v-if or v-else-if
- v-show: Similar to v-if, hide elements when conditions are not met, and add css code to such elements: style="display:none"
- v-if: hide elements and disappear code snippets when conditions are not met
- v-for: JS-like traversal (drop-down box implementation, check box implementation)
- Use dynamic parameters to bind a dynamic event name function (expression: v-on:[evname] Evname: specific event name )
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="cp">
<!-- (v-if|v-else|v-else-if)Use -->
<input type="text" v-model="score" />
<div v-if="score>80">
Very good
</div>
<div v-else-if="score>60">
Just so so
</div>
<div v-else="score<60">
Efforts Needed
</div>
<!-- v-show Use and v-if Similar-->
<div v-show="score>80">
Reward one big mouth
</div>
<!-- v-for Use the Create drop-down box -->
<select v-model="hobbySelect">
<option v-for="h in hobby" :value="h.id">{{h.name}}</option>
</select>
<input type="text" v-model="hobbySelect" />
<!-- v-for checkbox Use -->
<div v-for="h in hobby">
<input type="checkbox" :value="h.id" />{{h.name}}
</div>
<!-- dynamic parameter -->
<button type="button" v-on:[evname]="href">confirm</button>
</div>
<script type="text/javascript">
new Vue({
el: '#cp',
data() {
return {
score: 70,
hobby: [{
id: "1",
name: "Wash one's feet"
},
{
id: "2",
name: "massage"
},
{
id: "3",
name: "Sleep"
}
],
hobbySelect:2,
evname:'click',
}
},
methods:{
href(){
alert('xxxxx')
}
}
})
</script>
</body>
</html>
3. Filters
1. Global filters
Vue.filter('filterName', function (value) {
// value represents the content to be filtered
});
2. Local filter
new Vue({
filters:{'filterName':function(value){}}
});
Can be used with multiple filters simultaneously
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="filter">
<p>{{msg|all}}</p>
<p>{{msg|single}}</p>
<p>{{msg|all|single}}</p>
<p>{{msg|parem(1,3)}}</p>
</div>
<script type="text/javascript">
/* Global filter */
Vue.filter('all',function(value){
return value.substring(0,2)
})
new Vue({
el:'#filter',
data() {
return {
msg:'JAVA',
}
},
/* Local filter */
filters:{
'single':function(val){
return val.substring(2,3);
},
/* Local filters can carry additional parameters */
'parem':function(val,start,end){
return val.substring(start,end);
}
}
})
</script>
</body>
</html>
4. Computing attributes
Calculated properties can be used to quickly calculate the properties displayed in the View. These calculations will be cached and updated only when needed
computed:{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="sum">
<!-- Computing attributes -->
<table border="1" style="width: 700px; height: 400px;">
<tr>
<td>Cap</td>
<td>253</td>
<td><input v-model="maozi" /></td>
<td>{{maozitotal}}</td>
</tr>
<tr>
<td>clothes</td>
<td>777</td>
<td><input v-model="yif" /></td>
<td>{{yiftotal}}</td>
</tr>
<tr>
<td>trousers</td>
<td>245</td>
<td><input v-model="kuzi" /></td>
<td>{{kuzitotal}}</td>
</tr>
<tr>
<td>shoes</td>
<td>88</td>
<td><input v-model="xiezi" /></td>
<td>{{xiezitotal}}</td>
</tr>
<tr>
<td>Total Price</td>
<td colspan="4">{{total}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
new Vue({
el: '#sum',
data() {
return {
maozi:1,
yif:1,
kuzi:1,
xiezi:1,
}
},
computed:{
maozitotal(){
return this.maozi*253
},
yiftotal(){
return this.yif*777
},
kuzitotal(){
return this.kuzi*245
},
xiezitotal(){
return this.xiezi*88
},
total(){
return this.maozitotal+this.yiftotal+this.kuzitotal+this.xiezitotal
}
},
})
</script>
</body>
</html>
Equivalent to the previous list of goods, more convenient
5. Listening Properties
Watch property, we can watch to respond to changes in data
watch:{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="sum">
<!-- Listening Properties -->
Kilometers <input v-model="km" />
rice <input v-model="m" />
</div>
<script type="text/javascript">
new Vue({
el: '#sum',
data() {
return {
km:2,
m:2000,
}
},
watch:{
km:function(v){
this.m=parseInt(v)*1000;
},
m:function(v){
this.km=parseInt(v)/1000;
}
}
})
</script>
</body>
</html>
The difference between computed and watch attributes
1. computed monitors the variables it defines, which are not declared in the data, but are defined directly in the computer, and can then be used for two-way data binding on a page to show results or for other processing.
computed is better suited to return a result value after processing multiple variables or objects, that is, when one value of multiple variables changes, the value we monitor changes.
2. watch is mainly used to monitor changes in vue instances. Of course, the variables it monitors must be declared in the data. It can monitor either a variable or an object.