Vue 基础、绑定、事件 学习笔记

前端的框架部分，其实之前就有碰过React了，但学不太起来，过一段时间也忘了，之后被朋友驱使来学Vue，所以就来记录一下Vue的学习过程吧。

vue为MVVM框架，所谓M就是Model就是资料的部分，而V就是View就是画面的部分 ，而VM就是我们的Vue，也就是扮演M与V之间的桥樑，将资料与画面绑起来。

首先需要引入vue的资料库。

    <!-- 透过script直接引入vue的资料 -->    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

再来就是需要建立vue物件，利用new实体化。
data属性:物件所存的资料(可以加上阵列、物件、布林值等类型)。
el属性(挂载点):用在哪个元素上。

    <div id="main">        <p>{{message}}</p>    </div>    <script type="text/javascript">        // 建立vue物件        var vue = new Vue({            el: "#main",             data: {                message: "hello vue123",                haha: "哈哈",                hehe: "嘿嘿",                isShow: false,                array: ["1", "2", 3],                imgSrc: "你没大声阿.png",            }        });    </script>

资料显示

v-html:可读取标籤。
v-text:(等同{{}})不可读取标籤。

        <p v-html="message"></p>        <p v-text="message"></p>                <p v-html="title"></p>        <!-- Hello-->                <p v-text="title"></p>        <!-- <h2>Hello<h2/>  -->

迴圈显示

v-for:与js的for in 一样，前(item)为阵列中的资料，后(array)就为指定阵列。

        <!-- 显示循环列表 v-for -->        <ul>            <li v-for="item in array">                {{item}}            </li>        </ul>

事件绑定

v-on:click(等同@click):点击事件。

        <div            class="box"            v-on:click="sleep"        >            {{message}}        </div>        <div            class="box"            @click="sleep"        >            {{message}}        </div>

属性绑定

v-bind:(要绑定的属性，等同:(...)):属性绑定。

        <img v-bind:src="imgSrc">        <img :src="imgSrc">

样式绑定

利用v-bind，可在对应的DOM的属性上赋予 "{ 要添加的样式:值 }"。

        <div            class="view"            :class="{active:isActive}"        >        {{message}}        </div>

computed,methods

都建立在vue物件底下，而在获取物件下的资料，都需要用this指向当前物件。
computed:类似变数的概念，去纪录并处理资料。
methods:类似function的概念，处理互动方面的功能。

        let data = {            message: "hello vue",            index: 0,            src: "https://picsum.photos/200/300",            menu: [ {...},{...},.. ]}        // 建立vue物件        let vue = new Vue({            el: "#main",            // 将资料另外设为一个名为data的变数，并在物件下去获取            data: data,            methods: {                // 改变下标                changePage(change) {                    // let length = this.menu.length;                    // 功能为点选最左边再次，点最左时，会跳转到最右边，反之                    // 当我们下标为0 = (0 - 1 + 5) % 5 = 5一个通用于轮播循环的概念                     // this.index = (this.index + change + length) % length;                    this.index = (this.index + change + this.total) % this.total;                }            },            computed: {                current() {                    return this.menu[this.index];                },                total() {                    return this.menu.length;                }            },        });

而在html我们就可以获取物件所创建的方法，资料...

            <div class="img">                <!-- 获取对应下标的图标 -->                <img :src="current.src">            </div>                        <div class="detail">                 <!-- 获取对应下标的title -->                 <p>{{current.title}}</p>            </div>                        <div>                 <a                    class="right"                    @click="changePage(+1)"                    :href="current.link"                 >                 </a>            </div>

双向绑定

双向资料绑定(v-model)，也就是当我在html修改资料，也能够修改data中对应的资料，当输入框资料改变，就会去改变对应的属性，如我们更动input中的vaule，物件中data下的message也会跟着改变，而checkbox也是如此。

js部分。

let data = {    message: "hello vue",    hobby: []}// 建立vue物件let vue = new Vue({    el: "#main",    data: data});

html部分，此处我们额外判断，如果hobby为空或非空就返回对应字串，而后再将hobby中的资料串接成字符串。
将每个input都进行双向绑定v-model。

        <div>            <p>{{message}}</p>            <p>                {{ hobby.length ? '我的兴趣是' : '我没什么兴趣' }}                {{ hobby.join('、') }}            </p>            <input v-model="message">            <input                type="checkbox"                value="eat"                v-model="hobby"            >eat            <input                type="checkbox"                value="play"                v-model="hobby"            >play            <input                type="checkbox"                value="music"                v-model="hobby"            >music        </div>