Vue初步(笔记)
生命周期
组件初步
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<fxz v-for="a in arr" v-bind:F="a"></fxz>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component("fxz",{ //注册组件的格式
props:['F'],
template:'<li>{{F}}</li>>'
});
var vm = new Vue({
el:'#app',
data:{
arr:["北京","上海","广东","深圳"]
}
})
</script>
</body>
</html>
axios异步通信
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{info.name}}<br>
{{info.page}}<br>
{{info.url}}
</div>
<!--导入vue cdn-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--导入axios cdn-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data(){ //以函数的形式获取info变量
return {
info:{ //inofo变量中储存axios获取到的数据
name:'',
url:'',
page:''
}
}
},
mounted(){//生命周期函数 在挂载完成时执行
//通过axios以get方式在上级目录中的json文件中获取数据
axios.get('../package.json').then(response=>(this.info=response.data))
}
})
</script>
</body>
</html>
json文件:
{
"name":"狂神说java",
"url": "http://baidu.com",
"page": "1",
"isNonProfit":"true",
"address": {
"street": "含光门",
"city":"陕西西安",
"country": "中国"
},
"links": [
{
"name": "B站",
"url": "https://www.bilibili.com/"
},
{
"name": "4399",
"url": "https://www.4399.com/"
},
{
"name": "百度",
"url": "https://www.baidu.com/"
}
]
}
插槽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<todo>
<todo-items slot="todo-items" v-for="item in items" :item1="item"></todo-items>
<todo-title slot="todo-title" :title1="title"></todo-title>
</todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component("todo",{
template:'<div>\n' +
' <slot name="todo-title"></slot>\n' +
' <ul>\n' +
' <slot name="todo-items"></slot>\n' +
' </ul>\n' +
' </div>'
});
Vue.component("todo-title",{
props: ['title1'],
template: '<h2>{{title1}}</h2>'
});
Vue.component("todo-items",{
props:['item1'],
template:'<li>{{item1}}</li>'
});
var vm = new Vue({
el:'#app',
data:{
title:'做项目',
items:['前端','后端','数据库']
}
})
</script>
</body>
</html>
自定义事件分发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" :title1="title"></todo-title>
<todo-items slot="todo-items" v-for="(item,index) in items"
:index1="index" :item1="item" @remove="removeIt(index)">
</todo-items>
</todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('todo',{
template:'<div>\n' +
' <slot name="todo-title"></slot>\n' +
' <ul>\n' +
' <slot name="todo-items"></slot>\n' +
' </ul>\n' +
' </div>'
});
Vue.component("todo-title",{
props: ['title1'],
template: '<h2>{{title1}}</h2>'
});
Vue.component('todo-items',{
props: ['index1','item1'],
template:'<li>{{index1}} {{item1}} <button @click="remove">删除</button></li>>',//按下按钮 触发组件中的remove方法
methods: {
remove: function (index1) { //remove方法会抛出一个事件
this.$emit('remove',index1)
}
}
});
var vm = new Vue({
el:'#app',
data:{
title:'城市',
items:['北京','上海','广东','深圳']
},
methods:{
removeIt:function(index){
this.items.splice(index,1)
}
}
})
</script>
</body>
</html>
路由
1: 安装路由:
npm install vue-router --save
2:在componebts下创建组件
3:src下创建router包，并创建路由配置文件index.js
import Vue from 'vue'
//导入路由
import VueRouter from 'vue-router'
//导入组件
import Content from "../components/Content";
import Main from "../components/Main"
//安装路由
Vue.use(VueRouter);
//配置导出路由
export default new VueRouter({
routes:[
{
//路由路径
path:'/content',
component:Content
},
{
path: '/main',
component: Main
}
]
});
4:在App.vue中引用router-link创建连接 引用router-view创建视图
<template>
<div id="app">
VUE-ROUTER<br>
<router-link to="/main">首页</router-link>
<router-link to="/content">内容页</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
5:在main.js中导入router，并讲router加入配置
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
el:'#app',
router,
render: h => h(App),
}).$mount('#app')
6:运行
npm run dev
单词
use 使用
path 路径
router 路由
export 导出
default 默认
modules 模块
children 孩子
template 模板
components 组件
