Vue初出茅庐（三）

Vue_3.0

---

---

组件

简介

例如淘宝一页下来各个商品，每个商品都可以看成是一个模板，每个产品之间传递了不同的参数（价格，图片，文字描述），这样的模板就是组件。

---

局部组件

<!--通过标签调用模板  多个模板多次调用即可-->
<product></product>
<product></product>
<product></product>
<script>
new Vue({
  el: '#div1',
  components:{
      'product':{
          template:'<div class="product" >模板</div>'
      }
  }
})
</script>

全局组件

和过滤器类似，有的组件需要在不同页面中出现

Vue.component('product', {
	  template: '<div class="product" >模板</div>'
	})

---

参数

传递参数给组件

<product name="模板1"></product>
<product name="模板2"></product>
Vue.component('product', {
	  props:['name'],
	  template: '<div class="product" >{{name}}</div>'
	})

动态参数

组件内的参数和组件外的值关联（比如input输入的数据传递到组件内）

组件外的值：<input v-model="outName" ><br>  //双向绑定
<product v-bind:name="outName"></product>
<script>
Vue.component('product', {
      props:['name'],
      template: '<div class="product" >{{name}}</div>'
    })
 
new Vue({
  el: '#div1',
  data:{
      outName:'产品名称'
  }
})
</script>

---

自定义事件

和在Vue对象上增加methods类似

<script>
//在模板上绑定点击的methods
Vue.component('product', {
      props:['name','sale'],
      template: '<div class="product" v-on:click="increaseSale">{{name}} 销量: {{sale}} </div>',
      methods:{
          increaseSale:function(){
              this.sale++
          }
      }
    })
</script>

遍历json数组

<product v-for="item in products" v-bind:product="item"></product>
<script>
//准备产品数组
products:[
            {"name":"模板1","sale":"18"},
            {"name":"模板2","sale":"35"},
            {"name":"模板3","sale":"29"}
          ]
    
Vue.component('product', {
	  props:['product'],//参数是产品对象
	  template: '<div class="product" v-on:click="increaseSale">{{product.name}} 销量: {{product.sale}} </div>',
	  methods:{
		  increaseSale:function(){
			  this.product.sale++
		  }
	  }
	})   
</script>

注意

template 部分因为比较复杂，就不好写在一个 单引号 ’ ’ 里维护起来，所以就直接写在html里，然后通过html dom 获取出来，这样编写起来略微容易一点。

<div id="tempalate">
   ******
</div>
<script>
var tempalateDiv=document.getElementById("tempalate").innerHTML;
var templateObject = {
    props: ['product'],
    template: tempalateDiv,
      methods: {
            *******
          }
}
Vue.component('product', templateObject);
</script>

---

路由

vue.js 里的路由相当于就是局部刷新。

（需要额外的库：vue-router.min.js）

具体步骤

1.定义路由组件，就是定义template

2.定义路由，为路由赋值这些路由组件

3.实例路由，就是用到VueRouter包

4.挂载路由，就是用到Vue包

<div class="menu">
    <!--	router-link相当于就是 href-->
    <router-link to="/user">用户管理</router-link>
    <router-link to="/product">产品管理</router-link>
    <router-link to="/order">订单管理</router-link>
</div>

<div style="float: right">
    <!--点击上面的/user,那么/user对应的内容就会显示在router-view这里-->
    <router-view></router-view>   
</div>

<script>
    var User={template:'<div>用户管理页面的内容</div>'}
    var Product={template: '<div>产品管理页面的内容</div>'}
    var Review={template:'<div>订单管理页面的内容</div>'}
    var routes=[
        {path:'/user',component:User},
        {path:'/product',component: Product},
        {path:'/review',component:Review}
    ]
 	//创建VueRouter实例
     var router = new VueRouter({
        routes:routes
    });
    //绑定路由
    new Vue({
        el:"#app",
        router
    })
</script>

---

自定义指令

v-xart

1. 使用Vue.directive 来自定义
2. 第一个参数就是 指令名称 xart
3. el 表示当前的html dom对象

<div v-xart> 好好学习，天天向上 </div>
<script>
Vue.directive('xart', function (el) {
    el.innerHTML = el.innerHTML + '自己加点自定义的内容';
    el.style.color = 'pink';
})
new Vue({
    el: '#div1'
}) 
</script>

当然还可以传参(传个json对象啥的）

<div v-xart="{color:'red',text:'best learning video'}"> 好好学习，天天向上 </div>
<script>
Vue.directive('xart', function (el,canshu) {
    el.innerHTML = el.innerHTML + '( ' + canshu.value.text + ' )'
    el.style.color = canshu.value.color
})
</script>

钩子函数

使用vue框架，需要在合适的时机做合适的事情（和生命周期挂钩）

vue生命周期经历的阶段：开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程

1.实例化vue对象	2.初始化事件和生命周期	3.beforeCreate函数（此时没有真实的DOM）
4.挂载数据（属性和computed运算）	5.created函数（Vue对象有数据，但是没有DOM）	6.检查（el属性和template属性）
7.beforeMount函数	8.模板编译（vue对象的数据替换模板内容）	9.monuted函数，数据挂载完毕 Vue对象加载成功（这个时候发送异步请求）
10.beforeUpdate（组件更新前	11.update（组件更新后	12.销毁（销毁前还有组件激活函数）

目前还不是很能理解什么是钩子函数，大概是在对应的生命周期绑定函数吧，之后可以回来再看看

---

fetch+axios

Vue一般不用原生的Ajax而是使用比较流行的ajax框架—fetch，axios

vue-cli，vue crud 要用node.js方面以及webpack等的知识

具体的运用在后面的学习了这部分前端知识再进行补充

---