1.MVVM idea
- M: model includes data and some basic operations
- 5: Page rendering results
- VM: view model, two-way operation between model and view (without developer intervention)
The view and data are bound through VM. Changes in the model will be automatically filled in the view through Directives, and the added content in the view form will also be automatically saved to the model through DOM Listeners.
course: https://cn.vuejs.org/v2/guide/
view ViewModel Model As long as we Model Has changed, View It will show up naturally. When the user modifies View，Model The data in will also change. Take developers from D0M Liberated from operation, the focus is on how to operate Model Come on.
2. Installation
- Download JS and import with < script > tag: < script SRC=“ https://cdn.jsdelivr.net/npm/vue/dist/vue.js "></script>
- Or use npm install vue to import from the VScode console. The steps are divided into:
-
First, npm init -y initializes the project and generates a package JSON file, indicating that it is an npm managed project, similar to maven's POM xml
-
npm install vue, which is installed in the project node_ There is vue in modules, which is similar to maven install pulling from remote to local
-
3. Test use
- new Vue
- In dom, {{name}} stands for putting from the model into the view
- v-model to achieve two-way binding
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<sc>, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
v-model Realize two-way binding. This represents the input box and vue Inside data binding
<input type="text" v-model="num">
v-on:click Bind events to realize self increment.
<button v-on:click="num++">num++</button>
Callback custom methods. At this time, the function represented in the string
<button v-on:click="cancel">cancel</button>
<h1> {{name}} ,Very handsome, yes{{num}}I like him personally{{hello()}}</h1>
First from vue Fill in the value obtained from dom，input Change again num Value, vue Instance update, and then update here
</div>
<!--Introduce dependency-->
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
//1.vue declarative rendering to generate Vue objects
let vm=new Vue({
el:"#App ", / / binding element div id="app "can specify label, but cannot specify body label
data:{
//Encapsulate data
name:"Zhang San",
num:10
},
methods: {
//Packaging method
cancel(){
this.num--;
},
hello(){
return "1";
}
},
});
// You can also use vm.html console name
//2. Bidirectional binding, model change, view change. vice versa.
//3. Event handling
//v-xx: instruction
//1. Create a vue instance, associate the template of the page, and render your own data to the associated template, which is responsive
//2. Directive to simplify some operations on the dom.
//3. Declare methods to do more complex operations. Methods can encapsulate methods.
</script>
</body>
</html>
Install vue 2 snippets syntax prompt plug-in in VSCode and Vue devtool in Google browser
4.v-text,v-html,v-ref
These two can use data. The < div > {div} < / div > method is called interpolation expression. It can calculate, take values and call functions. The difference between v-html and v-text is also introduced here
Note that most of the data retrieved is not the request domain, but the data in the vue object
Interpolation flashing:
Using {}} mode will cause problems when the network speed is slow. When the data is not loaded, the page will display the original {}},
The correct data is displayed after loading, which is called interpolation flicker.
Let's slow down the network speed, then refresh the page and try the case just now
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
{{msg}} {{1+1}} {{hello()}} If the network speed of the previous content is slow, brackets will be displayed first, and then replaced with data.
v-html and v-text Can solve this problem
<br/>
use v-html Fetch content
<span v-html="msg"></span>
<br/>
Display as is
<span v-text="msg"></span>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
msg:"<h1>Hello</h1>",
link:"http://www/baidu.com",
},
methods: {
hello(){
return "World"
}
},
});
</script>
</body>
</html>
5. One way binding v-bind
Problem: curly braces can only be written in the label body (< div label > label body < / div >), not in the label.
Interpolation expressions can only be used in the tag body. If we use < a href = "{}}" > in this way, it will not work, so we need to < a v-bind: href = "link" > jump to this usage
Solution: use v-bind:, abbreviated as:. Indicates that the model is bound to the view. src, title, class, etc. can be set
In the browser vm.link="www.baidu.com"，here vue The data has changed, dom The jump link has also been changed class What can be passed in the vue Data bool Values are added or deleted, while in style Is represented by k:v Value. You can also v-bind:Abbreviated as: {{}}Must have return value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<a v-bind:href="link">Jump</a>
<!-- class,style {class Name: vue value}-->
<span v-bind:class="{active:isActive,'text-danger':hasError}" :style="{color: color1,fontSize: size}">Hello</span>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
link: "http://www.baidu.com",
isActive: true,
hasError: true,
color1: 'red',
size: '36px'
}
});
</script>
</body>
</html>