Vue 学习笔记（二）
2019-07-06 本文已影响0人
遗步看风景
1.父组件向子组件传值
第一步，父组件内产生数据，如下产生title
假设父组件App.vue，子组件MyCompents.vue
在App.vue调用MyCompents.vue的位置，也就是如下：
<template>
<div id="app">
......
<mycompents></mycompents>
</div>
</template>
<script>
......
data(){
return{
title:"Vue Flask 测试软件"
}
</script>
第二步：向子组件插入数据
<mycompents></mycompents>//内绑定数据
<mycompents v-bind:title="title"></mycompents>
第三步：子文件内接受参数
//这里的前一个title为该变量在本文件的名字，
//后面的则是传入子文件内的名字接下来
//你还需要在子文件中填入如下字段：
export default {
......
props:{
title:{
type:String,
required:true
}
}，//这里的title则是上述的传入名称,type为类型(这里需要注意的是，传入如果是对象，那么是传入地址，也就以为着一处改变，处处改变。
//但如果传入的是值，则只会改变本地内容)
}
二.子组件传值到父组件
第一步，确认要传的子组件数据
......
data(){
return{
title:"Vue Flask 测试软件"}
｝
第二步，在子组件内定义事件
......
methods:{
changeTitle:function () {
this.$emit("titleChanged","子组件向父组件传值")
//这里发送的是自定义事件名称以及对应参数
}
}
第三步,在父组件内,找到子组件所在位置，并绑定事件以接受发送过来的信号,如下：
<mycompents v-on:titleChanged="updateTitle()></mycompents>
//此处的titleChanged要与子组件传送的方法名称一样，否则无法传输
三.初识vue中的生命周期
//钩子函数，写在 export 内，与methods同级
beforeCreate() {
//组件实例化之前执行的函数
},
created() {
//组件实例化完毕，但是页面还未显示时执行
},
beforeMount() {
//组件挂载前，页面仍未显示，虚拟dom已配置后执行
},
mounted() {
//挂载成功后，此方法执行，页面显示
},
beforeUpdate() {
//组件更新前，页面仍未更新，单虚拟dom已经配置
},
updated() {
//组件更新成功后执行
},
beforeDestroy() {
//组件销毁前执行
},
destroyed() {
//组件销毁后执行
}
四.vue的路由
//使用路由需要安装路由模块：
npm install vue-router --save-dev
在main.js内引入router
......
import VueRouter from 'vue-router'
//导入路由
......
Vue.use(VueRouter);
//引用路由
const routes = new VueRouter( {
routes:[
{
path: '/',
//路由路径
name: 'HelloWorld',
component: HelloWorld
//vue文件名
}
]})
//配置路由
......
接着你需要在vue实例化内，使用路由
new Vue({
......
router,
......
})
若是以上配置都配置完成，则需要最后在App.vue内将路由内容显示出来
<template>
<div id="app">
<router-view></router-view>//这个标签用于将路由内容显示在app标签内
</div>
</template>
上述内容全部完成之后，你会发现路由中间会有一个/#/，例如会出现访问helloworld页面会出现地址：http://127.0.0.1:8080/#/helloworld/，若是想去掉这个#，则需要在路由初始化时添加mode:"history"属性
......
routes: [
{
path: '/',
name: 'Home',
component: Home
},{
path:'/helloworld',
name:'Helloworld',
component:HelloWorld,
//若是需要有参数的路由，则使用如下格式
//path:'/helloworld:(parameterName)',
}
],
mode:"history" //注意这里mode与routes同级
......
路由设置结束，那么如何在前端直接使用路由进行跳转呢
//传统a标签
<ul>
<li> <a href="/">Home</a></li>
<li> <a href="/helloworld">HelloWorld</a></li>
</ul>
//vue的路由机制
<ul>
<li> <router-link to="/">Home</router-link></li>
<li> <router-link to="/helloworld">HelloWorld</router-link>
//若需要传递参数，则需要
//
</li>
</ul>
vue的路由机制功能类似a标签，但是性能优于a标签，因为无需全局刷新
5.vue. 使用http请求
第一步：需要安装resource模块
npm install vue-resource --save-dev
第一步：在 main.js 内操作
import VueResource from 'vue-resource'
//引入resource
Vue.use(VueResource);
//使用resource
第二步：在helloworld 文件内使用http.get请求
//在 export 内,利用钩子函数created，在vue创建时发送http.get请求，并将请求内容打印出来
......
created() {
this.$http.get(url).then((data)=>{
console.log(data);
});
}
......
第三步：在helloworld 文件内使用http.post请求
//在 export 内,增加一个post方法，然后调用
methods:{
post:function () {
this.$http.post(url,data).then(function (data) {
console.log(data);
})
}
}
第四步：在helloworld 文件内使用http.get请求本地jason文件的数据
//http.get默认只能访问存储于static文件夹下的文件
//比如下面就是访问static文件夹下data.jason文件的内容
this.$http.get('./../static/data.jason').then((data)=>{
console.log(data);
});
6. vue 自定义指令
第一步：指定指令
<h1 v-upper >HelloWorld</h1>
//无参数 自定义一个将内容转为大写的指令
<h1 v-setWith="'1200px'">HelloWorld</h1>
//带参数参数 自定义一个更改宽度的方法
<h1 v-setSize:with="'1200px'">HelloWorld</h1>
//带参数参数 自定义一个更改宽度的方法
第二步：对指令绑定方法（无参数）
参数：
// el 绑定的元素
// binding 绑定的指令对象
// vnode 虚拟节点
// 文件名 main.js
// 自定义字母转大写的方法（带参数）
Vue.directive('upper',{
bind(el,binding,vnode)｛
}
});
// 带参数的自定义指令，更改宽度或高度(带指令)
Vue.directive('upper',{
bind(el,binding,vnode)｛
bind(el,binging,vnode){
el.style.width = binging.value;
}
}
});
// 带参数的自定义指令，更改宽度或者长度
Vue.directive('upper',{
bind(el,binging,vnode){
if(binding.arg == "with"){
el.style.width = binding.value;
}else{
el.style.height= binding.value;
}
}
});
//若是需要定义局部指令，则只需要在export 内
//和methods同级，添加 directive即可
7. vue 自定义过滤器
这里自定义一个小写改大写的过滤器
文件名：main.js
#自定义字母转大写的过滤器
Vue.filter("to-uppercase",function (value) {
return value.toUpperCase();
});
//同理，如果需要定义局部过滤器，则需要在 export内，
//和methods同级，添加filter;
在html中使用
//将myTitle 转为大写
<h1>{{ myTitle|to-uppercase}}</h1>
