精华内容
下载资源
问答
  • 主要介绍了Vue的自定义组件不能使用click方法的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue的自定义组件 定义格式 Vue.component(组件名称, { props:组件的属性, data: 组件的数据函数, template: 组件解析的标签模板 }) 代码解析(详细解释在注解中) <!DOCTYPE html> <html lang="en"> <...

    Vue的自定义组件

    定义格式

    Vue.component(组件名称, {
    props:组件的属性,
    data: 组件的数据函数,
    template: 组件解析的标签模板
    })

    代码解析(详细解释在注解中)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>自定义组件</title>
        <script src="vue/vue.js"></script>
    </head>
    <body>
        <div id="div">
            <!--
                实际解析在html中是这样的
                <button style="color: red;">我的按钮</button> 
            -->
            <my-button></my-button>
    
            <!-- 
                实际解析
    <div><div>张三</div> <div>18</div> <div></div> <div>苍老师</div> <div></div></div>
             -->
             <student myname="张三" age = "18" gender="男"></student>
        </div>
    </body>
    <script>
        // 自定义标签
        Vue.component("my-button",{
            // 属性
            props:[""],
            // 数据函数
            data: function(){
                return{
                    msg:"我的按钮"
                }
            },
            //解析标签模板
            template:"<button style='color:red'>{{msg}}</button>"
        });
    
        //定义学生标签
        //使用这个标签能够用div现实学生姓名,年龄,性别
        //实现的内容是用户同属性传递的
        Vue.component("student",{
            //属性数据,在使用student属性的时候值会传递到这里来
            props: ["myname","age","gender"],
            //数据函数
            data: function(){
    
            },
            //模板元素只能有一个标签元素,但是可以有多个子元素
            /*模板中的数据:
                1.props中
                2.data
            */
            template: `
            <div>
                <div>{{myname}}</div>
                <div>{{age}}</div>
                <div>{{gender}}</div>
                <div>{{bzr}}</div>
            <div>
            `,
            data :function(){
                return {
                    bzr: "苍老师",
                    // data与props重名,优先使用props用户传递的
                    myname: "波老师"
                };
            }
        });
    
        new Vue({
            el:"#div"
        });
    </script>
    </html>
    

    浏览器解析

    在这里插入图片描述

    Vue的生命周期(钩子函数)

    图片来源vue官网

    在这里插入图片描述
    在这里插入图片描述

    以下代码从Vue官网粘贴

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>生命周期</title>
        <script src="vue/vue.js"></script>
    </head>
    <body>
        <div id="app">
            {{message}}
        </div>
    </body>
    <script>
        let vm = new Vue({
    				el: '#app',
    				data: {
    					message: 'Vue的生命周期'
    				},
    				beforeCreate: function() {
    					console.group('------beforeCreate创建前状态------');
    					console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
    					console.log("%c%s", "color:red", "data   : " + this.$data); //undefined 
    					console.log("%c%s", "color:red", "message: " + this.message);//undefined
    				},
    				created: function() {
    					console.group('------created创建完毕状态------');
    					console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
    					console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化 
    					console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
    				},
    				beforeMount: function() {
    					console.group('------beforeMount挂载前状态------');
    					console.log("%c%s", "color:red", "el     : " + (this.$el)); //已被初始化
    					console.log(this.$el);
    					console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化  
    					console.log("%c%s", "color:red", "message: " + this.message); //已被初始化  
    				},
    				mounted: function() {
    					console.group('------mounted 挂载结束状态------');
    					console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化
    					console.log(this.$el);
    					console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
    					console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 
    				},
    				beforeUpdate: function() {
    					console.group('beforeUpdate 更新前状态===============》');
    					let dom = document.getElementById("app").innerHTML;
    					console.log(dom);
    					console.log("%c%s", "color:red", "el     : " + this.$el);
    					console.log(this.$el);
    					console.log("%c%s", "color:red", "data   : " + this.$data);
    					console.log("%c%s", "color:red", "message: " + this.message);
    				},
    				updated: function() {
    					console.group('updated 更新完成状态===============》');
    					let dom = document.getElementById("app").innerHTML;
    					console.log(dom);
    					console.log("%c%s", "color:red", "el     : " + this.$el);
    					console.log(this.$el);
    					console.log("%c%s", "color:red", "data   : " + this.$data);
    					console.log("%c%s", "color:red", "message: " + this.message);
    				},
    				beforeDestroy: function() {
    					console.group('beforeDestroy 销毁前状态===============》');
    					console.log("%c%s", "color:red", "el     : " + this.$el);
    					console.log(this.$el);
    					console.log("%c%s", "color:red", "data   : " + this.$data);
    					console.log("%c%s", "color:red", "message: " + this.message);
    				},
    				destroyed: function() {
    					console.group('destroyed 销毁完成状态===============》');
    					console.log("%c%s", "color:red", "el     : " + this.$el);
    					console.log(this.$el);
    					console.log("%c%s", "color:red", "data   : " + this.$data);
    					console.log("%c%s", "color:red", "message: " + this.message);
    				}
    			});
    
    		
    			// 销毁Vue对象
    			vm.$destroy();
    			vm.message = "hehe";	// 销毁后 Vue 实例会解绑所有内容
    
    			// 设置data中message数据值
    			// vm.message = "good...";
    </script>
    </html>
    

    浏览器控制台查看生命周期

    在这里插入图片描述

    展开全文
  • 1. 自定义组件( 插件 ) 案例: 封装一个 Loading 组件 Loading是用来做什么? 基于用户体验 loading使用方式很多 第三方ui库/组件库 自定义封装 过程: 创建一个目录文件夹,称之为Loading 在loading中创建...

    1. 自定义组件( 插件 )

    案例: 封装一个 Loading 组件
    Loading是用来做什么的?
    基于用户体验
    loading使用方式很多

    1. 第三方的ui库/组件库
    2. 自定义封装
      1. 过程:
      2. 创建一个目录文件夹,称之为Loading
      3. 在loading中创建一个叫做component目录,用来放模板
      4. 在Loading目录下创建一个index.js
        import Vue from 'vue'
        import tpl from './component/index.html'
        const Loading = {
          // 自定义封装组件,这个loading对象中必须有一个关键key
          install () {//一定要用install方法
            Vue.component( 'Loading', {
              template: tpl
            })
          }
        }
      
      
        export default Loading
      
      1. 使用:

    2. 自定义指令

    1. 指令是用来操作DOM

    2. 指令的使用形式: 属性

    3. 自定义指令方式有两种:

      • 全局注册指令
        • Vue.directive( 指令的名称, 指令的配置项 )
      • 局部注册指令
        • directives: {
          ‘指令名称’: 指令的配置项
          }
    4. 研究:

      • 指令的配置项提供了5个钩子函数
      • 以及钩子函数中的参数
        • console.log( ‘el’,el ) // el 指令绑定的元素
        • console.log( ‘binding’,binding ) // 指令的详细信息
        • console.log( ‘vnode’, vnode ) // 当前绑定元素的信息
        • console.log( ‘oldVnode’,oldVnode ) // 上一个绑定元素的信息
    5. 案例: 打开网页,input自动获得焦点

     <div id="app">
     <div class="box">
      <button  @click = 'flag = false'> 点击 </button>
      <input type="text"  v-if = "flag" v-focus.yyb v-model = "msg">
      <input type="text"  v-if = "flag" v-focus v-model = "msg">
     </div>
    </div> 
    
     Vue.directive( 'focus',{//全局注册指令
     bind ( el,binding,vnode,oldVnode ) { //调用一次,指令一绑定在元素身上就会触发
       // console.log( 'bind focus' )
       // console.log( 'el',el  ) // el 指令绑定的元素
       // console.log( 'binding',binding ) // 指令的详细信息
       // console.log( 'vnode', vnode )  // 当前绑定元素的信息
       // console.log( 'oldVnode',oldVnode ) // 上一个绑定元素的信息
       // el.style.background = 'red'
     },
     inserted (  el,binding,vnode,oldVnode ) { // 当前绑定的元素插入父节点时调用
       el.focus()
       if( binding.modifiers.yyb ){
         el.style.color = 'green'
       }else{
         el.style.color = 'red'
       }
       console.log( binding )
       console.log( 'inserted ' )
     },
     update ( el, binding, vnode, oldVnode ) {  // 当前指令绑定的元素发生改变
       console.log( 'update' )
       console.log( 'el',el  ) // el 指令绑定的元素
       console.log( 'binding',binding ) // 指令的详细信息
       console.log( 'vnode', vnode )  // 当前绑定元素的信息
       console.log( 'oldVnode',oldVnode ) // 上一个绑定元素的信息
     },
     componentUpdated ( el,binding,vnode,oldVnode) { //当前绑定元素发生改变,或是子元素发生改变
       console.log( 'componentUpdated' )
     },
     unbind ( el,binding,vnode,oldVnode) { // 组件销毁时触发
       console.log( 'unbind' )
     }
    })
    
    new Vue({
     el: '#app',
     data: {
       msg: 1000,
       flag: true
     },
     directives: {//局部注册指令
       'focus': {
         bind () {
    
         },
         inserted () {
    
         },
         update () {
    
         },
         componentUpdated () {
    
         },
         unbind () {
           
         }
       }
     }
    })
    

    3. 自定义的事件

    • v-on:click = ‘aa’
    • v-on:yyb = ‘aa’
    • v-on:before-enter: ‘’
    • v-on:aa = ‘fn’
    1. 自定义事件
      事件的发布
      事件的订阅
      <div id="app"></div>
      
       var vm = new Vue({
        el: '#app'
      })
      vm.$on(事件的名称,事件的回调)
      //事件的发布
      vm.$on('aa',function(){
        alert( 'aa' )
      })
      // 事件的订阅
      // vm.$emit(事件的名称)
      vm.$emit( 'aa' )
      
    2. 自定义事件的使用形式
      1. 组件生命周期中发布事件,通过某一个事件处理程序调用
      <div id="app">
        <button @click = 'fn'> 点击 </button>
      </div>
    
       var vm = new Vue({
         el: '#app',
         methods: {
           fn () {
             this.$emit('aa')
           }
         },
         mounted () {//组件生命周期中发布事件,通过某一个事件处理程序调用
           this.$on('aa',function(){
             alert('aa')
           })
         }
       })
    
    
    1. 绑定在组件身上 , 通过 v-on 绑定,可以实现子父组件通信

    4. 组件通信 单项数据流 >9种

    1. 父子组件通信:父组件将自己的数据传递给子组件

      1. 子组件把父组件的数据通过属性绑定的形式传递给自己,单项数据绑定

        <Son :aa = "money"></Son>

      2. 子组件在自己的配置项中通过 props 来接收这个属性

          Vue.component('Son',{
            template: '#son',
            // props: ['aa'],
            props: {
              // 属性: 属性的数据类型  给数据做属性验证,验证数据类型
              'aa': Number 
            }
          })
      
      1. 这个属性可以直接向全局变量一样使用
        <p> 我老爸给了我:{{ aa }} 钱 </p>
      
    2. 子父组件通信 :子组件将数据发送给父组件

      1. 方法1,自定义事件

        • 流程:
        1. 父组件中定义一个数据,然后在methods定义一个方法用来修改这个数据
          Vue.component('Father',{
             template: '#father',
             data () {
               return {
                 num: 0
               }
             },
             methods: {
               add ( val ) {
                 console.log('add')
                 this.num += val
               }
             }
           })
        
        1. 父组件通过自定义事件的形式,将父组件的一个方法传递给子组件

          <Son @aa = 'add'></Son>

        2. 子组件可以通过 this.$emit( 自定义事件名称,参数1,参数2…) 来订阅这个自定义事件

          Vue.component('Son', {
                template: '#son',
                  data () {
                      return {
                         money:1000
                     }
                  },
                  methods:{
                     give () {
                          this.$emit('send',this.money)//子组件通过this.$emit来订阅这个自定义事件
                      }
                 }
            })
        
      2. 方法2,父组件将一个方法直接通过单向数据绑定的形式传递给子组件,子组件通过props接收,然后直接使用

      3. 方法3,父组件可以将一个对象型的数据传递给子组件,子组件修改了这个数据,父组件也同样会修改

        • 这个形式违反了单向数据流,用的少
    3. 非父子组件通信

      1. 使用ref链绑定
        • ref不仅可以绑定组件,也可以绑定普通元素
        <!-- 举例 -->
        <div id="app">
          <Brother ref="brother"></Brother>
          <hr>
          <Sister ref="sister"></Sister>
        </div>
        <template id="brother">
         <div>
              <h3>brother</h3>
              <button @click="give">传递数据</button>
             <p>brother的数据是:{{ money }}</p>
          </div>
        </template>
        <template id="sister">
          <div>
             <h3>sister</h3>
              <p>sister的数据是:{{ money }}</p>
          </div>
       </template>
      
       //非父子组件通信:通过ref链,ref链的绑定必须通过父组件来看
            Vue.component ('Brother',{
               template:'#brother',
                data () {
                   return {
                        money:1000
                    }
                },
                methods:{
                    give (){
                       this.$parent.$refs.sister.money=this.money//通过父级找到子级
                    }
               }
           })
           Vue.component ('Sister',{
               template:'#sister',
               data (){
                   return {
                        money:0
                    }
                }
            })
         new Vue({
           el: '#app',
            // mounted (){
           //     console.log(this)
            // }
          })
      
      1. 使用事件总线(bus总线)
      <!-- 举例 -->
       <div id="app">
         <Brother></Brother>
         <hr>
         <Sister></Sister>
      </div>
      <template id="brother">
         <div>
             <h3>brother</h3>
             <button @click="give">传递</button>
             <p>brother的数据是:{{ money }}</p>
         </div>
      </template>
      <template id="sister">
         <div>
             <h3>sister</h3>
             <p>sister的数据是:{{ money }}</p>
         </div>
      </template>
      
      
        //非父子组件通信:事件总线,通过事件来做
      //    事件的发布  $on(方法名称,回调函数)
      //    事件的订阅  $emit(方法名称)
      //通过new Vue开辟另外一个实例,再用这个实例上面的$on和$emit方法
      var bus = new Vue()
      Vue.component('Brother', {
         template: '#brother',
         data() {
             return {
                 money: 1000
             }
         },
         methods: {
             give() {
                 bus.$emit('give',this.money)//通过参数的形式传递数据
             }
         }
      })
      Vue.component('Sister', {//自己管理自己的数据
         template: '#sister',
         data() {
             return {
                 money: 0
             }
         },
         mounted () {//组建一创建就要有这个数据
             bus.$on('give', (val) => {//这里要用箭头函数,否则this会丢失
                 this.money += val
             })
         }
      
      })
      new Vue({
         el: '#app',
      
      })
      
    4. 多组件的状态共享 vuex( 目前不讲, 改天)

    5. 多级组件通信 ( $attr 扩展 )

    6. vue-router ( 目前不讲, 改天)

    7. 在一个组件当中,自己的数据由自己管理

    展开全文
  • vue自定义组件及在script中引用图片详解 首先要将新建文件放在components文件夹中 然后回到app.vue中 在app.vue中引用组件 我们以新建Header.vue为例 important Hearder from './components/Header.vue' 在...

    vue自定义组件及在script中引用图片详解

    首先要将新建的文件放在components文件夹中在这里插入图片描述

    然后回到app.vue中
    在这里插入图片描述
    在app.vue中引用组件
    我们以新建的Header.vue为例

    important Hearder from './components/Header.vue'
    

    在这里前面的的Hearder的意思是别名,叫什么都可以,后面的路径是我文件的路径,大家可以写自己相对应的组件路径
    在这里插入图片描述
    在data中的components中声明组件,里面的名字就是别名
    在这里插入图片描述
    然后在上面就可以用组件名再使用组件
    所有的内容都写在了,components文件夹下的文件里,包括div、script 和css样式,在主页面只需要引用就可以

    ps:在script中引用图片的方法
    1.第一种方法
    <template>
      <div>
        <img :src="img" />
      </div>
    </template>
    <script>
    data()
    {
    return{
       img:require("图片路径")
          }
    }
    </script>
    

    注意:div中img的src前面是冒号,src中的名称要与data中的img一致

    2.第二种方法(第二种方法和引用组件非常相似)

    首先引用图片(import)

    <template>
      <div>
         <img :src="img" />
      </div>
    </template>
    <script>
    import logo from "../assets/logo.png"
    data(){
      return{
        img:logo
      }
    }
    </script>
    

    注意:return中的img后面的logo要与引用的logo名称一致,而img这个名称要与div的img中的src引用的一致

    根据自己的思路走的,如有不对,欢迎指正!!!

    展开全文
  • 文章目录Vue列表循环非响应式情况自定义指令混入 mixin异步组件自定义插件过渡和动画Vue项目快速构建工具 cli Vue列表循环非响应式情况 数组length无法响应,就算length为零,dom还是存在 解决:使用arr=null;...

    Vue列表循环非响应式情况

    • 数组的length无法响应,就算length为零,dom还是存在
      解决:使用arr=null; arr.splice(0)
    • 当你利用索引直接设置一个数组项
      比如 vm.items[index]=newValue
      这样的情况就无法响应,无法更改要更改的值
      解决:Vue.set/this.$set Vue里提供的方法

    自定义指令

    1.内置指令

    • v-html
    • v-text
    • v-on
    • v-bind
    • v-if
    • v-else-if
    • v-else
    • v-show
    • v-for
    • v-model
    • v-slot 【 2.6.x 】

    2.定义方式

    • 全局定义 Vue.directive(‘指令的名称’,‘指令的选项options’)

    在这里插入图片描述

    • 局部定义 组件内选项 directives
      在这里插入图片描述

    混入 mixin

    1.什么叫做混入

    • 将组件的选项中的一部分分离出去,单独管理

    2.方式有两种

    • 局部混入 mixins【推荐使用】

    • 在单独的JS文件里定义一个对象,里面写methods选项方法再引入使用的文件里
      在这里插入图片描述
      在这里插入图片描述
      *全局混入 Vue.mixin【不推荐使用】

    异步组件

    在大型应用中,我们可能需要将应用分割成小一些的代码块,并且只在需要的时候才从服务器加载一个模块。为了简化,Vue 允许你以一个工厂函数的方式定义你的组件,这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数,且会把结果缓存起来供未来重渲染.

    在这里插入图片描述

    自定义插件

    1.自定义的插件应该有一个 install 方法
    2.自定插件必须使用 Vue.use(‘插件名称’) 才能使用插件
    在这里插入图片描述
    在这里插入图片描述

    过渡和动画

    1.过渡 【css3】 通过css来实现过渡效果
    2. 动画 【js】 通过js来实现动画效果
    3.Vue中如何使用以上两个效果?

    • 自定义css
    • 第三方css库 【Animate.css】 推荐
    • 自定义动画
    • 第三方js动画库 【Velocity.js】 推荐

    Vue项目的快速构建工具 cli

    vue项目的快速构建工具 cli 【 脚手架

    1. 什么是cli?
      cli是vue提供的一个用来快速构建项目环境的一个工具,底层使用的是webpack
    2. cli目前有哪些版本?
      cli2 cli3
      cli3对电脑的配置有一定要求
    3. cli如何使用?
      1. cli的安装
        npm/cnpm/yarn 都可以使用 【 yarn 配置国内镜像 】
        使用国内镜像加速npm和yarn
        npm config set registry=https://registry.npm.taobao.org
        yarn config set registry https://registry.npm.taobao.org
        下载cnpm:npm install -g cnpm –registry=https://registry.npm.taobao.org

        1. $ yarn add @vue/cli global 这个是cli3的版本
          如果我们还想使用cli2的脚手架,那么我们可以在安装一个包
          cli3 @vue/cli
          cli2 vue-cli 【 不要安装 】
          所以一个电脑只能装一个
          问题: 如果我们同时想使用 cli2 和 cli3 怎么办呢?
        2. $ yarn add @vue/cli-init global
          如果安装3失败了,
          那么你可以使用cnpm继续安装 @vue/cli @vue/cli-init
          1. $ cnpm i @vue/cli -g 这个是cli3的版本
            如果我们还想使用cli2的脚手架,那么我们可以在安装一个包
          2. $ cnpm i @vue/cli-init -g
            如果还有问题:
            那么你就不要使用cli3了,你可以单独安装cli2 【 先卸载cli3,重启电脑 】
            $ cnpm i vue-cli -g
      2. 验证是否安装成功
        命令行输入: $ vue 看是否有东西输出,如果输出命令提示,证明安装成功

      3. 创建项目
        cli3版本创建

        1. 命令创建 【 推荐 】
          $ vue create project
          • 手动选择配置
          • 如果安装node-sass出问题,如何解决:
            • 先切换成npm源 nrm use npm
            • 使用cnpm 安装 cnpm i node-sass sass-loader -D
        2. 图形界面创建
          $ vue ui
          cli3两种形式创建的结果是一样的
          cli2版本创建
        3. 标准版
          $ vue init webpack project
        4. 简易版
          $ vue init webpack-simple project
    展开全文
  • 在父组件中, 给children组件定义一个saySomeThing: <template> <div class="home"> <p>{{saySomeThing}}</p> <Children v-model="saySomeThing" /> </div> </template>...
  • 1.首先安装依赖 npm install tinymce-vue npm install tinymce ...2.组件中引入tinymce-vue import Editor from 'tinymce-vue' 3.初始化tinymce { selector: '#tinymce', media_live_embeds: false, lang
  • Vue的自定义组件不能使用click方法

    千次阅读 2018-10-26 20:15:30
    var myButton = Vue.extend({//设置标签 props: ['names', 'item2'],//names为按钮名,item2为数据 template: '&lt;span&gt;&lt;span v-for="obj in item2" v-if="obj.name==names&...
  • , //Vue对象作用范围 components:{ ' drag ' :{ //drag标签 data:function(){ return { json:{width: " 100px " ,height: " 100px " , background: " red " ,position: " absolute " ...
  • 这样是不能触发click事件,即这个自定义组件“TopButton”是不能直接触发点击事件! 加上.native就可以了,修改之后代码如下: <TopButton v-show="showBtnToTop" @click.native="scrollBack(1)"/> ...
  • 主要介绍了vue2.0 自定义组件的方法(vue组件封装),本文通过实例代码相结合形式给大家介绍非常详细,需要朋友可以参考下
  • Vue的自定义组件的 v-model的这块将的不是很清楚,今天我们就一起来捋一下看看自定义组件中的v-model是什么。先看官方文档中对v-model的解释v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动...
  • Vue - 自定义组件

    万次阅读 2018-09-24 17:48:11
    这篇文章介绍Vue的自定义组件。定义全局组件的第一种方式: html代码:定义全局组件的第二种方式: html代码:定义全局组件的第三种方式: html代码: 常用的方式是第三种,原因: (1)在工作中模板中肯定有很多...
  • 今天小编就为大家分享一篇vue-自定义组件传值实例讲解,具有很好参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了Vue EventBus自定义组件事件传递,组件化应用构建是Vue的特点之一,本文主要介绍EventBus进行数据消息传递 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue开发项目中想自定义一个自己的组件,于是在网上找一下...学习 ES6中import xxx from xxx的用法,因为这个用法会在后面的自定义组件中用到。 Vue使用import … from …来导入组件,库,变量等。而from后的文件来...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,106
精华内容 3,242
关键字:

vue的自定义组件

vue 订阅