Vue笔记(一)

最新推荐文章于 2025-12-31 14:00:00 发布

原创最新推荐文章于 2025-12-31 14:00:00 发布 · 457 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

vue-js 专栏收录该内容

8 篇文章

订阅专栏

CDN库http://www.bootcdn.cn/

<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>

还可以下载源代码，用本地文件导入Vue.min.js

<script src="vue-dev/dist/vue.min.js"></script>

Vue.js使用了基于HTML的模板语法

文本插值，最常见的形式就是{{code}}

<div id="app">
    <p>{{code}}</p>
</div>
<script type="text/javascript">
    var app=new Vue({
    el:"#app",
    data{
        code:"hello,vue!"
        }
    })
</script>

v-html可以输出html代码类似innerHTML

<div id="app">
    <div v-html="message"></div>
</div>
<script type="text/javascript">
    var app=new Vue({
    el:"#app",
    data:{
    message:"<h1>Hello,vue</h1>"
    }
    })
</script>

v-bind可以改变HTML属性中的值

//类名为background
<div id="app">
    <div v-bind:class="{background:isActive}">666</div>
</div>
<script type="text/javascript">
    var app=new Vue({
    el:"#app",
    data:{
    isActive:true
}
})
</script>

Vue.js提供了的Js表达式支持

<div id="app">
{{"博"+"主"}}
{{AmIHandsome?"is":"is not"}}
{{message.split("").reverse().join("")}}
</div>
<script type="text/javascript">
    var app=new Vue({
    el:"#app",
    data:{
    AmIHandsome:true,
    message:"emosdnah"
}
})
</script>

v-if是vue的条件判断语句，通过判断v-if的值是否为true来决定是否插入这个元素，还可以
让<template></template> 中的内容显示，v-show也可以显示但是不支持template语法

<div id="app">
    <p v-if="seen">博主的帅气蒙蔽了你们的双眼</p>
    <section v-if="ok">
        <h1>看不见代表被蒙蔽了双眼</h1>
        <p>看见了表示你们赞同了博主的帅气</p>
    </section>
</div> 
<script>
    var app=new Vue({
    el:"#app",
    data:{
        seen:true,
        ok:true
    }
})
</script>

当然有v-if，肯定还有v-else

<div id="app">
    <div v-if="false">
        Wow~
    </div>
    <div v-else>
        Hey man~
    </div>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            false:false
    }
})
</script>

vue 2.1以上的版本都有v-else-if

<div id="app">
    <div v-if="author==='ugly'">ugly</div>
    <div v-else-if="author==='handsome'">handsome</div>
    <div v-else-if="author==='beautiful'">beauty</div>
    <div v-else>Just so so</div>
</div>
<script>
    var app=new Vue({
    el:"#app",
    data:{
        author:"handsome"
}
})
</script>

有了选择，肯定还有循环吧，v-for语句是 items in arr形式的特殊语法，类似 li in ul

//输出1-12
<div id="app">
    <p v-for="n in 12">{{n}}</p>
</div>
<script>
    var app=new Vue({
        el:"#app"
})
</script>
//渲染一个列表
<div id="app">
    <ul>
        <li v-for="items in arr">
            {{items.text}}
        </li>
    </ul>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
        arr:[
        {text:"我是1"},
        {text:"我是2"},
        {text:"我是3"}
        ]
    }
})
//结果会ul里有3个li,而不是ul下的li中有3个li
</script>

v-for还可以用来迭代对象

<div id="app">
    <ul>
        <li v-for="(value,key,idnex) in object">
            {{index}}-{{key}}:{{value}}
        </li>
    </ul>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            object:{
                name:"jack",
                age:21
            }
        }
})
</script>
//0-name:jack
//1-age:21