Today learning summary
1、HelloWorld
2, the basic instruction vue
HelloWorld
And all language learning, we come to a HelloWorld
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HelloWorld</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
new Vue({
el:"#app",
template:`
<div>Hello {{msg}}</div>
`,
data:function(){
return {
msg:'Vue！'
}
}
})
</script>
</body>
</html>
复制代码- Results of the
Code Analysis
- The basic three steps using Vue
1, import Vue.js
2, in html 埋坑, this 坑needs to be processed Vue
3, a Vue instantiating objects. 2 of this Vue 坑treated
- the
el: I call selector, this indicates that the current Vue is an object to be processed is a page that坑位
- template
Template, in fact, write here the effect of the string and write directly 坑位to go the same
- data
Here can be an object, the object may be a function return.
Object data for rendering坑
- Interpolation expression
{{表达式}}
Expression by interpolation, there is extracted a datadefined msgvalue of the variable
note
template, Only allow a root node
v-text and v-html
- Sample Code
......
<div id="app">
<div>
<div v-text='mytext'></div>
<div v-html='myhtml'></div>
</div>
</div>
......
new Vue({
el: "#app",
data() {
return {
mytext: '<h1>this is v-text</h1>',
myhtml: '<h1>this is v-html</h1>',
}
}
})
......
复制代码- Results of the
v-text
InnerText element unresolvable html tag v-html
element may be parsed html tags innerHtml
v-if、v-else-if、v-else
Do insertion element (the append) and removing (Remove) Operation
<div id="app"></div>
<script type="text/javascript">
new Vue({
el: "#app",
template: `
<div>
<button type="button" v-if='checkvif'>测试v-if</button>
<button type="button" v-else-if='checkvelseif1'>测试v-else-if1</button>
<button type="button" v-else-if='checkvelseif2'>测试v-else-if2</button>
<button type="button" v-else>测试v-else</button>
</div>
`,
data: function () {
return {
checkvif: true
, checkvelseif1: true
, checkvelseif2: true
}
}
})
</script>
复制代码According to our default configuration, shows
We use the debug plug-in Vue, Vue to change the value of the object will change as conditions change and it shows
about this configuration, either a Boolean type, can be any type of the result is a Boolean equation, such as:
a==1
v-show
display: none and display: block switching
<div id="app"></div>
<script type="text/javascript">
new Vue({
el: "#app",
template: `
<div>
<span v-show="checkvshow">v-show测试</span>
</div>
`,
data: function () {
return {
checkvshow: true
}
}
})
</script>
复制代码v-for
-
v-for
- Array item, index
- Target value, key, index
An array iteration
<div id="app">
<div>
<ul>
<li v-for="item in arrs">{{item}}</li>
</ul>
</div>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: function () {
return {
arrs: ['足球', '篮球', '排球']
}
}
})
</script>
复制代码- Results page
Iteration of an object
<div id="app">
<div>
<ul>
<li v-for="item in person">{{item}}</li>
</ul>
</div>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: function () {
return {
person: {name: '张三', age: 23, birth: '1999-01-01'}
}
}
})
</script>
复制代码- Implementation of the results
Equivalent to the value we get, that if we want to get the key to how to do?
<li v-for="item,key in person">{{key}} - {{item}}</li>
复制代码Gets No.
<li v-for="item,key,index in person">{{index}}:{{key}} - {{item}}</li>
复制代码