前端开发Vue.js基础使用

黑马前端与移动开发视频教程 移动前端开发技术 web前端与移动开发视频教程

前言
Vuejs相关教程,可参阅网站,先熟悉vue.js的基本语法。本文档讲述,以CDN的方式(在页面上,引入相关的jscss文件),来实现。
本文档适用于vuejs初学者,之前给公司实习生学习准备的,很多相关知识暂不全,敬请谅解。
1 页面结构
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”来标识。
2 基本模块

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

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

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

文本指令
常用的数据绑定,双大括号的形式。{{ ··· }}
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-nodel=”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里边的数据,页面上其他的数据也会相应改动。

v-bind指令
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>

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

<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}}”>
4.vue.js常用事件

点击事件
常用事件声明为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>

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

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

<body>
    <div id=”app”>
        <input type=”text” v-mode=”message”>
    </div>
</body>
<script>
    new Vue({
        el: ‘#app’,
        data: {
            message: ’20’
        },
        watch: {
            message: function (val, oldval) {
                // 自带两个参数,其中val为当前值,oldval为改变后的值
            }
        },
        methods: {
        }
    })
</script>

过滤器
过滤器写在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>
移动互联网应用技术前端开发 移动端web前端开发实例 ui设计移动前端开发就业前景
» 本文来自:前端开发者 » 《前端开发Vue.js基础使用》
» 本文链接地址:https://www.rokub.com/6086.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!