Vue.js组件

Vue.js组件中的data与methods

　　例如：

　　Vue.component('mycom',{

　　　　template:"#temp",

　　　　　　data(){

　　　　　　　　retrun{

　　　　　　　　　　msg:'组件中的data数据定义'

　　　　}

　　　}

　　})

　　　　组件中的data如果像Vue实例那样传人一个对象，由于JavaSeript中的对象类 型变量实际上保存的是对象的引用，所以当存在多个这样的组件时会共享数据，导致一个组件中

数据的改变会引起其他组件数据的改变。

而使用一个返回对象的函数，每次使用组件都会创建一个新的对象， 这样就不会出现共享数据的问题。

　　　　(2) Vue.js提供<component组件，在该组件中使用v-bind指令搭配is属性来展示对应名称的 组件，即component是一 个 占位符，“：is" 属性可以指定要展示组件的名称，其

切换代码如下所示: 

　　　　<component v-bind:is="切换组件的名称"></component>

简写形式如下:

　　　　component :is=" 切换组件的名称"></component>

 

组件之间传值
　　Vue, is的组件传值有两种方式:父组件传数据给子组件，子组件传数据给父组件。一般父组件通过props属性给子组件下发数据，子组件通过事件给父组件发送消息。
1.父组件传数据给子组件
当子组件在父组件中当作标签使用的时候，给子组件定义一个自定义属性，属性值为想要 传递的数据。在子组件中通过props属性进行接收。特别强调的是，props是专门 ]用来接收外部数据的，该属性有两种接收方式，分别是数组和对象，其中对象可以限制数据的类型。
　　父组件向子组件传递数据的时候，子组件不允许更改父组件的数据，因为父组件会向多个子组件传值，如果某个子组件对父组件的数据进行修改，很有可能导致其他的组件发生错误，而且很难对数据的错误进行捕捉。
　　在子组件中默认无法访问到父组件中的数据和methods方法，但可以在引用子组件时，通 过属性绑定( v-bind: )形式把需要传递给子组件的数据进行下发，以供子组件使用。在子组件中把父组件传递过来的data数据在props数组中进行定义，然后才能使用这个数据。需要特别说明的是，组件中所有props的数据都是通过父组件传递给子组件的，所以props的数据都是只读的，无法重新赋值。
　2.子组件传数据给父组件
　　如果子组件需要给父组件传递数据，需要在子组件中定义一一个自定义事件， 事件名称不需要加括号。在子组件中通过this.$emit触发自定义事件，将需要传递的参数通过emit的第二个参数传递。

自定义指令

　　语法格式：Vue.directive('自定义指令名',{})

　　　　全局自定义指令：　　　　　

　　　　　　<script> 
　　　　　　　　Vue.directive('focus',{
　　　　　　　　　　　　inserted:function(el){
　　　　　　　　　　　　　　el.focus()
　　　　　　　　　　　　　　el.value="获取焦点"
　　　　　　　　　　　　}
　　　　　　　　　　})
　　　　　　　　　　　　　　new Vue({
　　　　　　　　　　　　　　　　el:"#app"
　　　　　　　　　　　　　　})
　　　　　　</script>

局部自定义

　　　　　　　　<script> 
　　　　　　　　　　new Vue({
　　　　　　　　　　　　el:"#app",
　　　　　　　　　　　　directives:{
　　　　　　　　　　　　　　　focus:{
　　　　　　　　　　　　　　　　inserted:function(el){
　　　　　　　　　　　　　　　　　　el.focus()
　　　　　　　　　　　　　　　　　　el.value="获取焦点"
　　　　　　　　　　　　　　}
　　　　　　　　　　}
　　　　　　　　}
　　　　　　})

钩子函数bind的引用　　　

　　　　Vue.directive('runoob',{
　　　　　　　　bind:function(el,binding,vnode){
　　　　　　　　　　　　var s=JSON.stringify
　　　　　　　　　　　　el.innerHTML='钩子函数bind中各个参数的取值：<br/>'+
　　　　　　　　　　　　　　'<b>name:</b>' +s(binding.name)+'<br/>'+
　　　　　　　　　　　　　　'<b>value:</b>' +s(binding.value)+'<br/>'+
　　　　　　　　　　　　　　'<b>expression:</b>' +s(binding.expression)+'<br/>'+
　　　　　　　　　　　　　　'<b>argument:</b>' +s(binding.arg)+'<br/>'+
　　　　　　　　　　　　　　'<b>modifiers:</b>' +s(binding.modifiers)+'<br/>'+
　　　　　　　　　　　　　　'<b>vnode keys:</b>' +Object.keys(vnode).join(',')
　　　　　　　　　　　　}
　　　　　　　　})

 

 

实操制作高校网站首页

　　　　了解网站创建流程 

　　　　网站的制作步骤

　　　　　　1、网站策划

　　　　　　2、网站素材收集

　　　　　　3、网站规划

　　　　　　4、网站目录设计

　　　　　　5、网站制作

遇到一个问题，制作模态框时，点击按钮模态框弹出，弹出后因为遮罩添加的父节点是body，把div覆盖了。导致遮罩挡在了最前面，无法进行操作。

解决办法是

　　　　添加一个data-backdrop="false" 取消自动添加遮罩。

使用js代码实现如下
　　$('.modal-open').find('.modal-backdrop').remove();
因为遮挡主要是modal-backdrop类导致的问题。