VUE之 vue项目

#知识认识

NPM的初始化

NPM的使用

项目依赖与开发依赖

组件

插件与组件

uve的安装：

# 全局安装 vue-cli
$ npm install --global vue-cli

官方文档

vue的项目创建

创建简单模板

执行 npm run dev 与 npm run build的区别

在命令行中输入 npm run dev 运行开发环境

在App中的抛出操作

组件的基本样式

组件的命名：第一个字母必须大写（为了和html标签能够区分开来）

组件中引入图片的方式

在第二个模块中的style中使用注入

Markdown的使用

marked.VUE中写的代码

<template>
  <div class="mark">
      <div class="markdown">
        <textarea style="height: 90px;width: 90px;"  v-model="msg" >
        </textarea>
      </div>
    <!--在显示行中调用这个方法将用户在textarea中输入的内容捕获并用marked处理的结果显示-->
    <div class="box" >{{currentMarked}}</div>
  </div>
</template>

<script>
//  <!--导入Marked模块 第三方pip方式安装的模块用此种方式导入-->
import Marked from 'marked'
  export default{
    name:'mark',
    data(){
      return {
        msg:''
      }
    },
    methods:{

    },
    computed:{
//      将内容写在computed中，能够实时的监控msg的变化
      currentMarked(){
//        返回用Marked方法处理后的数据
        return Marked(this.msg)
      }
    },
    components:{},
  }
</script>
<!--这是注入让只是这个页面的内容引入此特性-->
<style scoped>
  .markdown,.box{
    width:100px;
    height:100px;
    border: 1px solid yellowgreen;
    box-sizing: border-box;
  }
</style>

配置完成之后显示的效果

想要让他显示渲染后的效果这里就用到了V-Html方法例子如下

实际代码

<template>
  <div class="mark">
      <div class="markdown">
        <textarea style="height: 90px;width: 90px;"  v-model="msg" >
        </textarea>
      </div>
    <!--在显示行中调用这个方法将用户在textarea中输入的内容捕获并用marked处理的结果显示-->
    <div class="box" v-html="currentMarked"></div>
  </div>
</template>

<script>
//  <!--导入Marked模块 第三方pip方式安装的模块用此种方式导入-->
import Marked from 'marked'
  export default{
    name:'mark',
    data(){
      return {
        msg:''
      }
    },
    methods:{

    },
    computed:{
//      将内容写在computed中，能够实时的监控msg的变化
      currentMarked(){
//        返回用Marked方法处理后的数据
        return Marked(this.msg)
      }
    },
    components:{},
  }
</script>
<!--这是注入让只是这个页面的内容引入此特性-->
<style scoped>
  .markdown,.box{
    width:100px;
    height:100px;
    border: 1px solid yellowgreen;
    box-sizing: border-box;
  }
</style>

VUE中的代码

<!-- 组件都是.vue的文件  -->
<!-- 写我们页面的结构 -->


<!-- vue的核心思想：数据驱动视图   双向数据绑定 -->
<template> 
  <!-- html -->
  <div id="app1">
    <h3>{{msg}}</h3>
  

    <!-- 3.插入子组件   因为是自定义的标签，可以在里边添加好多属性 -->
    <Vheader :hfavs = 'getAllDatas' @addHandler='add'></Vheader>
    <!---->
    <Vmarked></Vmarked>


    <!-- 1.如何从父组件传递数据到子组件，使用vue提供的一个属性props,props一定要验证自定义的属性
        2.子组件往父组件传值，使用自定义事件,使用$emit()触发自定义的函数


        组件通信

      工作流程
      创建项目的流程 必须记住 


      父子组件关联:  components

      1.先创建，再引入
      2.挂载
      3.使用

      父子组件通信：单向数据流 vue核心的思想：1.数据双向绑定  2.数据驱动视图

      设计模式：MVVM
      父传子： 使用props,必须要验证
      子传父：先得自定义事件，使用this.$emit()触发这个自定义事件



      同级组件之间的传值？？？？？ vue-router vuex
      
      vuex+vue+vue-router  vue全家桶

       M V VM  


     -->


  </div>


  <!-- <div></div> -->

</template>

<!-- 处理我们页面的业务逻辑 -->
<script>
  // js

  // 1.导入子组件
import Vheader from './Vheader'

import Vmarked from './Vmarked'



  export default {
    name:"App",
    data:function(){
      return {
        msg:'今天学习组件',
        favs:['抽烟',"喝酒","烫头"]
      }
    },
    methods:{
      add(a){
        // alert(a)

        this.favs.push(a)

      }

    },
    computed:{

      getAllDatas(){
        console.log(111)
        return this.favs
      }

    },

    // 2.父组件插入子组件  挂载子组件 把子组件挂载到父组件中
    components:{
      Vheader:Vheader,
      Vmarked

    }


  }
  
</script>

<!-- 样式 -->
<style scoped>
  /*css*/
  h3{
    color: red;
  }
</style>

Vheader中的代码创建子组件

<template>
    <div class="vheader">
        <h3>哈哈哈</h3>
        <img :src="url">
        <ul>
            <li v-for = "(item,index) in hfavs">
                {{item}}
            </li>
        </ul>

        <button @click='addOneFav'>添加</button>
    </div>
</template>
<script>
    import url from './assets/logo.png'
    export default{
        name:'vheader',
        data(){
            return{
                url:url
            }
        },
        props:{
            // 一定要验证 验证数据属性的类型
            hfavs:Array
        },
        methods:{
            addOneFav(){
                // $emit 使用$emit()方法来触发自定义事件
                // 第一个参数 是自定义的函数名
                this.$emit('addHandler',12323);


                // this.hfavs.push('泡妹')
            }
        }
    }
</script>
<!-- 注入 -->
<style scoped>
h3{
    color: yellow;
}
    
</style>

Vmarked中的代码

<!-- 页面的结构 -->
<template>
    <div class="mark">

        <div class="markdown">
            <textarea v-model='msg'>
                
            </textarea>
        </div>
        <div class="box" v-html='currentMarked'></div>
        
    </div>
    
</template>
<!-- 页面的业务逻辑 -->
<script>
import Marked from 'marked'
console.log(Marked)
    export default{
        name:'mark',
        data(){
            return {
                msg:''
            }
        },
        methods:{

        },
        computed:{
            currentMarked(){
                console.log(Marked(this.msg))
                // 默认只有getter
                return Marked(this.msg)
            }

        },
        components:{

        }

    }
    
</script>
<!-- 样式 -->
<style scoped>
.markdown,.box{
    width: 50%;
    height: 300px;
    border:1px solid gray;
    float: left;
    box-sizing: border-box;
}
textarea{
    width:100%;
    height: 100%;
    border:none;

}
    
</style>