vue初识基本用法

阳光穿透心脏的1/2处 2022-12-13 00:44 172阅读 0赞

## vue初识基本用法 ##

**vue概念**  
目标是通过尽可能简单的 API 实现**响应的数据绑定**和**组合的视图组件**  
`MVVM`框架在概念上是真正将**页面**与**数据**逻辑分离的模式,**由数据驱动页面**

MVC是一个前后结合开发的框架

> M:model 模型  
> V:View 视图  
> C:Controller 控制器

MVVM是一个前后分离的框架

> M:model  
> V:view  
> VM:view model

**核心**：数据驱动页面 数据控制页面

> vue ：中国的尤雨溪  
> react：facebook  
> angular： google  
> Vue是一套渐近式框架，是用于构建用户界面的一套框架，我们可以通过Vue来开发我们的单页面应用

<body>
        <div id="app">
    
        </div>
    </body>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({ 
            //el:element
            el:"#app"             
        });
    </script>

上面就是vue的初始代码，代表vue要接管页面id="app"的区域，一旦接管这个区域以后，这个区域所有的操作应该都必须通过数据来驱动。在整个接管区域里面，有如下的东西会被接管

> 1.  数据
> 2.  事件
> 3.  属性
> 4.  显示、隐藏、动画效果

#### Vue接管页面数据 ####

Vue接管页面以后，页面上面的数据**主要来源于Vue的data属性**，但也可以来源于其它的属性

new Vue({ 
        //el:element
        el:"#app",
        data:{ 
            msg:"标哥哥你好"
        }          
    });

#### Vue数据渲染 ####

Vue的数据渲染也叫**数据绑定**，它可以将我们的Vue中的数据直接绑定在页面上面，并且是响应的数据绑定

##### 普通数据绑定 #####

`{ {msg}}` 就是将data里面的`msg`变量绑定到页面上面去

#### `v-text`的数据绑定 ####

> 这种方式可以理解成是`innerText`的方式去渲染

##### `v-html`的数据绑定 #####

<body>
        <div id="app">
            <div v-html="str1"></div>
        </div>
    </body>
    <script>
        new Vue({ 
            //el:element
            el:"#app",
            data:{ 
                msg:"标哥哥你好",
                str1:"<input type='text'>"
            }          
        });
    </script>`

> 这一种方式是以`innerHTML`的方式在渲染

#### `v-model`的表单数据绑定 ####

<body>
        <div id="app">
            <h2>{ { userName}}</h2>
            <hr>
            <input type="text" v-model="userName">
            <span>{ { userName.length==0?"请输入用户名":""}}</span>
            <hr>
            <input type="text" v-model="age">
            <span>{ { age>=18?'成年':'未成年'}}</span>
            <hr>
            
            <input type="radio" value="男" name="sex" v-model="sex">男
            <input type="radio" value="女" name="sex" v-model="sex">女
            <div>你选择的性别是：{ { sex}}</div>
            
            <input type="checkbox" value="看书" name="hobby" v-model="hobby">看书
            <input type="checkbox" value="睡觉" name="hobby" v-model="hobby">睡觉
            <div>
                你选择的爱好有：{ { hobby.toString()}}
            </div>
            
            <select v-model="province">
                <option value="湖北省">湖北省</option>
                <option value="湖南省">湖南省</option>
            </select>
            <div>你选择的省份是：{ { province}}</div>
            
            <select multiple v-model="stuList">
                <option value="张三">张三</option>
                <option value="李四">李四</option>
            </select>
            <p>你选中的学生有：{ { stuList}}</p>
        </div>
    </body>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({ 
            el: "#app",
            data: { 
                userName: "yangbiao",
                age: 18,
                sex:"男",
                hobby:["看书","逛街"],
                province:"",
                stuList:[]
            }
        })
    </script>

> 表单元素的渲染使用的是`v-model`来进行的

##### `v-once`单次数据绑定 #####

托管区域不能是body,更不能是html，只能是body下面的元素  
通过`v-once`修饰以后的绑定只做单次绑定，绑定以后数据就不再变更了

##### `v-show`隐藏与显示元素 #####

<body>
        <div id="app">
            <h2 v-show="flag">这是一个二号标题</h2>
            <h2 v-show="1<2">我用表在式来控制</h2>
            <h2 v-show="abc">布尔的结果来确定是否显示</h2>
        </div>
    </body>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({ 
            el: "#app",
            data: { 
                flag: true,
                abc: "hello"
            }
        })
    </script>

**注意**：`v-show`使用的是`display:none`来决定元素的隐藏与显示

##### `v-if`条件渲染 #####

它的功能与`v-show`看起来差不多，但是本质是不一样的，它也器可以让元素隐藏与显示，但是它不是添加样式决定的，它直接就把这个DOM元素给注释掉了

<body>
        <div id="app">
            <h2 v-if="flag">这是一个二号标题</h2>
            <h2 v-else>这还是一个2号标题啊~~~~~~~</h2>
        </div>
    </body>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({ 
            el: "#app",
            data: { 
                flag: false
            }
        })
    </script>

同时它还支持`v-else-if`这种渲染方式

<body>
        <div id="app">
            <h2 v-if="num===1">这是第一项</h2>
            <h2 v-else-if="num===2">这是第二项</h2>
            <h2 v-else-if="num===3">这是第三项</h2>
            <h2 v-else>其它的项</h2>
        </div>
    </body>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({ 
            el: "#app",
            data: { 
                num: 4
            }
        })
    </script>

#### `v-bind`属性绑定 ####

当对元素中的属性进行绑定修改时，可以使用

简写方式

##### `v-for`列表渲染 #####

<p v-for="(item,index) in userList" :key="index">{ { index}}----{ { item}}</p>
       <script>//省略部分代码
        new Vue({ 
            el: "#app",
            data: { 
                userList: ["张三", "李四", "王五", "赵六"]
            }
        })
    </script>

##### Vue事件 #####

<button type="button" v-on:click="sayHello('标哥哥')">按钮1</button>
            <hr>
            <button type="button" @click="sayHello('简写的方式')">按钮2</button>
            <hr>
            <button type="button" @click="abc($event)">获取事件对象</button>
            <hr>
            <button type="button" @click="def">事件方法中的this</button>
            <script>  //省略部分代码
        new Vue({ 
            el: "#app",
            data: { 
                //这里负责接管区域的数据
            },
            methods: { 
                //这里负责接管区域的事件方法
                sayHello: function (str) { 
                    alert("你好啊，" + str);
                },
                abc(event) { 
                    console.log(event);
                },
                def(){ 
                    console.log(this);
                    //这里面this指向当前的Vue实例对象
                }
            }
        })
    </script>

> 在上面的代码当中，我们可以看到Vue的事件有以下几个特点
> 
> 1.  它使用`v-on:事件名`来进行事件绑定
> 2.  它可以简写成`@事件名`来进行事件绑定
> 3.  vue的`methods`负责页面上面的事件方法
> 4.  如果不需要传递参数，事件方法在调用的时候可以不加小括号，如`@click='def'`
> 5.  传递事件对象我们要使用`$event`来进行
> 6.  Vue事件方法里面的this指向的是当前的Vue实例对象

## Vue计算属性 ##

// 计算属性
            computed: { 
                abc: function () { 
                    // 计算属性里面的方式是一定有返回值的
                    return "hahaha标哥哥";
                }
            }

> 计算属性是一定需要return出来一个返回值的

计算属性存在的目的就是如果页面上面有一些数据不能够直接使用则可以通过计算属性处理一遍以后再去使用

计算属性的名称不能与data里面写义的属性的名称相同

##### Vue侦听器 #####

属性监听也叫观察属性，它可以监听Vue内部的属性值的变化

//watch是侦听器，监控数据的变化
            watch:{ 
                //监控msg的变化
                msg:function(newValue,oldValue){ 
                    console.log("msg的值发生了变化");
                    //newValue就是msg的新的值
                    console.log("新的值："+newValue);
                    console.log("旧的值："+oldValue);
                }
            }

> 侦探器正常情况下只能够监控到基本数据型值的变化，如果要监听对象内部的的变化，则需要使用**深度监听**

##### 深度侦听 #####

//watch是侦听器，监控数据的变化
            watch: { 
                /* obj:function(){ console.log("obj对象发生了变化"); } */
                //深度监听
                obj: { 
                    handler: function (newValue, oldValue) { 
                        console.log("obj对象发生了变休");
                        console.log(newValue);          //标哥哥
                        console.log(oldValue);          //标哥哥
                    },
                    deep: true
                }
            }

> 深度侦听的语法与普通侦听器的语法是不一样的，它是一个对象，里面有`handler`以及`deep`两个属性。同时深度侦听是得不到变化之前的值的，所以我们看到上面的代码当中打印的`newValue`以及`oldValue`都是以变化以后的值

## class样式绑定 ##

`class`本身也是DOM元素当中的一个属性，所以它也是使用`v-bind:class`这种方式来进行绑定的，只是有它有一种特殊的绑定语法

`class`的动态样式绑定有两种语句，一种是对象语法，一种是数组语法

##### 对象语法 #####

> 如果布尔类型的结果为true,则代表有这个样式，如果布尔类型的结果为false,则代表没有这个样式

<li class="bgg" :class="{active:flag,abc:flag}" @click="flag=true">正在热映</li>
        <li :class="{active:!flag,abc:!flag}" @click="flag=false">即将上映</li>
          data:{ 
                flag:true
            }

在对象语法当中，属性名肯定是一个class名称，而属性肯定是一个布尔类型的结果

同时普通的样式的`class`与动态样式的`:class`是可以共存的

##### 数组语法 #####

数组语法的实现是借用于条件表达式的，根据前面的条件来决定后面的样式

## style样式绑定 ##

##### 对象语法 #####

> 对象语法只有一个点要注意，就是属性名如果出现了`-`的时候，可以使用转义来完成，如`background-color`则要转义成`backgroundColor`来进行  
> 当然也可以不转义，直接加引号`{'background-color':colorValue}`

既然是对象语法，那么，它就可以有多个属性同时变化

##### 数组语法 #####

<div class="box" :style="[obj1,obj2]"></div>
     省略部分代码
     methods:{ 
                addWidth(){ 
                    this.$set(this.obj1,"width","400px");
                }
            }

> 在数组语法当中，我们直接将一个对象放在了`:style="[obj1]"`，这个后期我们只要对这个obj1做一个更改，那么，`style`属性里面的值就会更改，它比对象单纯的对象语法更为灵活一点