lesson10
1.demo vue sample
<body>
<div id="myApp">
</div>
</body>
<script>
new view ({
el:"#myApp",
data:{},
methods:{},
computed:{},
filters:{}
})
</script>
2. Case: Analog Baidu search box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding:0;
margin:0;
}
p{
border:1px solid green;
}
p.active{
background:gray;
}
</style>
<script src="lib/vue.js"></script>
<! - 1, depending on your vue.js
2, when you introduce resource, it will be in your Vue.prototype $ http = -.>
<script src="lib/vue-resource.js"></script>
</head>
<body>
<div id="myApp">
<!--<input type="text" @keyup.65="search">-->
<!--<input type="text" @keyup.a="search">-->
<!--<input type="text" @keyup.left="search">-->
<form action="https://www.baidu.com/s" target="_blank">
<input type="text" autocomplete="off" v-model="pwd" name="wd" @keyup="search">
</form>
<p v-for="(item,i) in g" :class="{active:index===i}">{{item.q}}</p>
</div>
</body>
<script>
// Vue.prototype. Zhang = $ {
// run(){
// console.log(12);
// }
// }
new view ({
el:"#myApp",
data:{
pwd:"",
g:[],
index:-1,
q: "" // q represents the value of search
},
methods:{
search(e){
// The first parameter is the address of the second parameter is the content you pass, and the third is cb
// https://www.baidu.com/sugrec?prod=pc&from=pc_web&wd=%E6%97%A0%E9%87%8F&cb=fn
if(e.keyCode === 40){
this.index++;
if(this.index> this.g.length-1){
this.index=-1;
this.pwd = this.q; // search data
}else{
this.pwd = this.g[this.index].q;
}
}else{
this.$http.jsonp("https://www.baidu.com/sugrec",{
from:"pc_web",
prod:"pc",
wd:this.pwd
},{
jsonp:"cb"
}).then(({data})=>{
console.log(data);
this.g = data.g;
this.q = data.q;
})
}
// https://www.baidu.com/sugrec?from=pc_web&pwd=&cb=
// console.log(e.keyCode)
// this.$zhang.run();
}
},
computed:{},
filters:{}
})
</script>
</html>
3. template template
1, template has one and only one root element.
2, the elements you want to mount a replacement operation.
3, the template may be used which instructions, data, methods, etc., may be used
// Note:
When you realize examples of VUE, he will see if there is a template, if you will have to replace the mounted elements. If you do not use it as a template to mount the elements.
There are three ways to use template
1, direct assignment
template:`<div>1</div>`
2, defined by the script tag
<script type="x/template" id="tp">
<div>2</div>
</script>
template:"#tp"
3, using the built-in component template
<template id="my">
<div>3</div>
</template>
template:"#my"
4. Supplementary commands
v-html: output is HTML, can be recognized by the compiler browser.
v-text: output in plain text
The assembly
Example: Component 1
<body>
<div id="myApp">
Hello everyone, I'm in the MyApp
Call <one> </ one> assembly
</div>
</body>
<script>
new view ({
el:"#myApp",
// define component registration component ---- "local assembly
components:{
one:{
// The template determines the content of your component.
Template: `<div> One assembly which </ div>`
}
}
})
</script>
Example: Component 2
<body>
<div id="myApp">
Hello everyone, I'm in the MyApp
<one></one>
</ div> // mounted elements
</body>
<script>
new view ({
el:"#myApp",
template: `<div> la la la <one> </ one> </ div>`, // template template elements will mount replacement
components:{
one:{
template: `<div> one component among the </ div>` // One is a component in the examples vue
}
}
})
</script>
6. component naming rules:
If the component name which contains uppercase letters and lowercase need to change it to - split.
7. The way data flow
Examples of the component can be transmitted by property (The props)
However, by property of the data transmission component, the component is not allowed in a modified directly.
Example:
<body>
<div id="myApp">
<p>myApp:{{a}}</p>
<one num="12" age="13"></one>
</div>
</body>
<script>
new view ({
el:"#myApp",
data:{
a:1
},
components:{
one:{
// your data to be received is set
props:["num","age"]
temtemplate:'<div> {{num}} {{age}}</div>'
}
}
})
8 Crossing Found:
Pass down property values:. A data transfer is unidirectional
b. If you want to modify the data, the assembly can pass through a parent function, you modify the function data.
defined data among the data vue vue Examples among Examples 9. The assembly is different.
data is a function, the function must have a return value, if the return value must be an object.
In order to ensure the independence of your sub-components among the data.
10. The assembly of nested
</body>
<script>
new view ({
el:"#myApp",
components:{
one:{
template:`<div>one <two></two></div>`,
components:{
two:{
template:`<div>two</div>`
}
}
}
}
})
</script>
11. The assembly of v-for traversal
<body>
<div id="myApp">
<goods-list v-for="item in arr" :info="item"></goods-list>
</div>
</body>
<script>
new view ({
el:"#myApp",
data:{
arr:[
{
goodsTitle: "chestnuts"
goodsPrice:12
},
{
goodsTitle: "floor"
goodsPrice:34
}
]
},
components:{
goodsList:{
props:["info"],
template:`<div>
<h3>{{info.goodsTitle}}</h3>
<p>{{info.goodsPrice}}</p>
</div>`
}
}
})
</script>
12. The
dynamic component
<! - attribute value of the dynamic component is chosen that is the component name ->
<components :is="comArr[index]"></components>
Case Description:
<body>
<div id="myApp">
<input type="button" @click="changeIndex" value="换肤">
<! - attribute value of the dynamic component is chosen that is the component name ->
<components :is="comArr[index]"></components>
</div>
</body>
<script>
const one = {
template:`<div style="background:red;">one</div>`
};
const two = {
template:`<div style="background:yellow;">two</div>`
};
const three = {
template:`<div style="background:pink;">three</div>`
};
const four = {
template:`<div style="background:deeppink;">four</div>`
};
new view ({
el:"#myApp",
data:{
index:0,
comArr:["one","two","three","four"]
},
methods:{
changeIndex(){
this.index++;
if(this.index>this.comArr.length-1)
this.index=0;
}
},
components:{
one,
two,
three,
four
}
})
</script>
Key knowledge points summarized:
1, template using three methods
1, direct assignment
template:`<div>1</div>`
2, defined by the script tag
<script type="x/template" id="tp">
<div>2</div>
</script>
template:"#tp"
3, using the built-in component template
<template id="my">
<div>3</div>
</template>
template:"#my"
2. The local component global definition component assembly
Local components:
new view ({
components:{
one:{
How subcomponents reception:
// your data to be received is set
props:["num","age"]
template: `<div> one component among the </ div>`
}
}
})
Global components:
Vue.component (componentName, config
) // The first parameter is the name of your component, and the second is to give pieces of configuration items
3. Dynamic Component: <! - attribute value of the dynamic component is chosen that is the component name ->
<components :is="组件名[index]"></components>
4.es6 Modular:
How to Export: export const
How to introduce: script introduced by import
5. How to pass downwardly how receiving subassembly.
By setting props be received attribute names:
To receive your data set
props:["num","age"]