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

时间 2019-11-16

原文原文链接

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

<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]css

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

<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]vue

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

<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.app

<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>