1. Components
1.1 Getting started with components, reusing components, registering components
In the development of large-scale applications, the page can be divided into many parts. Often different pages will have the same parts. For example, there may be the same head
navigation.
But if each page is developed independently, this will undoubtedly increase the cost of development. Therefore, different parts of the
page will be split into independent components, and then these components can be shared on different pages to avoid repeated development.
The component is actually a Vue instance, so it will also receive data, methods, life cycle functions, etc. when it is defined. The
difference is that the component will not be bound to the elements of the page, otherwise it will not be reused, so there is no el attribute.
But the component rendering requires an HTML template, so the template attribute is added, and the value is the HTML template. After the
global component is defined, any Vue instance can directly use the component through the component name in HTML. Data is defined in a special way and must be a function.
The data attribute of the component must be a function!
Therefore, for some infrequently used components, partial registration will be used.
The following code demonstrates global registration and partial registration, component reuse:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue11测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app11">
<!--使用定义好的组件-->
<counter1></counter1>
<counter1></counter1>
<counter1></counter1>
</div>
<script type="text/javascript">
//1.定义组件
const counter2={
template:"<button @click='num++'>你点击了{
{num}}次，我记住了</button>",
data(){
return {
num:0}
}
};
//2.全局注册组件；参数1：组件名称，参数2：组件(con couter定义的)
//Vue.component("counter1",counter2);
var app1=new Vue({
el:"#app11", //el即element，要渲染的页面元素
//2.局部注册组件
components:{
counter1:counter2
}
})
</script>
</body>
</html>
effect:
1.2 Communication between parent component and child component
The code above:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue12测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app12">
<!--使用定义好的全局组件-->
<introduce1 :title="msg"></introduce1>
</div>
<script type="text/javascript">
//定义组件
const introduce2={
//使用props属性title的值渲染模版
template:"<h2>{
{title}}</h2>",
//定义接收来自父组件的属性
props:["title"]
};
//全局注册组件；参数1：组件名称，参数2：组件
Vue.component("introduce1",introduce2);
var app=new Vue({
el:"#app12", //el即element，要渲染的页面元素
data:{
msg:"父组件中的msg属性的内容"
}
})
</script>
</body>
</html>
Effect:
more complicated:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue13测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app12">
<h2>传智播客开设的课程有：</h2>
<!-- 接受来自父组件的属性值，使用v-bind指向父组件的属性lessons；注意使用my-list -->
<my-list :items="lessons"></my-list>
</div>
<script type="text/javascript">
//定义组件
const myList={
template: "<ul>\n" +
" <li v-for=\"item in items\" :key=\"item.id\">{
{item.id}}--{
{item.name}}</li>\n" +
" </ul>",
//定义接收来自父组件的属性
props:{
//定义模版中使用的属性
items:{
//必须为数组类型，如果是对象则用Object
type:Array,
//默认为空数组
default:[]
}
}
};
var app=new Vue({
el:"#app12", //el即element，要渲染的页面元素
data:{
msg:"父组件中的msg属性的内容",
lessons:[
{
"id":1,"name":"java"},
{
"id":2,"name":"python"},
{
"id":3,"name":"go"},
]
},
//注册局部组件，你用全局组件也行
components:{
//如果组件key和value一致可以简写如下
myList
}
})
</script>
</body>
</html>
my-list is written in a fixed way
1.3 The child component communicates with the parent component (￥emit)
The code above:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue14测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app14">
<h2>num={
{
num}}</h2>
<!--使用定义好的组件-->
<counter1 @plus="numPlus" @reduce="numReduce" :snum="num"></counter1>
</div>
<script type="text/javascript">
//1.定义组件
const counter2={
//组件只能是一个元素里面包裹其他元素；如下面，一个div包含两个按钮
template:`
<div>
<button @click='incrNum'>+</button>
<button @click='decrNum'>-</button>
</div>
`,
props:["snum"],
methods:{
//点击模板中使用的方法
incrNum(){
return this.$emit('plus')},
decrNum(){
return this.$emit('reduce')}
}
};
//2.全局注册组件；参数1：组件名称，参数2：组件(con couter定义的)
Vue.component("counter1",counter2);
var app1=new Vue({
el:"#app14", //el即element，要渲染的页面元素
data:{
num:0
},
methods:{
//父组件中定义操作num的方法
numPlus(){
this.num++;
},
numReduce(){
this.num--;
}
}
})
</script>
</body>
</html>
effect:
Two, axios
The methods that axios can use are:
axios(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[ , config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
(1) config request configuration
These are configuration options that can be used when creating a request. Only url is required. If no method is specified, the request will use the get method by default.
2.2 Axios method example
Code demonstration:
directly create a js folder in the project:
In order to demonstrate the data to be obtained:
create a data.json file:
[
{
"name":"喜洋洋","age":13,"gender":"男"},
{
"name":"美洋洋","age":13,"gender":"女"},
{
"name":"沸羊羊","age":4,"gender":"男"}
]
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo15</title>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="js/axios.min.js"></script>
</head>
<body>
<div id="app15">
<!--要角标遍历数组-->
<ul>
<li v-for="(user,index) in users">{
{index}}--{
{user.name}}--{
{user.age}}--{
{user.gender}}</li>
</ul>
</div>
<script type="text/javascript">
var app1=new Vue({
el:"#app15", //el即element，要渲染的页面元素
data:{
users:[]
},
// 钩子函数多为ajax服务
created(){
//初始化加载数据
//3.post方式
axios.post("data.json").then(res=>{
console.log(res);
//将数据赋值到vue实例中的数据属性users；
//不能使用this，在axios回调函数中表示窗口，不是vue实例
app1.users=res.data;
}).catch(err=>alert(err));
/*
//2.get方式
axios.get("data.json").then(res=>{
console.log(res);
//将数据赋值到vue实例中的数据属性users；
//不能使用this，在axios回调函数中表示窗口，不是vue实例
app1.users=res.data;
}).catch(err=>alert(err));
*/
/*
//1.原始方式
axios({
url:"data.json", //代表从哪获取数据
method:"get"
}).then(res=>{
console.log(res);
//将数据赋值到vue实例中的数据属性users；
//不能使用this，在axios回调函数中表示窗口，不是vue实例
app1.users=res.data;
}).catch(err=>alert(err));
*/
}
});
</script>
</body>
</html>
Effect:
It is recommended to use post or get above. Data.json is written here to represent where you obtained it. Some of this machine can also be obtained from other websites. Just pay attention to cross-domain issues.
Cross-domain request:
