Vue基础入门

╰+攻爆jí腚メ 2024-03-22 19:38 64阅读 0赞

**目录**

一、Vue简介

1.1MVVM

二、Vue入门

2.1在页面引入vue的js文件

2.2 在页面中绑定vue元素

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

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

<table style="width:619px;"> 
 <tbody> 
  <tr> 
   <td style="width:616px;"> 
    <ul> 
     <li> <p>Model：模型层，在这里表示 JavaScript 对象</p> </li> 
     <li> <p>View：视图层，在这里表示 DOM（HTML 操作的元素）</p> </li> 
     <li> <p>ViewModel：连接视图和数据的中间件，Vue.js 就是 MVVM 中的 ViewModel 层的实现者</p> </li> 
    </ul></td> 
  </tr> 
 </tbody> 
</table>

![bd51a4b990aa48a9b8fcb590f4de54ed.png][]

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

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

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

## 二、Vue入门 ##

#### 2.1在页面引入vue的js文件 ####

可以自己下载然后引入

#### 2.2 在页面中绑定vue元素 ####

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

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

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

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

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

#### 2.5.1 带着索引的for ####

这个索引很有用的

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

<table style="width:563px;"> 
 <tbody> 
  <tr> 
   <td style="width:560px;"> <p><strong>v、k、i 这几个字符可以自己定义，分别表示每次循环内容的值、键、序号。</strong></p> 
    <ul> 
     <li> <p><strong>v: 循环中每条数据的值 小鱼、20、如花</strong></p> </li> 
     <li> <p><strong>k: 循环中每天数据的键 username、age、girl</strong></p> </li> 
     <li> <p><strong>i: 循环的序号，从0开始</strong></p> </li> 
    </ul></td> 
  </tr> 
 </tbody> 
</table>

![481be8a8f99d4fa4a9bf7946439dadc5.png][]

#### 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">
            
            <input :class="c3" type="text" value="11111111">
    
            <br>
    
            <input v-if="ok" value="i m ok">
            <br>
    
            <button v-on:click="btn">按钮 </button>
            
            <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>

![10624652092f462e997c540523d620d3.png][]

####  ####

[bd51a4b990aa48a9b8fcb590f4de54ed.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/c6c806c0b0bb4ee58ccd0ad2a9371f89.png
[481be8a8f99d4fa4a9bf7946439dadc5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/e45da1ec74ac48b99496cd605c1deef2.png
[10624652092f462e997c540523d620d3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/388b4fc106644032a392897f0604c65c.png