Vue.md

最新推荐文章于 2024-04-22 10:56:08 发布
最新推荐文章于 2024-04-22 10:56:08 发布
阅读量841 收藏 13
点赞数 5
分类专栏： Vue 文章标签： Vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41281571/article/details/82834508
版权

v-for:循环

var app=new Vue({
    el:'#app',
    data:{
      foodList:[
          {
              name:"葱",
              price:5
          },
          {
              name:"姜",
              price:5
          },
          {
              name:"蒜",
              price:4.5
          }
      ]
    }
})


<div id="app">
  <ul>
      <li v-for="food in foodList">{{food.name}} ￥{{food.price}}</li>
  </ul>
</div>

v-bind:为属性绑定值

    <style type="text/css">
        .active{
            background: #a10;
        }
    </style>
</head>
<body>
<div id="app">
    <a :class="{active:isActive}"  :href="url">点我</a>
    :表示加上了v-bind属性，相当于v-bind:class=""
    这里的{{active:isActive}}表示当vue.js中的isActive为真的时候，会给a标签加上active属性，要是不为真就不加该属性。
</div>

v-on:事件

var app = new Vue({
    el: '#app',
    data: {
        url: "http://www.baidu.com",
        isActive:true
    },
    methods:{
        onClick:function(){
            console.log("显示哈哈哈");
            return false;
        },//点击操作
        onEnter:function(){
            console.log("on Enter");
            return false;
        },//鼠标移入
        onLeave:function(){
            console.log("on Leave");
            return false;
        }//鼠标移出
         onSubmit:function(){
            console.log('Submit');
        }//表单提交
    }

})

<div id="app">
    <a v-on:click="onClick" v-on="{mouseenter:onEnter,mouseleave:onLeave}">点我</a>
    v-on表示绑定事件：前一个用冒号表示一个一个事件的绑定，这里的意思是当点击的时候(click事件)，触发onClick事件，这个事件写在methods:{}里面。后面一次性绑定多个事件，用等号相连(因为等号后面会自动填上"")，然后在冒号里面以json数据格式 键为事件，值为绑定的操作
    
     <form v-on:submit.prevent="onSubmit" v-on:keyup.enter="onEnter"> 
     这里表示当表达那提交的时候，绑定为自定义的onSubmit事件，里面的.prevent是用来阻止表单提交数据，类似于return false,使他失去原有的功能
     
     v-on:keyup.enter="onEnter"，表示当在输入框按下Enter键的时候（.Enter）
        <input type="text">
        <button type="submit">提交</button>
    </form>
</div>

v-bind:可以用冒号代替
v-on:可以用@来代替 v-on:click="onClick"  => @click="onClick"

v-model:

<input v-model.trim="name"> //表示去掉前后空格 <pre>标签显示完整数据内容，有多少空格都会显示出来，原生的html只保留一个空格

v-model.lazy="name" //当光标离开输入框才会显示改变，不再实时改变
v-model.number="price"//把输入的值转换成数字类型
v-model在表单中的使用，把js的数据与前台表单数据结合，同步
var app = new Vue({
    el: '#app',
    data: {
        sex: null,
        fruit:[],
        article:"ajjajajajaj",
        from:1, //单选，不用数组
        dest:[]//多选用数组
    },

})

<div id="app">
    <label >
        男
        <input  v-model="sex" value="男" type="radio">
    </label>
    <label >
        女
        <input v-model="sex" value="女" type="radio" >
    </label>
    <pre>{{sex}}</pre>
    <!--===================-->
    <label >
        苹果
        <input  v-model="fruit" value="苹果" type="checkbox">
    </label>
    <label >
        香蕉
        <input v-model="fruit" value="香蕉" type="checkbox" >
    </label>
    <pre>{{fruit}}</pre>
    <!--=======================-->
    <textarea v-model="article"></textarea>
    <pre>{{article}}</pre>
    <!--==========================-->
    <div>你来自哪里？</div>//单选
    <select v-model="from">
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">广州</option>
        <option value="4">深圳</option>
    </select>
    <pre>{{from}}</pre>
    <!--++++++++++++++++++++++++-->
    <div>你来自哪里？</div>//多选
    <select v-model="dest" multiple>
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">广州</option>
        <option value="4">深圳</option>
    </select>
    <pre>{{dest}}</pre>
</div>

1537621933282

v-model计算学生总分平均分，可动态改变
var app = new Vue({
    el: '#app',
    data: {
        // sex: null,
        // fruit:[],
        // article:"ajjajajajaj",
        // from:1, //单选，不用数组
        // dest:[],//多选用数组\
        // rule:'hr'
        china:60,
        math:90,
        english:80
    },
    computed:{ //计算属性
        sum:function(){
            return parseFloat(this.china)+parseFloat(this.math)+parseFloat(this.english);
        },
        average:function(){
            return Math.round(this.sum/3);
        }
    }

})

<div id="app">
    <table border="1px">
        <thead>
        <th>学科</th>
        <th>分数</th>
        </thead>
        <tbody>
        <tr>
            <td>语文</td>
            <td><input type="text" v-model="china"></td>
        </tr>
        <tr>
            <td>数学</td>
            <td><input type="text" v-model="math"></td>
        </tr>
        <tr>
            <td>英语</td>
            <td><input type="text" v-model="english"></td>
        </tr>
        <tr>
            <td>总分</td>
            <td>{{sum}}</td>
        </tr>
        <tr>
            <td>平均分</td>
            <td>{{average}}</td>
        </tr>
        </tbody>
    </table>
</div>

1537624371998

组件component

感觉就是自定义一个标签，表面看上去就是一个标签，实际上内部可以设定一大堆的方法啊，效果啊。分为全局组件（定义以后任何域里面都可以使用），局部组件（只有在特定的域里面起效果）

//定义一个组件alert，在前台页面上只要写上<alert></alert>就可以使用给组件里的功能了
Vue.component('alert',{
    //template模板，表示这个自定义的alert标签在浏览器里实际的东西
    //这里表示自定义的alert标签实际上是个button，然后自己有事件绑定on_Click，可视化的内容，用来给用户看的
    template:'<button @click="on_Click">谈谈</button>',
    //下面是对绑定的on_Click事件的定义
    methods:{
        on_Click:function(){
            alert('Yo');
        }
    }
});
//上面只是把模板设置好了，但是这个模板要有个域，来实现自己的功能
//不然这个component也不知道自己要去哪儿
//下面就是要给这个alert定义一个域，感觉Vue要放在一个域里面，才会有效果
//不然浏览器就不知道这个东西要用Vue来解析
//自定义组件要在域里面才能存活，要是放在一个没用定义的域里面就没有效果
new Vue({
    //定义一个域，为id=app的dom标签里面
    el:"#app",
})

//定时上面的自定义的组件是在任何域里面都可以用
//类似全局变量了，但是有时候我们想要只在某个特殊的域里面使用
//这就要用到局部组件定义了
new Vue({
    el:'#app2',
    //注意这里的component要加s表示复数，可能有多个
    components:{
        'peo':{
            template:'<button @click="on_Click">点我</button>',
            methods:{
                on_Click:function(){
                    alert('haha');
                }
            }
        }
    }
})
组件component的点赞实例（用户点一下赞的数目加一，再点一下，就取消点赞）
//定义一个全局组件like
Vue.component('like',{
    //在前台页面上显示给用户看的是一个button标签
    //当被点击的时候，调用方法toggle_like()
    //当当前用户组件的liked值为true时，便给这个button标签绑定上liked类
    //就是相当于加了个样式，让用户知道已经点过赞的
    //点过赞就给按钮加上样式，没点赞就给按钮删除这个样式

    //这个组件的template属性（显示给用户看的），可以写在前台html中
    //然后通过id调用到template的值里面
    // template:'#like_component_tpl',
//    <template id="like_component_tpl">
//     <button :class="{liked:liked}" @click="toggle_like()">? {{like_count}}</button>
//    </template>

    template:'<button :class="{liked:liked}" @click="toggle_like()">? {{like_count}}</button>',
    
    //因为要记录点赞数，所以要用data把点赞数存下来
    //但是这里的data和Vue实例里面的单纯的记录变量的data不一样
    //因为一个组件可能被多个域来实例化
    //这里要是一个函数，返回数据每个实例的本身的点赞数
    data:function(){
        //renturn 一个对象
        return {
            like_count:10,
            //判断用户是否已经点过赞了
            liked:false,
        }
    },
    methods:{
        toggle_like:function(){
            //因为用户不能一直点赞加赞数，所以在加赞数之前
            //要进行判断，判断该用户是否已经点过了
            if(!this.liked){
                this.like_count++;
            }else{
                this.like_count--;
            }
            this.liked=!this.liked;
        }
    }
})
new Vue({
    //定义一个域名为id='app'的范围中
    el:'#app'
})
组件传递参数（外部往里面传参数 父->子）
//前台的alert标签的msg属性是什么值，我就弹窗显示什么值

//js文件
Vue.component('alert', {
    template: '<button @click="on_Click()">点我</button>',
    //这个属性可以用来接收到前台的自定义alert标签的msg属性的值
    props: ['msg'],
    methods: {
        on_Click:function(){
            alert(this.msg);
        }
    }
})
new Vue({
    el:'#app',
})

//前台文件代码
<div id="app">
    <alert msg="哈哈"></alert>
</div>

//根据用户信息自动的生成不同的 @用户 的链接

Vue.component('user',{
    //注意这里最里面的单引号和外面的单引号冲突了，可以用转义\，避免冲突
    //也可以用` (Esc下面的键)来表示引号
    template:'<a :href="\'/user/\'+username">@{{username}}</a>',
    props:['username']
})

<div id="app">
    <user username="hh"></user>
</div>
子父通信（显示余额）
//定义父组件 balance，当子组件的show按钮被点击的时候
//会触发show-balance自定义事件，在这个过程中也可以传值
//父组件监听show-balance事件，当事件被触发的时候，调用自生的函数show0balance
//这个函数会把自生的data数据里的show给改为true,
//这样再div v-if="show"中就能显示具体的余额了
Vue.component('balance', {
    template: `
    <div>
    <!--再这里监听子元素的触发事件-->
    <!--这里表示当监听到触发事件后，就调用show_balance放法-->
    <show @show-balance="show_balance"></show>
	<!--如果组件里的show的值为true，就显示文字-->
    <div v-if="show">
    您的余额为：99员；
    </div>
</div>
    `,
    methods:{
        //这里还可以使用触发事件的参数
        show_balance: function(data){
            this.show=true;
            console.log(data);
        }
    },
    data: function () {
        return {
            show:false,
        }

    }


})
;
Vue.component('show', {
    template: '<button @click="on_Click">显示余额</button>',
    methods: {
        on_Click: function () {
            //这个this.$emit表示手动触发show-balance事件
            //就像点击事件，，鼠标划入事件一样的事件
            //最骚的是，后头还可以传递数据进去
            this.$emit('show-balance', {a:1,b:2});
        }
    }
    });



<div id="app">
    <balance></balance>
</div>
同级之间通信（利用一个额外的调度器，其实也就是个Vue对象）
用这个额外的调度器，在其中一个组件中注册一个事件（把要传递的参数放入其中），再另一个组件中监听这个事件，取出这个事件中的传递的参数
下面就是 huahua组件 和 shuandan组件的通信，huahua说什么，suandan就要显示出来

//注册事件调度器
var Even=new Vue();
//huahua组件，负责接收输入消息
Vue.component('huahua',{
    template:'<div>花花说：<input v-model="huahua_said" @keyup="on_change"></div>',
    data:function(){
        return {
            huahua_said:'',
        }
    },
    methods:{
        on_change:function(){
            //事件调度器触发一个事件
            Even.$emit('huahua_said',this.huahua_said);
        }
    }
})
//shuandan组件，负责输出消息
Vue.component('shuandan',{
    template:'<div>栓蛋听到{{huahua_said}}</div>',
    data:function(){
        return {
            huahua_said:'',
        }
    },
    //mounted表示组件刚刚被创建的时候，
    //这里表示事件刚被创建的时候，就调用Even事件调度器监听自己的触发事件
    mounted:function(){
        //先把shuandan这个对象保存到me变量里面
        var me=this;
        //监听自己的huahua_said事件，并调用回调函数把事件传过来的数据
        //给更新到shuandan组件的huahua_said变量里面
        Even.$on('huahua_said',function(data){
            me.huahua_said=data;
        })
    }

})

Vue.filter过滤器

用于把数据进行一定的加工，比方说加个单位呀，之类的东西
例子：我现在要把货物的price后面都统一加上单位‘元’
//这里表示把price作为参数传递到currency函数里面，最后页面上的显示值为函数的返回值
{{price|currency}} 

Vue.filter('currency',function(price){
    return price+'元';
})
new Vue({
    el: '#app',
    data:{
        price:10,
    }
})

<div id="app">
    <span>书本的价格是<h2>{{price|currency}}</h2></span>
</div>

自定义指令

vue内置的指令有v-model,v-blind等，但是可以自定义指令，来实现某种特定的功能。

例子：自定义一个pin指令，用来给div加上position="fixed"效果


Vue.directive('pin',function(el,binding){
    //el表示使用了这个指令的元素，这里为class="card"的div
    //binding表示这个指令的值
    var pinned=binding.value;
    if(pinned){//当前台传入的数据为真时，给div加上固定效果
        el.style.position='fixed';
        el.style.top='10px';
        el.style.left='10px';
    }else{//当指令传入的值为假时，取消div的固定效果
        el.style.position='static'
    }

})
new Vue({
    el:'#app',
    data:{//域中的属性与其属性值
        card1:{
            pinned:false,
        },
        card2:{
            pinned:false
        }
    }
});

<div id="app">
    <div class="card" v-pin="card1.pinned">
    
    在这里当点击按钮时，会触法@click，就会把card1.pinned变为相反的结果然后自定义指令中把card1.pinned
    的值传入js中，根据这个值进行判断，当其为真的时候，把这个div加上position='fixed'的style，实现固定效果。再次点击，card1.pinne的值再次取反，此时后台会把div去掉fixed效果，实现取消固定。
    
    
        <button @click="card1.pinned=!card1.pinned">固定</button>
        用于把数据进行一定的加工，比方说加个单位呀，之类的东西
        例子：我现在要把货物的price后面都统一加上单位‘元’
    </div>
    <div class="card" v-pin="card2.pinned">
        用于把数据进行一定的加工，比方说加个单位呀，之类的东西
        例子：我现在要把货物的price后面都统一加上单位‘元’
    </div>
</div>
自定义指令的传参（1.传参，2.传修饰符）
自定义指令
1.传递修饰符，用binding.modifiers获取，用v-pin.{修饰符}来传递
其实就是在v-pin后面加上.{参数}来表示要传过去的修饰符，然后用binding.modifiers获取一组修饰符对象数组。
eg:v-pin.buttom.left，就表示传了button和left两个参数过去，然后
   在Vue.directive('pin',function(el,binding)){}中还是利用binding	  来获取数据  var position=binding.modifiers;这时候的position就等    于{buttom:true,left:true}的对象

2.传递参数，用binding.arg获取，格式为v-pin:{参数}

要先传参数，再传修饰符:v-pin:{参数arg}.{修饰符modifiers}

组件 mixins

当定义多个组件的时候，可能会有些公用的methods、data等数据，比方说隐藏和显示功能，此时就可以用到组件里面的mixins属性。把公共的部分引用过来
但是再组件里重新定义的比方说data会把公共部分内的给覆盖掉，权限较高，类似于公共css和标签style的关系

mixins:[base]

//公共部分base
var base = {
	//公共data数据
    data: function () {
        return {
            visibled: false,
        }
    },
    //公共methods方法
    methods: {
        toggle: function () {
            this.visibled = !this.visibled;
        },
        show: function () {
            this.visibled = true;
        },
        hide: function () {
            this.visibled = false;
        }
    }
}

//两个自定义组件
Vue.component('tooltip', {
    template: `
    <div>
    <button @click="toggle">Tooltip</button>
    <div v-if="visibled">
    <span @click="hide">X</span>
    <h2>中秋节</h2>
    <p>中秋节快乐！！</p>
</div>
</div>
    `,
    //引入公共部分
    mixins: [base],

})
Vue.component('popup', {
    template: `
    <div>
    <button @mouseenter="show" @mouseleave="hide">Tooltip</button>
    <div v-if="visibled">
    <h2>中秋节</h2>
    <p>中秋节快乐！！</p>
</div>
</div>
    `,
    //引入公共部分
    mixins: [base],

})
new Vue({
    el: "#app"
})

插槽slot

感觉超级像tp模板的{block}{/blobk}
应用场景：当一个Vue.component自定义组件的template属性的属性值为前台的代码时，由于实际的内容会重用，所以要在里面加上<slot></slot>标签来表示这个内容自定义组件里面是可以重写的。同时，根据slot标签里面的name属性，可以指定重写那个slot，简直和{block name=""}{/block}一模一样有没有？

<div id="app">
    <pan>
    //这里用div 的slot属性表示要替换的内容
       <div slot="inner">
           inereere
       </div>
    </pan>
</div>
<template id="pan">
    <div class="content">
        <div class="title">
        title
        </div>
        <slot name="inner">
            <div class="inner">
                inner
            </div>
        </slot>
        <div class="footer">
            footer
        </div>
    </div>
</template>
江judge
关注
  • 5
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在vue中解析md文档并显示
一个懒惰前端的博客
07-17 3183
在vue中解析md文档并显示
（方法）vue 中展示、读取.md 文件（批量引入、自定义代码块高亮样式）
次顶级的博客
11-29 7295
vue中读取、显示.md文件，单独及批量动态显示组件
vue3引入md文件
最新发布
Hero_rong的博客
04-22 584
vue3中使用 vite-plugin-md解析 md 文档并展示，因为项目是通过vite构建的，所以我们使用vite-plugin-md解析
vue.md
qq_36533879的博客
03-09 756
(个人记录) 必要 命名 组件名必写 组件名为多个单词 组件名为大驼峰 export default { name: 'TodoItem', // ... } 组件数据 data必须是函数 export default { data () { return { foo: 'bar' } } } Prop定义 尽可能详细，写出类型和默认值 props: { status: { type: String, default: 's.
【vue】vue2.x项目中使用md文件
zhangankang的博客
02-26 2650
Vue2.0项目展示md文件的三种方式
Vue引入Md文档
2026的博客
11-01 1472
md文档显示
vue.md hhh复习资料
04-08
vue.md hhh复习资料
关于vue中v-bind后不带冒号，而带等号的说明(v-bind=“obj“)
weixin_42920104的博客
09-06 1350
关于vue中v-bind后不带冒号，而带等号的说明(v-bind=“obj”) 由于v-bind支持v-bind="obj"的用法（其中obj为一个对象，譬如obj = {class: class1, style: style1}），若你传入的obj为一个数组，比如为obj = ['a', 'b', 'c']，那么obj会将其解析为{'0': 'a', '1': 'b', '2': 'c'} 注意：若v-bind用在slot标签中，即子组件Child.vue中模板里包含<slot v-bind="
VUE在线预览展示md文件
honghongzZ的博客
01-04 1405
最近项目需要做一个能在线预览docx,pdf,md,MP4等文件,其中md文件通过调研发现使用markdown-it-vue组件挺好用的
Vue整合markdown(MD)编辑器
Smile_CET4的博客
01-04 2053
Markdown编辑器是一种用于编辑和编写Markdown语言格式的工具。Markdown是一种轻量级标记语言，设计用来简化纯文本的写作和排版，让用户专注于内容本身而不是格式。对于程序员、写作者和学生等，Markdown编辑器是一个方便的工具，用于编写技术文档、笔记和博客。Markdown文本可以轻松转换为HTML、PDF、Word等其他格式，便于在不同平台和场景下使用。Markdown语法简单易懂，使用简单的符号和标记可以实现文本的排版，包括标题、列表、链接、图片等。
vue3使用v-md-editor预览markdown内容
weixin_60886885的博客
06-01 4067
vue3使用v-md-editor预览markdown内容
vue展示.md文件
shidouyu的专栏
10-08 939
将md文件作为组件导入，注意：class的值必须包含 markdown-body ，否则样式无法生效！链接：https://www.jianshu.com/p/a84f8ddf0b04。需求：在vue项目中导入并展示markdown文件（使用的vue-cli3）安装 vue-loader 、vue-template-compiler。安装 github-markdown-css、highlight.js。在vue.config.js中配置webpack。安装 vue-markdown-loader。
vue3 v-md-editor markdown编辑器（VMdEditor）和预览组件（VMdPreview ）的使用
m0_63622279的博客
10-17 5693
v-md-editor 是基于 Vue 开发的 markdown 编辑器组件轻量版编辑器轻量版编辑器左侧编辑区域使用 textarea 实现。优点：足够轻量缺点：不支持更为丰富的编辑区功能扩展。例如：无法根据不同的语法在输入框内显示不同的样式。进阶版编辑器进阶版编辑器左侧编辑区域使用 CodeMirror (opens new window)实现。优点：可以根据 CodeMirror 提供的 Api 来自定义扩展编辑区域功能，提高编辑体验。缺点：文件体积远大于轻量版预览组件。
Vue中读取md文件
侯阮悦的博客
07-13 4065
在Vue中读取本地的md文件。 第一步：在Vue项目中安装依赖 cnpm i markdown-loader html-loader --save 第二步：打开build/webpack.base.config.js，在module下的rules中配置，配置成功后需要重启项目。 { test: /\.md$/, use: [ { loader: 'html-loader'}, { loader: 'markdow
vue 导入.md文件（markdown转HTML）
fhw10204130的专栏
12-31 4220
前言 　　刚接到这个需求的时候，觉得很简单（的确很简单）但是这玩意的坑真的也让人无奈。 　　网上找了很多的资料，都没有写出痛点（这就很难过了）。通过实践并且在我们项目中平稳运行，想分享给后面的人 　　我的博客上也写了100多篇文章，点击量有上万的也有个位数的，能够帮助到他人这就是写作记录的动力。 需求 　　vue项目中可以良好展示markdown（只是展示功能 没有编辑功能） 痛点问题 .md文件类型，直接模块加载（只有字符串，这得多难受，怎么维护呢），还是一个文件一个文件的好维护并且好修改复
Vue 展示.md文件
林中明月间丶
05-22 466
（若是直接安装vue-loader最新版会提示升级vue和vue-compiler,但是升级后的vue没有和vue-template-compiler匹配的版本，所以我选择降低vue-loader版本）npm vue-template-compiler -D (若是已经有则不需要安装，不然有可能和现有的vue版本不匹配从而报错)vue-loader版本过高会不兼容，经过测试安装14.2.2版本可以使用。vue-template-compiler需要和vue的版本一致。1.下载所需package。
vue实现markdown编辑器以及md文件转化成html
linovce的博客
03-14 4821
我们在制作个人的博客系统或类似的项目时，写博客以及将写好的博客展示出来便是绕不开的基本功能，好在目前已有相关的开源插件给开发者使用。本文将总结mavon-editor插件和marked插件的使用方法，通过vue实现markdown编辑器，以及将markdown文件转换成对应的html，并自定义CSS。
vue中README.md
06-12
在 Vue.js 项目中，README.md 文件是用来描述项目的重要信息和使用方法的。它是一个 Markdown 格式的文本文件，可以包含项目的介绍、功能特性、安装方法、使用方法、贡献指南等内容。在 Vue.js 项目中，我们可以使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值