技术原理

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>

你也可能喜欢

发表评论

您的电子邮件地址不会被公开。 必填项已用 * 标注

提示:点击验证后方可评论!

插入图片
人工智能 未来 投稿者
我还没有学会写个人说明!
最近文章
  • * 没有更多文章了
  • 热门搜索

    分类目录