学习vue框架第三天的心得

1.mixins混入

• 在Vue里可以使用mixins来做代码的抽离复用，便于维护
• 一个mixin其实就是一个存粹的对象，上面挂载着抽离出来的配置
• 在某一个实例中，通过mixins选项导入后，此实例就拥有导入的mixin的配置
• 并且不会与原配置相互覆盖，而是合并到一起

2.数据请求的三种方式

1. vue-resource请求
   引入vue-resource之后，那么他就可以在vue实例/组件 上面绑定一个$http的一个属性。
   从vue2.0开始，将不对vue-resource进行维护，推荐使用axios

methods:{
   get(){
        this.$http.get("temp.json").then(res=>{
            this.books = res.data.books
        })
    }
}

2. fetch请求

handleClick(){
   //fetch 的get方法
    fetch("./json/temp.json").then(res=>{
        //console.log(res)  //只是获取了一些状态 没有拿到数据
        //return res.text() //文本格式
        return res.json()   //需要让其返回json格式的数据
    }).then(res=>{
        console.log(res)
    }) 
 }

3. axios请求后台数据（推荐使用）
   • 引入
   • node.js配置一个服务器，nodemon index.js打开
   • 在浏览器上访问这个搭建好的服务器端口
   • 通过axios({ …})请求后台数据

axios({
	method:"get",
    url:"http://localhost:8001/user",
}).then(data=>{
    console.log(data);
})
        
axios({
   method:"post",
    url:"http://localhost:8001/user",
    data:{ // 前端往后台发送的数据
        a:10,
        b:20
    }
}).then(data=>{
    console.log(data);
})

3.一些指令

• v-if true表示出现 false表示移除 =>在dom上移除
• v-show 和v-if效果一样，但是他是通过切换display来进行元素的隐藏和显示
• v-else 需要和v-if进行搭配是哦那个
• v-text 和{{ }}是等价的
• v-html 是可以解析标签的 慎用 性能消耗高
• v-pre 指令是不会解析{{ }}的内容
• v-clock 可以配合css像是 解决{{ }}闪烁的问题
• template 包裹的元素只能通过v-if来解析，因为浏览器不解析这个标签(v-if和v-for的区别)

4.创建一个全局组件

• vue.component(“组件名”，{template:" "}模板)
• 模板可以单独写道外面，用template包裹，给他设置一个id，下面写#id名即可，的有一个根元素

Vue.component("hello",{
	template:"<div>hellow world</div>"
})

5.创建一个局部组件

• compoents:{组件名：{template：” “}} 注意多个s和全局的比

new Vue({
	el:"#app",
	compoents:{
		hello:{
			template:"<div>hellow world</div>"
		}
	}
})

6.组件的嵌套

• 子组件只能在父组件的模板中进行调用

<div id="app">
		<father></father>
</div>

new Vue({
	el:"#app",
	compoents:{//定义一个局部组件
		father:{//定义父组件的名字
			template:"<div>这是父组件</div> <son></son>",//父组件模板
			components:{
				son:{//定义子组件的名字   （子组件只能在父组件的模板中调用)
					template：<div>这是父组件</div>
				}
			}
	}
}
)}

7.is的用法

1. is可以实现组件的切换功能

<div id="app">
	<button @click="comp=comp==='my-a'?'my-b':'my-a'">切换组件</button>
	<component :is="comp"></component>
</div>

//通过is实现组件的切换 先写两个组件
Vue.compoent("my-a",{
	temlpate:"<div>我是my-a组件</div>"
})
Vue.compoent("my-b",{
	template:"<div>我是my-b组件</div>"
})
new Vue({
	el:"#app",
	data:{
		comp:"my-a"
	}
})

2. 将一个组件放入tr标签中可以使用is的方式，代表tr标签引入了一个组件
   • 因为vue在解析模板的时候会根据默写html的规则
   • 例如：在table里面只能放tr，td，th 如果放入一个组件不会解析
   • 这个时候我们可以放入tr标签，然后通过is的方式，代表tr标签引入了一个组件

<div id="app">
     <p>下面是一个表格哦..</p>
     <div>
         <table>
             <tbody>
                 <tr is="hello"></tr>
             </tbody>
         </table>
     </div>
 </div>

8.过滤器

• 过滤器：事件数据格式化
  + 分为全局过滤器和局部过滤器
• 全局过滤器
  Vue.filter(name,handler) //name是过滤器的名字 handler是数据格式化处理函数
• 局部过滤器
  在vue实例 组件的配置象中设置filters，键名为过滤器名，值为handler
  filters：{ handler(){ } }
• 过滤器在模板中通过 | （管道符）来使用 ，在过滤器后面加（）来传参，参数会在handler参数中第二个及后面的形参来接收

<p>{{timer | filterTime("/")}}</p>