Vue基础入门

最新推荐文章于 2024-05-14 15:59:09 发布

axbhealj

最新推荐文章于 2024-05-14 15:59:09 发布

阅读量859

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/axbhealj/article/details/130777905

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

2.4 在页面的元素中使用插值表达式来使用vue对象中的内容

插值表达式的作用是在View中获得Model中的内容

2.5 Vue的循环 v-for

2.5.1 带着索引的for

2.5.2 遍历一个对象中的信息： v、k、i

2.5.3 遍历一个对象数组：嵌套的for循环

一、Vue简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式的js框架，发布于 2014 年 2 月。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库（如：vue-router，vue-resource，vuex）或既有项目整合。

1.1MVVM

Model：模型层，在这里表示 JavaScript 对象
View：视图层，在这里表示 DOM（HTML 操作的元素）
ViewModel：连接视图和数据的中间件，Vue.js 就是 MVVM 中的 ViewModel 层的实现者

在 MVVM 架构中，是不允许数据和视图直接通信的，只能通过 ViewModel 来通信，而 ViewModel 就是定义了一个Observer` 观察者

ViewModel 能够观察到数据的变化，并对视图下对应的内容进行更新
ViewModel 能够监听到视图的变化，并能够通知数据发生改变

至此，我们就明白了，Vue.js 就是一个 MVVM 的实现者，他的核心就是实现了 DOM 监听与数据绑定

二、Vue入门

2.1在页面引入vue的js文件

<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>

可以自己下载然后引入

2.2 在页面中绑定vue元素

创建一个div，id是app
<div id="app"></div>

2.3 创建vue对象，设计对象的内容

其中该vue对象，绑定了页面中id是app的那个div

<script>
		new Vue({
			el:"#app",   // 绑定div中的id
			data:{       // 注意数据格式
				title:"hello vue!",
                  args1:"hi!",
                 age:18,
                flag:true
			}
		});
</script>

# el: element的简称，也就是Vue实例挂载的元素节点，值可以是 CSS 选择符，或实际 HTML 元素，或返回 HTML 元素的函数。
# data: 用于提供数据的对象，里面存放键值对数据。

2.4 在页面的元素中使用插值表达式来使用vue对象中的内容

<div id="app">
	{{ title }}
</div>

{{ }} 叫做插值符号或者大胡子符号

插值表达式的作用是在View中获得Model中的内容

// Model中的内容如下：
new Vue({
		el:"#app",
		data:{
			title:"hello world!"
		},
		methods:{
			sayHello:function(){
				return "hello vue";
			}
		}
	});

使用插值表达式调用Vue中的方法

<div id="app">
		{{ sayHello()}}
</div>

页面上会显示“hello vue”，也就是调用了vue对象中的sayHello方法，并展示了方法的返回值。

2.5 Vue的循环 v-for

<body>

<div id="app">

    <ul>
        <li v-for="a in args">{{a}}</li>
    </ul>

</div>
</body>

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>

    new Vue({
        el:'#app',
        data:{
            args:[1,2,3,4,5,6]
        }
    });

</script>

在这个例子中，数据源提供了一个数组。视图层通过v-for来循环输出多个li标签，非常简单。

2.5.1 带着索引的for

<body>

<div id="app">

    <ul>
        <li v-for=" (a,i)  in  args" :key='i'>{{i}}{{a}}</li>
    </ul>

</div>
</body>

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>

    new Vue({
        el:'#app',
        data:{
            args:[1,2,3,4,5,6]
        }
    });

</script>

这个索引很有用的

2.5.2 遍历一个对象中的信息： v、k、i

<body>

<div id="app">

    <ul>
        <li v-for="(v,k,i) in student">{{i+1}}--{{k}}--{{v}}</li>
    </ul>

</div>
</body>

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>

    new Vue({
    	el:'#app',
    	data:{
       	 	student:{
            	username:'小鱼',
				age:20,
				girl:'如花'
        	}
    	}
	});

</script>

v、k、i 这几个字符可以自己定义，分别表示每次循环内容的值、键、序号。

v: 循环中每条数据的值小鱼、20、如花
k: 循环中每天数据的键 username、age、girl
i: 循环的序号，从0开始

2.5.3 遍历一个对象数组：嵌套的for循环

（table标签里遍历data里的students）

<body>

    <div id="app">
        {{name}} <br>
        {{msg}}<br>
        <input type="text" id="name">
        <input type="text" id="pass" v-model="msg">
        <input type="text" id="pass" v-model="user.name"><br>

        <input class="c1" type="text" value="11111111">
        <input v-bind:class="c3" type="text" value="11111111">
        <!-- 简写 v-bind为 ：  -->
        <input :class="c3" type="text" value="11111111">

        <br>

        <input v-if="ok" value="i m ok">
        <br>

        <button v-on:click="btn">按钮 </button>
        <!-- v-on也可以简写，使用"@"替代。 -->
        <button @click="btn1">按钮1 </button>
        <br>
        <button @click="disable">button </button>

        <table>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
            <tr v-for="stu in students">
                <td>{{stu.name}}</td>
                <td>{{stu.age}}</td>
                <td>{{stu.sex}}</td>
            </tr>
        </table><br>

        <span v-for="(name,age,sex) in student">
            {{name}} --<br>
            {{age}} --<br>
            {{sex}}<br>
        </span>


        <ul>
            <li v-for="i in args">{{i}}</li>
        </ul>

        <ul>
            <li v-for=" (a,i)  in  args" :key='i'>{{i}} {{a}}</li>
        </ul>


    </div>



    <script>
        new Vue({
            el: "#app",
            data: {
                msg: "zhangsan",
                name: "ww",
                c3: "c1",
                ok: true,
                user: {
                    id: 2,
                    name: "芜湖"
                },
                disable: true,
                student: { name: "zs", age: 20, sex: "那那" },
                students: [
                    { name: "zs", age: 20, sex: "那那" },
                    { name: "ls", age: 21, sex: "女" },
                    { name: "ww", age: 22, sex: "男" },
                ],
                args: [1, 2, 3, 4, 5, 6]
            },
            methods: {
                btn: function () {
                    console.log("点我")
                },
                btn1: function () {
                    console.log("点我1")
                }
            }
        })
    </script>