精华内容
下载资源
问答
  • 模板: { "Print to console":{ "prefix": "vue", "body": [ "<template>", "</template>", "", "<script>", "export default {", " components:{},", " ...

    VScode》文件》首选项》用户片段》vue.json(Vue)
    在这里插入图片描述
    模板:
    在这里插入图片描述

    {
    	"Print to console":{
    		"prefix": "vue",
    			"body": [
    				"<template>",
    				"<section>",
    				"</section>",
    				"</template>",
    				"",
    				"<script>",
    				"export default {",
    				"  components:{},",
    				"  props:{},",
    				"  data(){",
    				"    return {",
    				"    }",
    				"  },",
    				"  watch:{},",
    				"  computed:{},",
    				"  methods:{},",
    				"  created(){},",
    				"  mounted(){}",
    				"}",
    				"</script>",
    				"",
    				"<style scoped lang='less'>",
    				"</style>"
    			],
    			"description": "A vue file template"
    	}
    }
    
    展开全文
  • vue组件创建,组件注册 效果图 其中header是公用组件   步骤: 1:创建compotents文件夹,里面放我们要用的各个组件模块   2:首先编写公共组件Header.vue这个组件,我们以他为范本 &lt;...

    vue的组件创建,组件注册

    效果图

    其中header是公用组件

     

    步骤:

    1:创建compotents文件夹,里面放我们要用的各个组件模块

     

    2:首先编写公共组件Header.vue这个组件,我们以他为范本

    <template>
        <!-- 挂载的组件 -->
        <div id="three">
            <h2>{{msg}}</h2>
        </div>
    </template>
    
    <script>
    //将这个组件暴漏出去
    export default{
        name:'three',
        data(){
            return{
                msg:'这是header组件!...'
            } 
        },
    }
    </script>
    
    <style lang="scss" scoped> //要加这个scoped保持每个组件的样式单一性,不然可能会被其它组件同化
    h2{
    color:blue;
    }
    </style>
    
    

    这个Header基本就创建完成了

    3:我们在New.vue里面引入这个Header.vue组件

    <template>    
        <div id="two">
                <h2>{{msg}}</h2>
                <v-header></v-header>  /*这个标签是我们下面给他的自定义名字*/
                <hr>
        </div>
    </template>
    
    <script>
    import Header from "./Header"  //通过import关键字将Header组件引入名字可以自定义但是路径要对
    
    export default {
        name:'two',
        data(){
            return{
                msg:'这是New',
            }
        },
        //通过这个标签将Header写入到页面上 这个里面的Header要和我们用import引入时起的名字一样
        components:{
            'v-header':Header
        },
    }
    </script>
    
    <style lang="scss">
    p{
        color:green;
    }
    </style>

    4:这样其实就好了,以我为例,我是在App.vue里面运行的 因为这个New组件引入了Header组件,所以我只需要把这个New组件引入到App.vue里面就好了,同理:

    <template>
    <div id="app">
        {{msg}}
        <div class="styclass">
           <v-new></v-new>
        </div>  
    </div>
    </template>
    
    <script>
    import New from "./components/New.vue"
    //1:引入组件 2:挂载组件 3:在模板中使用
    export default {
      name: 'app',
      data () {
        return{
          msg:'组件模块'
        }
      },
      components:{
         'v-new':New,  
      }
    }
    </script>
    
    <style lang="scss" scoped>
    //scoped 局部美化
    .styclass{
      padding: 10px;
      border:1px solid gray;
      margin-top: 1%;
    }
    </style>
    

    这样就好了..有问题请留言

    展开全文
  • Vue 本人是个新手,写下博客用于自我复习、自我总结。 如有错误之处,请各位大佬指出。 学习资料来源于:尚硅谷


    本人是个新手,写下博客用于自我复习、自我总结。
    如有错误之处,请各位大佬指出。
    学习资料来源于:尚硅谷


    使用vue-cli创建模板项目

    vue-cli 是 vue 官方提供的脚手架工具。

    (先找好Vue项目的根目录)
    (以下命令需要先安装node.js才可以,如果有需要,可以移步我之前node.js的文章,里面有node的基本用法)
    ①全局安装:
    在这里插入图片描述

    ②建项目:

    这个脚手架其实提供了六种项目可供选择,感兴趣的可以去
    github: https://github.com/vuejs/vue-cli找找看。
    平常选择最多的就是webpack,除此以外还有browserify等等

    在这里插入图片描述
    然后会出现下面的一系列初始化:
    在这里插入图片描述
    其中Project name 一定要小写(当然你可以自己命名),暂时不用vue-router,Set up unit tests单元测试的包也不需要,其他的默认就行。
    因为需要安装包,所以在最后的时候,可以选择如何下载,一个使用NPM下载,一个使用Yarn下载,No就是我们自己来安装,这里选择第三个。

    选择好后,它也会告诉我们接下来如何去做:
    在这里插入图片描述
    所以之后就这么操作即可。
    ③ cd vue_demo
    ④ npm install (下的很慢…)
    ⑤ npm run dev 这一步为什么要这么做其实在vue_demo的package.json里写到:
    在这里插入图片描述
    在运行第五步后会提示你,进入8080。然后访问:http://localhost:8080/ 即可。
    在这里插入图片描述
    只要能出现一个初始的Vue页面就成功了。之后就可以去编写代码了。


    模板项目的结构

    在我们建好项目后,在项目中可以看到一些配置文件:
    在这里插入图片描述

    这其中就可以看到webpack的开发环境配置和生产环境配置。(如果感兴趣,可以移步我之前webpack的文章。当然目前我们不需要了解这些配置)

    还需要说的是index.js,它里面可以设置端口号。如果有多个vue项目需要运行,还需要来手动更改端口号。autoOpenBrowser可以设置是否自动打开浏览器,如果设置为true,当我们npm run dev的时候就会自动打开页面,不需要我们手动输入了。
    在这里插入图片描述
    node_modules就是依赖,src就是源码的目录,把代码写在里面。
    在这里插入图片描述
    static放置一些全局的资源,比如:样式或者图片
    在这里插入图片描述
    我们可以发现最开始static文件夹下,有个文件叫做gitkeep,而且它里面什么都没有。它的作用是为git服务的,因为git有一个特点:如果这个文件夹里面什么都没有,它会自动把这个文件夹忽略。但是我们不希望static文件夹被忽略,否则我们还得手动创建一个static文件夹,为了方便,只要在文件夹下放一个文件名叫作gitkeep的空文件就可以了。

    .babelrc:用来将ES6转为ES5,JSX转为JS。
    在这里插入图片描述

    .eslintrc:eslint的配置。
    .eslintignore:eslint会对一些文件进行检查,通过在其中设置可以帮我们忽略一些文件
    在这里插入图片描述
    eslintignore默认帮我们忽略build文件夹,config文件夹,将来要生成的dist文件夹和根目录下的js文件。(需要的话我们按格式手动添加就好)
    在这里插入图片描述

    在这里插入图片描述
    gitignore默认会帮我们忽略:依赖文件夹,将来要生成的dist文件夹,安装失败的debug日志文件,还有各种软件生成的文件夹。这些文件 / 文件夹显然不希望被解析
    在这里插入图片描述
    项目的一些描述文件:
    在这里插入图片描述

    总结:
    在这里插入图片描述
    需要注意的是,入口js文件一定不能改名,因为在webpack的配置中设置了入口文件名,咱们也没必要去修改。
    在这里插入图片描述


    基于脚手架编写项目

    在初始化建好的项目里:
    在index.html中可以看到:
    在这里插入图片描述
    那么我们想去创建Vue实例,在main.js中就要new Vue:
    在这里插入图片描述
    这其中有一个components。在导入组件App.vue时,import App … ,这个App不像以前一样确定了这个组件的标签名,我们还需要配置。所以它的作用是:将这个组件映射成特定名称的标签。所以它完整格式是这样的:components:{App: App},我们简写就好了。当我们导入好了之后就可以将这个模板匹配到页面中的id为app的div,我们渲染的根组件就是App.vue。

    组件:局部功能界面,里面包含实现这个界面所有的相关资源html+css+js / img
    正是因为它需要这些相关资源,所以在组件App.vue中:
    我们可以看到三组标签:<template> <script> <style>

    现在说完了一个基本的格式,我们现在就来自己编写:
    项目结构:
    在这里插入图片描述
    根组件一般放在src根目录下,暂且就叫App.js。

    对于组件有一个默认格式:
    模板必须要有个根标签(不一定是div),然后script向外默认暴露一个配置对象。

    <template>
      <div>
       
      </div>
    </template>
    
    <script>
      export default {
    
      }
    </script>
    
    <style>
    
    </style>
    

    HelloWorld.vue:

    <template>
      <div>
        <p class="msg">{{msg}}</p>
      </div>
    </template>
    
    <script>
      export default{ //配置对象(与Vue一致)
        data () { //必须写函数
          return{
            msg: 'Hello Vue'
          }
        }
      }
    </script>
    
    <style>
      .msg{
        color: red;
        font-size: 30px;
      }
    </style>
    

    我们想使用,需要设置App.vue

    <template>
      <div>
        <img class="logo" src="./assets/logo.png">
        <!-- 3、使用组件标签 -->
        <HelloWorld/>
      </div>
    </template>
    
    <script>
      //1、引入组件
      import HelloWorld from './components/HelloWorld'
    
      export default {
        //2、映射组件标签
        components: {
          HelloWorld
        }
      }
    </script>
    
    <style>
      .logo {
        width:200px;
        height:200px;
      }
    </style>
    

    然后设置入口文件,main.js:

    //入口js:创建Vue实例
    import Vue from 'vue'
    //1、引入
    import App from './App'
    
    new Vue({
      el: '#app',
      //2、映射
      components: {
        App
      },
      //3、使用
      template: '<App/>'
    })
    

    现在我们对生命周期的另一条路径终于有了解答(之前没有去说明),当系统去判断有没有template模板,现在我们设置了模板,它就会把模板中的内容挂入到html中去显示。

    在这里插入图片描述
    index.html

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>vue_demo</title>
      </head>
      <body>
        <div id="app"></div>
      </body>
    </html>
    

    现在就写完了,npm run dev即可。


    项目的打包与发布

    ①打包:npm run build
    打包后就会出现之前提到过但是没详细说明的dist文件夹。

    ②发布1:使用静态服务器工具包

    • 安装:npm i -g serve
    • serve dist (相当于运行文件夹)
    • 访问 http://localhost:5000 (不确定每个人是不是都是5000,运行serve dist后会提示访问的链接)

    ②发布2:使用动态 web 服务器(tomcat)
    (需要tomcat服务器,如果没有,可以不用尝试)

    • 修改配置:
      webpack.prod.conf.js
    output: {
        .... //相关内容
    	publicPath: '/xxx/' //打包文件夹的名称
    }
    
    • 重新打包:
      npm run build
    • 修改 dist 文件夹为项目名称: xxx
    • 将 xxx 拷贝到运行的 tomcat 的 webapps 目录下
    • 访问: http://localhost:8080/xxx

    eslint编码规范检查

    1. ESLint 是一个代码规范检查工具
    2. 它定义了很多特定的规则, 一旦你的代码违背了某一规则, eslint会作出非常有用的提示。根据提示,它会给我们一个规则相关的网页,我们只要去网页上看,就会知道错误原因了(只不过网页是全英的)。
    3. 官网: http://eslint.org/
    4. 基本已替代以前的 JSLint

    但是也许你会碰到一些规则,让你感到难受,我们就可以暂时关闭掉相关规则。

    打开之前提到的eslintrc.js文件,里面会有个rules,我们可以在里面关闭一些规则。
    在这里插入图片描述

    • 0:关闭规则。(off也行)
    • 1:打开规则,并且作为一个警告(信息打印黄色字体)
    • 2:打开规则,并且作为一个错误(信息打印红色字体)

    当然,修改了配置,需要重新npm run dev才能实现。

    但是毕竟大家都在用eslint,虽然有些规则有点难受,最后还是应该根据提示一点点修改(当然需要看公司的态度了,有的可能不看重,有的可能必须要一致)。而且遇到一点问题就修改配置文件,再重启,也挺麻烦的。可以在eslintignore中,直接把文件忽略,这样一来就忽略了所有js文件和vue文件,再在完成项目后把这段代码去掉,用eslint检查,最后一起修改代码也挺好。

    *.js
    *.vue
    

    最后运行只要是以下情况,就没问题了。
    在这里插入图片描述


    组件化编码的流程

    组件化编码的流程:

    1. 拆分组件
    2. 静态组件(数值固定)
    3. 动态组件(初始化显示、交互)

    简单举例(无完整代码,各位可以自己写一个简单的尝试尝试)

    前提是我们写好一个html+css的页面。

    首先是拆分组件:
    在这里插入图片描述
    对于最外围(根组件),依然叫App.vue( 图中写错了,应该只有首字母大写)
    然后分为左右两个组件,左侧组件时提交评论,这里叫它Add.vue。右侧组件是评论回复,这里叫它List.vue,里面的每一项就叫它Item.vue。

    拆分之后对src里设计项目结构:
    在这里插入图片描述

    想好怎么去拆以后,接下来就是静态组件的处理:根据html代码,只要把各自部分的代码移动到组件vue里的template下即可。

    据我所知,很多软件都有缩放的一个功能,如下图。(我使用的是idea)
    它可以把每个部分缩起来。这样一来我们移动html代码就方便了,也好拆很多了。
    因为在设计html时肯定也是按结构去设计的。最外层div不用,里层div就可以放在App.vue中了。然后通过组件去把html拆分,把Add部分和List部分拆出来,分别放在两个vue中即可。
    在这里插入图片描述
    App.vue:

    <template>
      <div>
        <header class="site-header jumbotron">
           <div class="container">
             <div class="row">
               <div class="col-xs-12">
                 <h1>请发表对Vue的评论</h1>
               </div>
             </div>
           </div>
        </header>
        <div class="container">
          <!--3、使用组件-->
          <Add/>
          <List/>
        </div>
      </div>
    </template>
    
    <script>
      //1、引入组件
      import Add from './components/Add.vue'
      import List from './components/List.vue'
    
      export default {
        //2、映射组件标签
        components: {
          Add,
          List
        }
      }
    </script>
    
    <style>
    
    </style>
    
    

    同样的,接下来还可以拆分css,把每个组件部分的css部分拆出来,放在组件的style中即可。同时还可以把相关的css放在static下:
    在这里插入图片描述
    如果放在static下需要注意,在index.html中,引入css资源。
    <link rel="stylesheet" href="/static/css/bootstrap.css">

    第三个就是动态组件,因为Add部分和List部分都需要对评论部分作出操作,所以直接在根组件App中添加设置data,用来记录评论区的变化。设置好之后就需要组件间通信,把data传过去。然后List.vue中还需要声明,去接收传递过来的数据。
    App.vue

    <template>
      <div>
        <header class="site-header jumbotron">
           <div class="container">
             <div class="row">
               <div class="col-xs-12">
                 <h1>请发表对Vue的评论</h1>
               </div>
             </div>
           </div>
        </header>
        <div class="container">
          <Add/>
          <!--传入comments-->
          <List :comments="comments"/>
        </div>
      </div>
    </template>
    
    <script>
      //1、引入组件
      import Add from './components/Add.vue'
      import List from './components/List.vue'
    
      export default {
        data(){
          return{
            comments:[
              {
                name: 'BoB',
                content: 'Vue 还不错'
              },
              {
                name: 'Cat',
                content: 'Vue so Easy'
              }
            ]
          }
        },
        //2、映射组件标签
        components: {
          Add,
          List
        }
      }
    </script>
    
    <style>
    
    </style>
    
    

    List.vue

    <template>
      <div class="col-md-8">
        <h3 class="reply">评论回复:</h3>
        <h2>暂无评论,点击左侧添加评论!!</h2>
        <ul class="list-group">
          <Item v-for="(comment,index) in comments" :key="index" :comment="comment"/>
        </ul>
      </div>
    </template>
    
    <script>
      import Item from './Item.vue'
      export default {
        // 声明接受属性,这个属性就会成为组件对象的属性
        props: ['comments'],
        components:{
          Item
        }
      }
    </script>
    
    <style>
    
    </style>
    
    

    Item.vue

    <template>
      <li>
        <div>
          <a>删除</a>
        </div>
        <p><span>{{comment.name}}</span><span>说:</span></p>
        <p>{{comment.content}}</p>
      </li>
    </template>
    
    <script>
      export default {
        props:{ //指定属性名和属性值的类型
          comment: Object
        }
      }
    </script>
    
    <style>
    
    </style>
    
    

    现在要怎么添加交互

    从绑定事件监听开始,和之前Vue绑定一样,先找到需要绑定的按钮,然后@click=“xxx”。

    然后通过在App.vue组件中,写methods作出添加效果,然后传递到Add.vue。

    也许在这里不禁会问,为什么一定要在App.vue写comment属性和addComment方法?
    首先,是因为如果要传递对象属性或者方法,只能从根组件传递到子组件,因为我们拆分的时候就是这么拆的,我们用<Add/>这种方式将这一部分代码放到另一个组件,在需要的时候再挂上来,是这样的效果(当然也包括List和Item的关系,List相当于Item的根组件)。那也许你会问,我们不是import Add .. 了吗,从以前学习经验来讲,我们应该可以调用Add中暴露出的方法和属性才对?我们从代码中,可以看出来,我们import后,经过components映射出来的只有Add标签。组件化就类似于一种规范,帮助我们更好的实现一种层次结构,如果从子组件能传递属性到根组件,那就更乱了。这其中的细节有兴趣的需要去找找源码了。

    正是因为上述特性,我们只能从根组件传递属性或方法到子组件,那如果Add添加评论,在List还要展示,那显然不能各自建对象属性,因为需要动态展示,在Add添加了评论就还得能传递到List中。所以需要通过在App组件中写对象属性,然后传递出去,这样删除、添加操作直接对App中属性进行操作即可。如下面代码。

    也许在这里又会想到,既然之前说到传递后用prop接收后,就会变成这个组件自己的属性或方法,但是addComment方法显然需要在App组件中才能实现添加,因为Add组件中没有comments对象属性?实际上,我们传递的addComment,它是对根组件的对象属性作出的操作,传递出去,依然还是对根组件的对象属性作出操作,虽然在Add组件中接收了并成为它自己的一个方法。所以在Add中,接收了方法,使用了方法,并传递了一个参数,然后就会送回到App中,通过送回的参数对comments作出操作。这种就是Vue组件化的一个动态效果:交互。我们通过这种方式实现了不同组件化之间的联系。详细细节就需要看源码了。

    App.vue

    <template>
      <div>
        <header class="site-header jumbotron">
           <div class="container">
             <div class="row">
               <div class="col-xs-12">
                 <h1>请发表对Vue的评论</h1>
               </div>
             </div>
           </div>
        </header>
        <div class="container">
          <Add :addComment="addComment"/>
          <List :comments="comments"/>
        </div>
      </div>
    </template>
    
    <script>
      import Add from './components/Add.vue'
      import List from './components/List.vue'
    
      export default {
        data(){
          return{
            comments:[
              {
                name: 'BoB',
                content: 'Vue 还不错'
              },
              {
                name: 'Cat',
                content: 'Vue so Easy'
              }
            ]
          }
        },
        methods:{
          //添加评论
          addComment(comment){
            this.comments.unshift(comment)
          }
        },
        components: {
          Add,
          List
        }
      }
    </script>
    
    <style>
    
    </style>
    
    

    Add.vue

    <template>
          <div class="col-md-4">
            <form class="form-horizontal">
              <div class="form-group">
                <label>用户名</label>
                <input type="text" class="form-control" placeholder="用户名" v-model="name">
              </div>
              <div class="form-group">
                <label>评论内容</label>
                <textarea class="form-control" rows="6" placeholder="评论内容" v-model="content"></textarea>
              </div>
              <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                  <button type="button" class="btn btn-default pull-right" @click="add">提交</button>
                </div>
              </div>
            </form>
          </div>
    </template>
    
    <script>
      export default {
        props:{
          addComment:{ //最完整写法:指定属性名/属性值的类型/必要性
             type:Function,
             required: true
          }
        },
        data(){
          return{
            name:'',
            content:''
          }
        },
        methods:{
          add(){
            //1、检查输入的合法性
            const name = this.name.trim()
            const content = this.content.trim()
            if(!name || !content){
              alert('姓名或内容不能空')
              return
            }
            //2、根据输入的数据,封装成一个comment对象
            const comment = {
              name,
              content
            }
            //3、添加到comments中
            this.addComment(comment)
            //4、清除输入
            this.name = ''
            this.content = ''
          }
        }
      }
    </script>
    
    <style>
    
    </style>
    
    

    对于这一部分来说,确实有点乱,我自己最开始也很容易迷糊。但是对于这个流程、项目结构有了一个好的理解之后能好很多。

    总结来说:
    首先得设计好html+css,每个部分用div标签包围。根据流程先根据html页面拆分组件,这样才能更好的把结构理清。决定好之后,为每个组件命名,除了根组件外,其他组件可以放在一个统一的文件夹下。

    组件有三部分,templatescriptstyle,分别对应着html、js和css。template里一定要有个根标签,然后script向外默认暴露一个配置对象。

    对于静态部分,我们只要把html和css拆分好,放入每个组件即能完成。对于每个组件之间的联系就要用到import,用到import就要映射组件标签components。如果想传递对象属性或者方法,需要在标签中传递<Add :comments="comments"/>。传递过去后,另一个组件就要接收,用到propsprops一共有三种使用方式:

    props:{ //指定属性名和属性值的类型
          comment: Object
    }
    
    props:{
          addComment:{ //最完整写法:指定属性名/属性值的类型/必要性
             type:Function,
             required: true
          }
    }
    
    props: ['comments']
    

    对于动态就需要我们手动去建一系列东西了,如果是按钮就@click="xxx",再通过methods设置。如果要和组件对象属性统一,依然是v-model

    所涉及到的就下面这些用法:

    <template>
      <div>
        <Add :comments="comments"/>
      </div>
    </template>
    
    <script>
      import Add from './components/Add.vue'
    
      export default {
        props:{ //声明接受属性,这个属性就会成为组件对象的属性
    
        },
        data(){ //组件对象的属性,必须是函数形式
          return{
            comments:[
              {
                name: 'BoB',
                content: 'Vue 还不错'
              },
              {
                name: 'Cat',
                content: 'Vue so Easy'
              }
            ]
          }
        },
        methods:{ //按钮的方法
    
        },
        components:{ //映射组件标签
          Add
        }
      }
    </script>
    
    <style>
    
    </style>
    
    

    当然还有很多其他的具体用法,大家可以去参考Vue的官方文档,毕竟那里有更准确的讲解,还有例子,这里就简单说明。


    组件间通信2:自定义事件

    我们刚才用很大篇幅,知道根组件(父组件)使用prop传递数据给子组件,子组件是不能跟父组件通信的,那如果想要实现这种功能,自定义事件系统就可以完成。

    绑定事件监听

    // 方式一: 通过 v-on 绑定
    @delete_todo="deleteTodo"
    // 方式二: 通过$on()
    this.$refs.xxx.$on('delete_todo', function (todo) {
        this.deleteTodo(todo)
    })
    

    触发事件

    // 触发事件(只能在父组件中接收)
    this.$emit(eventName, data)
    

    注意:

    1. 此方式只用于子组件向父组件发送消息(数据)
    2. 问题: 隔代组件或兄弟组件间通信此种方式不合适

    例:(之后全部没有完整代码,只有使用的演示,不能直接运行…)
    比如在之前的代码里,我们需要父组件传递函数给子组件,现在有了自定义事件,我们就可以避免这种方式了。

    App.vue

    <template>
      <div>
        <header class="site-header jumbotron">
           <div class="container">
             <div class="row">
               <div class="col-xs-12">
                 <h1>请发表对Vue的评论</h1>
               </div>
             </div>
           </div>
        </header>
        <div class="container">
          <!--第一种方式:给Add标签对象绑定addComment事件监听 (常用)-->
          <Add @addComment="addComment"/>
          <!--第二种方式: 
          <Add ref="add"/> 
          -->
          <List :comments="comments"/>
        </div>
      </div>
    </template>
    
    <script>
      import Add from './components/Add.vue'
      import List from './components/List.vue'
    
      export default {
        data(){
          return{
            comments:[
              {
                name: 'BoB',
                content: 'Vue 还不错'
              },
              {
                name: 'Cat',
                content: 'Vue so Easy'
              }
            ]
          }
        },
        //第二种方式
        mounted(){ //执行异步代码
    		//给<Add/>绑定事件监听addComment
    		this.$refs.add.$on('addComment',this.addComment)
    	},
        methods:{
          //添加评论
          addComment(comment){
            this.comments.unshift(comment)
          }
        },
        components: {
          Add,
          List
        }
      }
    </script>
    
    <style>
    
    </style>
    
    

    Add.vue

    <template>
          <div class="col-md-4">
            <form class="form-horizontal">
              <div class="form-group">
                <label>用户名</label>
                <input type="text" class="form-control" placeholder="用户名" v-model="name">
              </div>
              <div class="form-group">
                <label>评论内容</label>
                <textarea class="form-control" rows="6" placeholder="评论内容" v-model="content"></textarea>
              </div>
              <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                  <button type="button" class="btn btn-default pull-right" @click="add">提交</button>
                </div>
              </div>
            </form>
          </div>
    </template>
    
    <script>
      export default {
        data(){
          return{
            name:'',
            content:''
          }
        },
        methods:{
          add(){
            //1、检查输入的合法性
            const name = this.name.trim()
            const content = this.content.trim()
            if(!name || !content){
              alert('姓名或内容不能空')
              return
            }
            //2、根据输入的数据,封装成一个comment对象
            const comment = {
              name,
              content
            }
            //3、添加到comments中 (以前prop时的用法)
            //this.addComment(comment)
            //3、触发自定义事件
    		this.$emit('addComment',comment)
    		
            //4、清除输入
            this.name = ''
            this.content = ''
          }
        }
      }
    </script>
    
    <style>
    
    </style>
    
    

    组件间通信3: 消息订阅与发布(PubSubJS 库)

    想使用这种方式,需要安装:
    npm i --save pubsub-js

    订阅消息
    PubSub.subscribe('msg', function(msg, data){})
    发布消息
    PubSub.publish('msg', data)
    优点:
    此方式可实现任意关系组件间通信(数据)

    App.vue

    <template>
      <div>
        <header class="site-header jumbotron">
           <div class="container">
             <div class="row">
               <div class="col-xs-12">
                 <h1>请发表对Vue的评论</h1>
               </div>
             </div>
           </div>
        </header>
        <div class="container">
          <Add/>
          <List :comments="comments"/>
        </div>
      </div>
    </template>
    <!-- 
    绑定事件监听 就相当于 订阅消息
    触发事件 就相当于 发布消息
    -->
    <script>
      import PubSub from 'pubsub-js' //引入PubSub
      import Add from './components/Add.vue'
      import List from './components/List.vue'
    
      export default {
        data(){
          return{
            comments:[
              {
                name: 'BoB',
                content: 'Vue 还不错'
              },
              {
                name: 'Cat',
                content: 'Vue so Easy'
              }
            ]
          }
        },
        mounted(){
      		// 订阅消息
      		PubSub.subscribe('addComment',(msg,comment) => {
    			this.addComment(comment)
    		})
    	},
        methods:{
          //添加评论
          addComment(comment){
            this.comments.unshift(comment)
          }
        },
        components: {
          Add,
          List
        }
      }
    </script>
    
    <style>
    
    </style>
    
    

    Add.vue

    <template>
          <div class="col-md-4">
            <form class="form-horizontal">
              <div class="form-group">
                <label>用户名</label>
                <input type="text" class="form-control" placeholder="用户名" v-model="name">
              </div>
              <div class="form-group">
                <label>评论内容</label>
                <textarea class="form-control" rows="6" placeholder="评论内容" v-model="content"></textarea>
              </div>
              <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                  <button type="button" class="btn btn-default pull-right" @click="add">提交</button>
                </div>
              </div>
            </form>
          </div>
    </template>
    
    <script>
      import PubSub from 'pubsub-js'
      
      export default {
        data(){
          return{
            name:'',
            content:''
          }
        },
        methods:{
          add(){
            //1、检查输入的合法性
            const name = this.name.trim()
            const content = this.content.trim()
            if(!name || !content){
              alert('姓名或内容不能空')
              return
            }
            //2、根据输入的数据,封装成一个comment对象
            const comment = {
              name,
              content
            }
            //3、添加到comments中 (以前prop时的用法)
            //this.addComment(comment)
            //3、触发自定义事件
    		//this.$emit('addComment',comment)
    		//3、发布消息
    		PubSub.publish('addComment',comment)
    		
            //4、清除输入
            this.name = ''
            this.content = ''
          }
        }
      }
    </script>
    
    <style>
    
    </style>
    
    

    组件间通信4: slot

    此方式用于父组件向子组件传递标签数据

    子组件: Child.vue

    <template>
       <div>
       	<slot name="xxx">不确定的标签结构 1</slot>
       	<div>组件确定的标签结构</div>
       	<slot name="yyy">不确定的标签结构 2</slot>
       </div>
    </template>
    

    父组件: Parent.vue

    <child>
    	<div slot="xxx">xxx 对应的标签结构</div>
    	<div slot="yyy">yyyy 对应的标签结构</div>
    </child>
    

    例:
    TodoFooter.vue

    <template>
      <div class="todo-footer">
        <label>
          <slot name="checkAll"></slot>
        </label>
        <span>
          <slot name="size"></slot>
        </span>
        <slot name="delete"></slot>
      </div>
    </template>
    
    <script>
      export default {
    
      }
    </script>
    
    <style>
    
    </style>
    
    

    App.vue

    <template>
      <div class="todo-container">
        <div class="todo-wrap">
          <TodoFooter>
            <input type="checkbox" v-model="checkAll" slot="checkAll"/>
            <span slot="size">已完成{{completeSize}} / 全部{{todos.length}}</span>
            <button class="btn btn-danger" v-show="completeSize" @click="deleteAllCompleted" slot="delete">清除已完成任务</button>
          </TodoFooter>
        </div>
      </div>
    </template>
    
    <script>
      import TodoFooter from './components/TodoFooter.vue'
    
      export default {
        //忽略。。。。
      }
    </script>
    
    <style>
    
    </style>
    
    

    用了这种方式以后,就相当于子组件用到的所有属性或方法全都需要从子组件移动到父组件中,除了样式。平常肯定不推荐这么使用,它用在什么地方呢?这样设计之后,比如可能会多次用到这个子组件(即:很多类似的组件,就没必要建好多个了,直接用这种模板就行了,只要在父组件中设置好slot,就能使用了),这样一来就能满足重用性。


    展开全文
  • VUE 自定义组件模板

    千次阅读 2019-03-28 17:45:23
    先说下需求吧,因为客户的用户群比较大,如果需求变动,频繁...关于页面展示做的动态可配,我是参考vue的Component组件方式,开始时可能会遇到组件定义后不能加载的情况,并在控制台如下错误:You are using the ru...

    先说下需求吧,因为客户的用户群比较大,如果需求变动,频繁更新版本就需要重新开发和重新发布,影响用户的体验,考虑到这一层就想到,页面展示效果做动态可配,需求更新时,重新配置一份模板录入到数据库,然后根据用户选择的模板进行展示。

    关于页面展示做的动态可配,我是参考vue的Component组件方式,开始时可能会遇到组件定义后不能加载的情况,并在控制台如下错误:You are using the runtime-only build of Vue where the template compiler is not available.......解决办法,如下图文件中添加 'vue$': 'vue/dist/vue.esm.js', 即可,具体原因自行百度吧。

    开始上代码:

    1.最初版本的代码,这个是刚开始的时候测试一些想法
    <template>
        <div >
          <ai-panel :testData="testData"></ai-panel>
        </div>
    </template>
    <script> 
    export default {
    
      data(){
           return {
              testData:{name:"李四"}
            }
        }
        ,components: { // 自定义组件
          aiPanel: { 
            name: 'aiPanel',
            template: '<span>{{testData.name}}</span>',
            props: ['testData']//用作接收父级组件传递的参数 :testData="testData" 即可
            //这里还可以继续定义 子组件的 data,methods等
          }
        }
    }
    </script> 

    通过测试发现一些地方并不能自由的控制,例如后台传过来的html语句并不能很好的放入到子组件的template中,然后又根据vue的api重新优化了一版,如下

    1.首先创建一个工具类 的js文件,js中添加如下代码
    
    import Vue from 'vue'//引入vue
    export function doComponents(opt){
     //opt 调用时传入 可以包含template的html语句,data中需要绑定的数据等
    
      let billItem = opt.billItem      
      let billHtml =opt.billHtml;
      const myComponent = Vue.extend({
        template: billHtml,
        data() {
            return {
                billItem:billItem
            }
        },
        methods: {// 子模板中自定义事件
        }
      })
      // $mount(id)通过查找页面id手动挂载到页面 
      new myComponent().$mount("#testTemplate")
    }
    
    2.页面代码如下
    <template>
        <div>
             <div class="card main-form"> 
    <!-- ai-btn是我自定义的按钮,大佬们可以换成element组件的按钮哈 -->
                 <ai-btn title="查询" icon="el-icon-search" lcss="btn-org"  @onClick="query"/> 
             </div> 
          <div ref="testTemplate" id="testTemplate">
          </div>
        </div>
    </template>
    <script> 
    import * as temp from "@/api/myTemplate";//上面 定义的js文件
    export default {
      data(){
        return {
                billItem:{name:"测试"},
                billHtml:'<div class="org">{{billItem.name}}</div>',
            }
        },
        methods:{
            noResponse(){
              alert("系统升级中,暂时无法提供查询!");
            },
            query: function() { 
                this.$http.post('/billing/qcdr/qryBillInfo').then((res)=> {
                //如果后台接口有数据可以 从res获取后台数据,我这里就直接用页面的测试数据了
                  let option = {
                     "billHtml":this.billHtml,
                     "billItem":this.billItem
                    }
                  temp.doComponents(option);//加载模板
                }, (error)=>{
                  this.$message.error("系统繁忙");
                })
            }
        }
    }
    </script> 

    这样每次查询都可以根据后台的返回的html重新生成页面 这样可以做到只需要搭建一次框架,后期可以根据客户的需求,重新配置模板,将模板中的html保存到数据库,通过指定模板展示,页面查询时,获取对应模板即可展示。

    展开全文
  • Vue嵌套组件创建和销毁的顺序

    千次阅读 2018-11-10 16:10:05
    今天我当然不是来讲生命周期的,我要将的是嵌套组件创建顺序,嵌套组件件钩子函数的执行顺序,最后是销毁顺序。闲话少说,直接上代码。 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt...
  • Vue创建组件详解

    千次阅读 2021-01-30 15:41:16
    Vue创建组件详解
  • 1、创建 注册全局组件 : 任意vue实例均可使用,本质是个自定义标签对,组件可以重复调用; Vue.component(arg1,arg2);...template:模板内容,即组件内部的内容,也是自定义标签对中的内容; ...
  • vue为什么要求组件模板只能有一个元素 这个问题需要从两个方面来说起: 1.new Vue({el:'#app'}) 2.单文件组件中,template下的元素div 一、当我们实例化Vue的时候,填写一个el选项,来指定我们的SPA入口: let vm ...
  • Vue 创建组件的方式

    千次阅读 2018-08-07 11:10:56
    1.1使用Vue.extend来创建全局的Vue组件 var tem1 = Vue.extend({ template:'&amp;amp;amp;lt;h3&amp;amp;amp;gt;这是使用 Vue.extend 创建的组件&amp;amp;amp;lt;/h3&amp;amp;amp;gt;' //指定...
  • 一个有用的快速创建Vue组件库的模板脚手架,使用Storybook构建。 快速开始 git clone https://github.com/senntyou/vue-lib-starter.git --depth=1 cd vue-lib-starter npm install # 安装依赖 npm run storybook # ...
  • vue组件创建和切换

    千次阅读 多人点赞 2020-01-12 13:18:59
    创建组件的方式1 创建组件的方式2 创建组件的方式3 组件中的data和methods 组件切换-方式1 组件切换-方式2 组件切换-切换动画(包含效果演示) 创建组件的方式1 <!DOCTYPE html> <...
  • 1.使用Vue.extend创建全局的Vue组件 //1.1 使用vue.extend创建组件 var com1 = Vue.extend({ //通过template属性指定组件要展示的html结构 template : "使用vue.extend创建的组件</h3>" }) //1.2使用Vue....
  • + Vue.component()函数利用Vue.extend()返回的构造器创建一个组件的实例,有两个参数.; 参数1:组件名字,参数2:组件构造器  注意:  模板template中只能有一个节点  组建的名字采用驼峰命名的话,使用时,就要加上”...
  • Vue.js 创建Vue组件的方式

    千次阅读 2019-02-24 17:10:12
    文章目录定义Vue组件全局组件定义的三种方式定义实例内部私有组件 定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能...
  • <template> <!-- 最外层只能有一个div --> <...-- 组件使用 --> <Images/> </div> </template> <script> // 引入组件 import Images from "../.....
  • vue 生成组件 ue (Gue) Vue js component generator. ...生成Vue组件 ???? Generate test file for the component ????生成组件的测试文件 ⚙️ Dynamic path for component ⚙️组件的动态路...
  • 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,...
  • Vue创建组件的三种方式

    千次阅读 2018-09-03 16:03:54
    方式一:使用Vue.extend来创建全局的Vue组件 1.1 使用Vue.extend来创建组件模板对象 var com1 = Vue.extend({ template:'&lt;h3&gt;这是使用Vue.extend创建的组件&lt;/h3&gt;' //通过template...
  • 最近学习vue,学的我是头昏脑涨,作为一个前端萌新选手,前端大佬无疑是我现在的目标,那么脚踏实地,记录一点一滴,我觉得是我现在有必要做的,前几天公司做大屏,我被echarts搞的要眼瞎,但还好,都挺过来了,前几...
  • 每个组件均具有自身的模板template,根组件模板就是挂载点 每个组件模板只能拥有一个标签 子组件的数据具有作用域,以达到组件的复用 <!DOCTYPE html> <html> <head> <meta charset="utf...
  • Vue单文件组件基础模板

    千次阅读 2018-07-16 16:09:21
    背景 相信大家在使用Vue开发项目时,基本都是以单...因为有这么多优点,所以决定有必要将vue组件的常用配置项提炼出来,形成一个组件模板,方便日后项目开发复用 &lt;template&gt;  &lt;div&g...
  • vue组件创建和注册

    千次阅读 2018-01-22 16:11:16
    基本步骤 Vue.js的组件的使用有3个步骤:创建...Vue.extend()方法创建组件构造器 Vue.component()方法注册组件Vue实例的作用范围内使用组件 html>  body>  div id="app">    my-component>my-component
  • vue2.0-创建单文件组件注册组件以及组件的使用 1、项目效果 2、项目组件演变 项目组件需求,依次演变。 App.vue根组件,对应Components目录专门放置vue文件(组件)。 新增公共的头部信息。 3、...
  • 1.全局组件和局部组件创建 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src=...
  • Vue 创建组件的两种方法

    万次阅读 2017-07-07 10:30:47
    创建组件方法var child=Vue.extend({})var parent=Vue.extend({})Vue.extend() 全局方法 生成构造器,创建子类使用基础 Vue 构造器,创建一个“子类”。这样写非常繁琐。于是vue进行了简化使用Vue.component()直接...
  • 第一种方法,创建全局的vue组件 var coml = Vue.extend({ // 通过template 属性指定组件要展示的结构 template:'<a><h1>这是使用 Vue.extend 创建的组件</h1></a>' }) 如果使用 Vue....
  • 组件的出现 拆分了Vue实例的代码量 能够以不同的组件来划分不同的功能模块 需要什么样的功能 调用对应的组件即可 组件化和模块化的区别: 模块化: 从代码逻辑的角度进行划分的 方便了代码的分层开发 保证了每个...
  • Vue教程(组件-创建方式)

    千次阅读 多人点赞 2019-07-24 14:03:34
      本文我们开始来介绍下Vue中的组件,...Vue组件   基础页面如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device...
  • 用于将单个文件组件(.vue)编译为独立JS文件以在浏览器中使用的构建设置的模板模板对于将VueJS单个文件组件(SFC)编译为独立的JS文件以在浏览器中使用非常有用。 这对于希望创建一个可以在网站上使用而无需...
  • Vue compoment 动态组件 切换模板

    千次阅读 2018-09-29 14:58:52
    2: v-once 可以实现和 compoment同样的效果,他是将组件在第一次创建的时候,放在内存中 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset=...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 41,488
精华内容 16,595
关键字:

vue根组件创建模板

vue 订阅