vuejs基础玩法（基础知识，不喜勿喷！）

2024年5月11日 172次阅读 来源: 隐灵风

前言
Vuejs相关教程，可参阅网站，先熟悉vue.js的基本语法。本文档讲述，以CDN的方式（在页面上，引入相关的js和css文件），来实现。
本文档适用于vuejs初学者，之前给公司实习生学习准备的，很多相关知识暂不全，敬请谅解。
[color=#ff0000]1 页面结构[/color]
Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。简单来说,最基本结构如下就是:

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
        <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
              {{mes}}
          </div>
    </body>
    <script>
        new Vue({
            el:'#app',
            data:{
                  mes:'hello'
            }
        })
    </script>
</html>

这里边body的最外层的div，需要在下边进行实例化。当然最外层用的是id=’app’，实例化的时候，el:’#app’。跟css类似，如果最外层用class来标识的时候，里边#换成“点”。但是为了避免重复，统一用“id”来标识。
[color=#ff0000]2 基本模块[/color]

上半边省略，直接上js代码

<script>
    new Vue({
        el:'#app',
        data:{
            初始化页面上绑定的模型，数据
        },
        filters:{
            过滤器，简单数据处理。
        },
        mounted:function(){
            页面载入时调用的方法，
        },        
        methods:{
            事件方法
        },
        watch：{
            数据监听。
        }
    })
</script>

data: 页面初始化时，定义的元素模块，也是数据的容器，每一个栏位都会用到，类似于之前的普通写法里边的name，id等，但是比那个强大。
filters:这一块是过滤器，一般是处理数据用的。
mounted：页面加载是调用的方法，这便涉及到Vuejs的生命周期，大家可以去了解。根据不同情况调用，我自己遇到过关于图表方面，家在先后顺序的问题。
watch: 用于页面模块的数据监听。数据发生改变的时候，页面展示进行切换。
methods:事件方法都写在这个里边。例如点击事件。
正常情况下，页面结构就是上边的属性，当然顺序调换也未尝不可，看个人习惯。除了data外，其他模块用不到的，可以去掉。
[color=#ff0000]3.vue.js常用的指令[/color]

[color=#ff0000]文本指令[/color]
常用的数据绑定，双大括号的形式。{{ ··· }}
v-text 纯文本的方式展示出来
v-html 会解析你数据里边带的标签，以及样式，事件等等
v-model 功能最全，你把v-model放到input里边的时候，你会发现，你的input这个栏位，跟其他几个，message变成了双向绑定，你改变input里边的值，其他的值会跟着一起变动

<body>
<div id="app">
    {{message}}
    <div v-text="message"></div>
    <div v-html="message"></div>
    <input v-model="message" />
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            message:"<h1>Hello World</h1>"
        }
    })
</script>

运行上边的结果你会发现，{{···}}和“v-text”这种方式，会把message所有的东西输出,v-html会解析message里边的html标签，而v-model会绑定，message里边的数据，当你改变input里边的数据，页面上其他的数据也会相应改动。

[color=#ff0000]v-bind指令[/color]
html中的属性值，通常会用到这个指令，例如以下的class。v-bind:class=[class1,{‘class2’:A},{‘class3’:B}] 其中，class1为一直生效，class2和class3必须根据A，B对应的布尔值来展示，true的时候生效，反之不生效。 指令简写可以直接是”：class”，省去前边的v-bind.

<style>
    .class1{color:red;}
    .class2{font-size:16px;}
</style>
<body>
    <div id="app">
        <div :class="[class1,{‘class2’:A}]">
            {{message}}
        </div>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            message:"<h1>Hello World</h1>",
            class1:'class1',
            A: true
        }
    })
</script>

(这种情况，可用于，按钮点击，更换状态，样式等)
[color=#ff0000]v-if(v-else-if,v-else)指令[/color]
主要是在页面上给出相应的条件，例如

<style>
    p{font-size:30px;}
</style>
<body>
    <div id="app">
        <input v-model="message">
        <p v-if="message<12" style="color:red;"></p>
        <p v-else-if="message>20" style="color:green;"></p>
        <p v-else style="color:yellow;"></p>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            message:"<h1>Hello World</h1>",
            A: true
        }
    })
</script>

跟普通的if..else..语句的写法基本类似，也可以进行嵌套。
v-for指令,数据循环，基本写法

<body>
    <div id="app">
        <div v-for="item in message">
            {{item.name}}
        </div>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            message:[
                {name:"张三"},
                {name:"李四"}
            ]
        }
    })
</script>

也可以加嵌套，二维数组使用，限定结构一致

<body>
    <div id="app">
        <div v-for="item in message">
            {{item.name}}
            {{item.age}}
            <div v-for="it in item.study">
                {{it.yuwen}}
                {{it.shuxue}}
            </div>
        </div>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            message:[
                {
                name:"张三",
                age:"24",
                study:[
                    {
                        yuwen:"95",
                        shuxue:"80"
                    }
                ]
                },
            ]
        }
    })
</script>

vuejs,2.0中，v-for循环也可以加键名和索引，例如：

<body>
    <div id="app">
        <div v-for="(item,key,index) in message">
            {{index}}{{key}}{{item.name}}
        </div>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            message:[
                {name:"张三"},
                {name:"李四"}
            ]
        }
    })
</script>

value为对应字段行。key为键名，index为索引。这三个只是顺序，不带表真实参数，你写ABC下边双括号也写ABC也可以
。
循环的时候，我们可以写在v-model,或者有图片的时候，我们可以写在:src上
例如：<input v-model=”item.name”>
<img :src=”item.name”>
标签中不允许带双括号。例如，以下这种写法
<img :src=”{{item.name}}”>
[color=#ff0000]4.vue.js常用事件[/color]

[color=#ff0000]点击事件[/color]
常用事件声明为v-on:click=”hello()”，无参数，可以不带括号，有参数写括号中。简写方式@click=”hello()”，事件写在methods：{ ~~~ }里边。格式如下

<body>
    <div id="app">
        <input type="button" @click="demo()">
        <input type="button" @change="hello('aaa')">
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
        },
        methods:{
            demo:function(){
            },
            hello:function(a){
            }
        }
    })
</script>

事件是可以继承的，简单来说，比如一个事件，我们需要在页面上调用多次，我们可以直接进行事件继承。

<body>
    <div id="app">
        <input type="button" @click="demo()">
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
        },
        mounted:function(){
            this.hello();
            页面载入时调用hello方法，
        },
        methods:{
            demo:function(){
                this.hello();
                点击时调用到了hello方法
            },
            hello:function(a){
        }
    }
})

</script>


[color=#ff0000]监听事件[/color]
监听事件，当栏位值发生改变的时候，使用。，原来的js采用的是change事件，vuejs也可以用@change=””的方式来写，这样的话写在，跟点击事件一样，写在methods：{ ~~~ }里边。

但是部分框架，@change这种方式不兼容，所以我们一般直接用v-model进行绑定，写在watch:{ }里边，例如：

<body>

<div id="app">
    <input type="text" v-model="message">
</div>

</body>
<script>

new Vue({
    el:'#app',
    data:{
        message:'20'
    },
    watch:{
        message:function(val,oldval){
            自带两个参数,其中val为当前值，oldval为改变后的值
        }
    },
    methods:{
    }
})

</script>


[color=#ff0000]过滤器[/color]
过滤器写在filters:{}里边，一般对数据进行处理的时候会用得到。直接在文本后边加上“|”，然后跟这写，事件名。例如

<body>

<div id="app">
    {{message | demo}}
</div>

</body>
<script>

new Vue({
    el:'#app',
    data:{
        message:'20'
    },
    filters:{
        demo:function(val){
            return "$"+val+".00";
        }
    }
})

</script>

    原文作者：隐灵风
    原文地址: https://segmentfault.com/a/1190000016948381
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞