Vue.js框架的基础指令

anlou1537

墨衍会员 · AI 创作全网分发码龄11年

关注

转载最新推荐文章于 2026-05-27 17:10:42 发布 236 阅读 AI 写同款· GEO 优化 ›

Vue.js

渐进式 javascript 框架,可以独立完成前后端分离式web项目的javascript框架

js是页面脚本语言,用来控制或是辅助页面搭建,vue是js功能的集合体.

三大主流前端框架之一:angular React vue;

可以完全脱离服务器端，以前端代码复用的方式渲染整个页面：组件化开发

可以控制一个页面中的一个标签
可以控制一个页面
可以控制整个项目

Vue的优点

1、三大前台框架：Angular React Vue
    vue：综合前两个框架的优点(轻量级)、一手文档是中文(上手快)、vue完全开源(免费)
2、单页面web应用 - 服务于移动端 - 客户端只需要问后台索要数据
3、MVVM设计模式
4、数据驱动 - 区别于DOM驱动(DOM加载后才能操作) - 在缓存中根据数据处理dom，再渲染给真实dom
5、虚拟dom - 页面的缓存机制
6、数据的双向绑定 - 页面中变量相同，数据就相同，实时被检测

Vue的引入

开发版本：vue.js(使用这个)
生产版本：vue.min.js

<div id="app">
    {{ }}
</div>
<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: '#app'
    })
</script>

挂载点

vue实例(对象)通过挂载点与页面建立关联
挂载点只遍历第一个匹配的结果
html与body标签不可以作为挂载点
挂载点的只一般就采用id选择器(唯一性)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue导入</title>
    <style>
        h1 {
            color: red;
        }
        h2 {
            color: pink;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <h1>{{ }}</h1>
            <h2>{{ }}</h2>
        </div>
        <div>
            <h1>{{ }}</h1>
            <h2>{{ }}</h2>
        </div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // new Vue({
    //     // 挂载点：vue实例(对象)通过挂载点与页面建立关联
    //     el: 'h1'
    // });
    // new Vue({
    //     el: 'h2'
    // })

    new Vue({
        // 挂载点只遍历第一个匹配的结果
        // html与body标签不可以作为挂载点
        // 挂载点的只一般就采用id选择器(唯一性)
        el: '#app'
    })
</script>
</html>

插值表达式与过滤器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="app">
        <!--插值表达式-->
        <h1>{{ msg.split('')[0] }}</h1>
        <h2>{{ info + msg }}</h2>
        <h3>{{ num * num }}</h3>
        <!--num作为过滤器的参数，过滤器的返回值就是表达式的值-->
        <h4>{{ num | my_filter }}</h4>
        <!--过滤器f1被传递了四个参数a,b,c,d，并将过滤结果做出f2的参数再过滤-->
        <!--这里f1相当于传入了四个参数，在过滤器中也可以传值-->
        <h4>{{ a, b | f1(c, d) | f2 }}</h4>
        <h4>{{ arr | f3 }}</h4>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 创建过滤器
    Vue.filter('my_filter', function (v) {
        console.log(v);
        return 999
    });
    
    Vue.filter('f1', function (a, b, c, d) {
        console.log(a, b, c, d);
        // return '过滤后的逻辑结果'
        return a + b + c + d
    });

    Vue.filter('f2', function (v) {
        console.log(v);
        return v * v
    });

    Vue.filter('f3', function (v) {
        let new_arr = [];
        for (n of v) {
            if (n >= 60) {
                new_arr.push(n)
            }
        }
        return new_arr
    });

    new Vue({
        el: '#app',
        // data成员用来为vue控制的变量提供值
        data: {
            msg: 'message',
            info: '信息',
            num: 10,
            a: 1,
            b: 2,
            c: 3,
            d: 4,
            arr: [23, 59, 62, 97]
        }
    })
</script>
</html>

文本指令

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <p>haha</p>
    <div id="app">
        <!--文本指令
        {{变量表达式}}
        v-text='变量表达式'
        v-html='html标签可被解析'
        v-once='限制的变量',内容还是通过上方三者完成渲染
        v-model='变量',输入框和所有带有这个变量的标签关联，同步修改
        -->
        <!--此时在标签中间写入内容将不会显示，‘插入内容’不会显示-->
        <h2 v-text="msg+'!!!'">插入内容</h2>
                <!--在其中插入字符串的话，需要加单引号-->
        <h2 v-text="msg+'add text'"></h2>
        <!--包括标签会全部显示在页面上-->
        <h2 v-text="htm"></h2>
        <!--文本会变成斜体-->
        <h2 v-html="htm"></h2>
        <!--会同步修改-->
        <h2>{{msg}}</h2>
        <!--一次性渲染，差值表达式中的任何一个变量被限制，整个结果就不可变-->
        <h2 v-once="msg">{{msg+htm}}</h2>
        <!--所有带有msg的标签都会同步修改，除了v-once-->
        <input type="text" v-model="msg">
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'message',
                htm:'<i>标签内容是否被解析</i>'
            }
        })

    </script>

</body>
</html>

属性指令

v-bind可以简写成单独的 ':'

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        .div{
            width:200px;
            height:200px;
            background-color: red;
            line-height: 200px;
            text-align: center;
            color: white;
        }
        .box{
            width:200px;
            height: 200px;

        }
        .blue{
            background: blue;

        }
        .green{
            background: green;

        }
    </style>
</head>
<body>
    <div id="app">
        <div class="div" style="-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;">123</div>
        <!--属性指令：v-bind:属性名='属性值'=>v-bind:可以简写成单独的 ':'
        eg:v-bind:style="{color:'red'}"
        -->

        <!--自定义属性：没有太多的应用场景-->
        <div abc="xyz"></div>
        <div v-bind:abc="xyz"></div>

        <!--title属性-->
        <div :title="xyz" class="div" style="border-radius:50%">456</div>

        <!--style属性-->
        <!--1）变量：变量的值为字典-->
        <div :style="my_style"></div>
        <!--2)字典中的多个变量-->
        <div :style="{width:w,height:h,background:b}"></div>

        <!--class属性-->
        <!--<div class="box blue"></div>-->
        <!--"[]"中的两个值表示属于两个类-->
        <div :class="c"></div>
        <div :class="[c1,c2]"></div>
        <div :class="[c1,'blue']"></div>
        <!--x为类名，是否生效有变量y(true|false)值决定-->
        <div :class="{x,y}"></div>
        <div :class="[{'box':true},c2]"></div>

    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                xyz:'ABC',
                my_style:{
                    width:'100px',
                    height:'199px',
                    background:'cyan',
                    borderRadius:'50%'

                },
                w:'50px',
                h:'50px',
                b:'red',
                c:'box blue',
                c1:'box',
                c2:'green',
                y:true,
            }
        })
    </script>


</body>
</html>

事件指令

v-on:事件名=‘fn变量’=>v-on:可以简写成@

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        .div{
            width:200px;
            height:200px;
            background-color:red;
        }


    </style>
</head>
<body>
    <div id="app">
        <!--事件指令 v-on:事件名='fn变量'=>v-on:可以简写为@
        v-on:click='clickAction'
        @dblclick='dblclickAction'
        -->

        <!--内容操作：每点一次，内容+1-->
        <h2 v-once="num">{{num}}</h2>
        <h2>{{num}}</h2>
        <div v-on:click="clickAction" class="div">{{num}}</div>


        <hr>
        <!--样式操作：点击切换背景颜色-->
        <div @click="changeColor" class="div" :style="{backgroundColor:bgColor}"></div>
        <!--操作样式：点击切换整体样式-->
        <div @click="changeStyle" :style="my_style"></div>
    </div>

</body>
<script>
    let app=new Vue({
        el:'#app',
        data:{
            num:100,
            bgColor:'cyan',
            my_style:{
                width:'100px',
                height:'100px',
                backgroundColor:'orange'
            }
        },
        //methods三种写法
        methods:{
            clickAction:function(){
                this.num ++
            },
            changeColor() {//方法的写法
                //if (this.bgColor=='cyan'){
                //  this.bgColor='blue'
                //    }else{
                //         this.bgColor='cyan'
                //    }
                //python: this.bgColor='cyan' if this.bgColor !='cyan' else 'blue'
                this.bgColor= this.bgColor != 'cyan'?'cyan':'blue'

            },
            changeStyle:()=>{ //这种写法，内部拿不到this（指向的是window）
                app.my_style=app.my_style.backgroundColor=='orange'?
                    {
                        width:'200px',
                        height:'200px',
                        backgroundColor:'yellow'
                    }
                    :
                    {
                        width:'100px',
                        height:'100px',
                        backgroundColor:'orange'
                    }
            }
        }
    })
    // 外界访问实例内部的数据,需要加$；而且new Vue的时候需要有一个接收值，这里是app：let app=new Vue({})
    console.log(app);
    console.log(app.$el);
    console.log(app.$data.num);
    //在实例中，只有data提供数据，所以可以直接省略$data
    console.log(app.num);
</script>
</html>

事件指令传参

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 50px;
            height: 50px;
            background-color: red;
            border-radius: 50%;
            text-align: center;
            line-height: 50px;
            color: white;
            cursor: pointer;
        }
    </style>
</head>
<body>.
    <div id="app">
        <!--没有传值默认传 事件对象 -->
        <div @click="btnClick1">{{ msg }}</div>
        <!--方法()不会直接调用方法，而是在点击触发后进行传参，接收到的参数就是传入的参数,没有参数则不传入参数，没有传入的参数就是undefined-->
        <div @click="btnClick2(1, msg)">{{ msg }}</div>
        <!--一旦书写 方法() 就不再传入事件对象，通过 $event 手动传入事件对象-->
        <div @click="btnClick3(msg, $event, $event)">{{ msg }}</div>

    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'box'
        },
        methods: {
            btnClick1(ev) {
                console.log(ev);
                console.log(ev.clientX);
            },
            btnClick2(a, b, c) {
                console.log(a, b, c)
            },
            btnClick3(a, b, c) {
                console.log(a, b, c)
            },
        }
    })
</script>
</html>

表单指令

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单指令</title>
</head>
<body>
    <div id="app">

        <form action="">
            <!--表单指令：v-model="变量"-->

            <!--双向绑定：一个地方修改值，所有地方的数据都会被更新-->
            <div>
                <input type="text" v-model="info" name="usr">
                <input type="password" v-model="info" name="pwd">
                <p>{{ info | infoFilter }}</p>
            </div>

            <div>
                <!--单选框：v-model="变量存放的是某个单选框的value值，代表该选框选中"-->
                <!--value和v-model的值相配对-->
                男<input type="radio" name="sex" value="male" v-model="sex_val">
                女<input type="radio" name="sex" value="female" v-model="sex_val">
            </div>


            <div>
                <!--单独的复选框：v-model="true|false代表该选框是否选中"-->
                是否同意<input v-model="cb_val" value="yes" type="checkbox" name="agree">
            </div>

            <div>
                <!--群复选框：v-model="存放选中选框value的 数组 "，如果不是数组是字符串的话，会显示true                和false，会一起选中或者一起不选中-->
                男<input v-model="cbs_val"  value="male" type="checkbox" name="hobby">
                女<input v-model="cbs_val"  value="female" type="checkbox" name="hobby">
                哇塞<input v-model="cbs_val"  value="others" type="checkbox" name="hobby">
                <p>{{ cbs_val }}</p>
            </div>

            <div>
                <input type="submit">
            </div>
        </form>
        
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    Vue.filter('infoFilter', (info) => {
        return info ? info : '初始内容'
    });

    new Vue({
        el: '#app',
        data: {
            info: '',
            sex_val: 'female',
            cb_val: 0,
            cbs_val: ["others"]
        }
    })
</script>
</html>

条件指令

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .btn1 { width: 400px; }
        .box {
            width: 200px;
            height: 200px;
            float: left;
        }
        .wrap:after {
            content: '';
            display: block;
            clear: both;
        }
        .red { background-color: red }
        .blue { background-color: blue }
    </style>
    <style>
        .btn-wrap { height: 25px }
        .btn {
            width: 100px;
            height: 25px;
            float: left;
        }
        .page {
            width: 300px;
            height: 150px;
        }
        .p1 { background-color: pink }
        .p2 { background-color: yellow }
        .p3 { background-color: green }
    </style>
</head>
<body>
    <div id="app">
        <!--条件指令
        v-if="true|false"
        v-show="true|false"
        -->
        <button class="btn1" @click="btnClick">{{ title }}</button>
        <div class="wrap">
            <!--v-if隐藏时不渲染到页面中，在代码中看不到，一般用这个；v-show隐藏时              
            用display:none渲染，在代码中还能看到，会被爬虫爬到-->
            <!--v-if隐藏时在内存中建立缓存，可以通过key属性设置缓存的键-->
            <div class="box red" v-if="is_show" key="box_red"></div>
            <div class="box blue" v-show="is_show"></div>
        </div>

        <div class="btn-wrap">
            <button class="btn" @click="changePage('pink')">粉</button>
            <button class="btn" @click="changePage('yellow')">黄</button>
            <button class="btn" @click="changePage('green')">绿</button>
        </div>
        <div>
            <!--v-if成立会屏蔽下方分支、v-else-if一样f成立会屏蔽下方分支-->
            <!--v-if不成立时才看v-else-if、v-else-if成立会屏蔽下方分支-->
            <!--v-if、v-else-if都不成立，v-else才成立，三者只会成立一个-->
            <div class="page p1" v-if="page == 'pink'"></div><!--page==pink的话为true，显示pink-->
            <div class="page p2" v-else-if="page == 'yellow'"></div>
            <div class="page p3" v-else></div>
        </div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            title: '隐藏',
            is_show: true,
            // '||'是短路机制，前面成立取前面的值，前面不成立去后面的值
            page: localStorage.page || 'pink'
        },
        methods: {
            btnClick() {
                this.title = this.title == '隐藏' ? '显示' : '隐藏';
                this.is_show = !this.is_show;
            },
            changePage(page) {
                this.page = page;
                localStorage.page = page;  // 永久缓存，记录操作
                // sessionStorage.page = page;  // 临时缓存，关闭浏览器消失
            }
        }
    })
</script>

</html>

转载于:https://www.cnblogs.com/zhoajiahao/p/11426294.html