Vue download address: https://github.com/vuejs/vue (download and unzip it, and you can get the vue.js file in dist)
Direct use of public CDN:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Vue is a set of progressive framework for building user interface (you can selectively use one or some components of the framework, and the use of these components does not need to apply all components of the framework; moreover, the use of these components does not require your system to use the framework). Unlike other large frameworks, Vue is designed to be applied layer by layer from bottom to top. Vue's core library only focuses on view layers, which is not only easy to start, but also easy to integrate with third-party libraries or existing projects. On the other hand, when combined with modern tool chains and various supporting class libraries, Vue can also provide drivers for complex single page applications.
Vue uses MVVM mode
M: That is, Model, including data and some basic operations
5: That is, View, page rendering result
VM: view model, two-way operation between model and view
Before MVVM, the developer obtains the required data Model from the back end, and then renders the Model into the View through DOM operation. Then, when the user operates the View, we also need to obtain the data in the View through the DOM, and then synchronize it to the Model.
What the VM in MVVM needs to do is to completely encapsulate the DOM operation. Developers no longer need to care about how the Model and View interact with each other: as long as the Model changes, it will naturally appear in the View. When the user modifies the View, the data in the Model will also change, freeing developers from cumbersome DOM operation, Focus on how to operate the Model.
vue rendering:
<!DOCTYPE html>
<head>
<title>vue Rendering test</title>
</head>
<body>
<div id="app"> <h2>Interpolation expression:{{name}}</h2> </div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
//vue initialization
var app = new Vue({
el:"#app",//el is element, which is the page element to be rendered
data: {
name:"vue Render"
}
});
</script>
</body>
</html>
Hook function:
<div id="app"> {{msg}} </div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{ msg: "" },
//Hook function
created() {
//this here represents the vue instance
console.log(this);
this.msg = "hello vue. created.";
}
})
</script>
Hook function created() effect:
v-text,v-html:
<div id="app">
v-text: <span v-text="msg"></span><br>
v-html: <span v-html="msg"></span><br>
</div>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data:{
msg:"<h2>hello, vue.</h2>"
}
});
</script>
V-text and v-html effects: (v-text output text and v-html output will be rendered)
v-model bidirectional binding:
<div id="app">
<input type="checkbox" value="Java" v-model="language">Java<br>
<input type="checkbox" value="Python" v-model="language">Python<br>
<input type="checkbox" value="Swift" v-model="language">C++<br>
<h2>
You chose: {{language.join(",")}}
</h2>
</div>
<!--Multiple checkbox Corresponding to one model When, model The type of is array, single checkbox yes boolean type
radio The corresponding value is input of value value
input and textarea Default corresponding model Is a string
select Single choice corresponds to string, and multiple choice corresponds to array-->
<script type="text/javascript">
let app = new Vue({
el:"#app",
data:{
language:[]
}
});
</script>
v-model effect: (if the input selection changes, the value of h2 will change accordingly, and vice versa)
v-on binding event: (can be abbreviated as @)
<div id="app">
<button v-on:click="num++">increase</button>
<button @click="decrement">reduce</button>
<h2> {{num}} </h2>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
num:"1",
},
methods:{
//Diminishing
decrement () {
this.num--;
}
}
});
</script>
v-for:
<div id="app">
<ul>
<li v-for="(user, index) in users" :key="index">
{{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
</li>
</ul>
<ul>
<li v-for="(value, key, index) in person">
{{index}}--{{key}}--{{value}}
</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
users:[
{"name":"silver grey","age":13,"gender":"male"},
{"name":"Energy angel","age":13,"gender":"female"},
{"name":"Aiyafara","age":4,"gender":"female"}
],
person:{"name":"Stell","age":13,"gender":"female","address":"Aquidneck Island"}
}
});
</script>
v-for effect:
v-for syntax:
v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
1 parameter, the value of the object is obtained
When there are 2 parameters, the first is the value and the second is the key
When there are 3 parameters, the third is the index, starting from 0
v-if,v-else-if,v-else:
<div id="app">
<ul v-for="(user, index) in users" :key="index" >
<li v-if="user.gender=='female'" style="background-color: deeppink; color: white">
{{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
</li>
<li v-else-if="user.gender=='male'" style="background-color: blue; color: white">
{{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
</li>
<li v-else>
{{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
show: true,
users:[
{"name":"silver grey","age":13,"gender":"male"},
{"name":"Energy angel","age":13,"gender":"female"},
{"name":"Aiyafara","age":4,"gender":"female"},
{"name":"Serena","age":16,"gender":""}
]
}
});
</script>
v-if, v-else-if, v-else effects:
v-show: (show or hide)
<div id="app">
<button @click="show=!show">Point me</button>
<h2 v-show="show">
Hello; v-show!
</h2>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
show: true,
}
});
</script>
v-bind: (set the data of vue instance for any attribute of the element, which can be abbreviated as ":")
<style type="text/css">
.red{
background-color: red;
}
.blue{
background-color: blue;
}
</style>
<div id="app" style="width: 100px; height: 100px; color: white;">
<button @click="bool=!bool">Click me to change the color of the color block below</button>
<div :class="{red:bool, blue:!bool}">
Click the button to change the background color
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
color:"red",
bool:true
}
});
</script>
Calculated attribute calculated:
<h2>
computed Calculation method; Your birthday is:{{birth}}
</h2>
<script>
var app = new Vue({
el:"#app",
data: { birthday:1429032123201 },
computed:{
birth(){
const date = new Date(this.birthday);
return date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDay();
}
}
});
</script>
Monitor watch:
