一、什么是Vue

1、前端技术的发展(html、CSS、JavaScript)

​ (1)jQuery:是对JavaScript进行了封装,使得操作DOM、事件处理、动画处理、ajax交互变得非常简洁、方便。是JavaScript的库。

​ (2)Vue:通过虚拟的DOM来减少对真实DOM的操作,通过尽可能少的、简单的API实现数据的绑定。支持单向和双向的数据绑定

​ (3)Vue的基本概念:

        ​ a、是一个渐进式框架:可以实现自底向上的逐层开发。

        ​ b、可以用Vue开发全新的项目,也可以在现有的项目中引入Vue

2、MVVM架构:

​ (1)MVC架构:模型 — 视图 — 控制器

        ​ M:Model(模型),对数据进行操作

        ​ V:View(视图),用来展示数据

        ​ C:Controller(控制器),处理用户的请求

​ (2)MVVM架构:

        ​ M:Model(模型)

        ​ V:View(视图)

        ​ VM:ViewModel(视图模型) —- 实现数据的双向绑定

数据的双向绑定:Vue的特征之一,当视图发生改变时,模型能立即感知到;当模型中的数据发生改变时,视图也能立即反应出来。

二、Vue开发的方式

1、基本方式:在页面中引入vue.js文件。(vscode)

2、组件方式:利用Vue-cli(Vue脚手架)开发。(vscode、WebStorm、Vue Gui)

3、创建Vue实例:new Vue({})

​ (1)el:表示与vue实例绑定的唯一的根标签。是通过标签的id或class属性进行绑定

​ (2)data:初始化vue实例的属性的值。在底层会自动生成属性的setter和getter方法

​ 可以是用 vue对象名.$data.属性名 的方式来获取值

​ (3)methods:用来定义方法。这些方法vue的实例可以直接访问

<body>
    <div id="root">
        <p>{{ msg }}</p>
        <button @click="changeMsg">请单击</button>
    </div>

    <script>
        const vm = new Vue({
            el:'#root',
            data:{
                msg:'蜗牛学院'
            },
            methods:{
                changeMsg(){
                    this.msg = '马伟超' //this代表的是Vue实例 --- vm
                }
            }
        })
        console.log(vm.$data.msg);
    </script>
</body>

三、Vue的基本指令(重点)

1、插值表达式:{{ 变量名 }}。将Vue实例的对应的属性值在页面中显示出来

2、内置指令:vue的内置指令都是以 v- 开头的 特殊属性,通过这些指令来操作属性的值

​ (1)v-show:可以根据表达式的值的真假,来决定是否显示数据

<body>
    <div id="app">
        <p v-show="flag">蜗牛学院</p>
        <p v-show="temp">大雁塔</p>
        <!-- <button @click="show">变换</button> -->
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                flag: false,
                temp: true
            }
            // methods:{
            //     show(){
            //         this.flag = !this.flag
            //         this.temp = !this.temp
            //     }
            // }
        })
        window.setInterval(function () {
            vm.flag = !vm.flag
            vm.temp = !vm.temp
        }, 1000)
    </script>
</body>

 ​ (2)v-html:插入标签

<body>
    <div id="app">
        <form action="">
            <label for="">
                <input type="checkbox" name="" id="">苹果
            </label>
            <label for="">
                <input type="checkbox" name="" id="">香蕉
            </label>
            <label for="">
                <input type="checkbox" name="" id="">橘子
            </label>
            <label for="">
                <input type="checkbox" name="" id="" @click="show">其他
            </label>
            <br><br>
            <div v-html="htmlStr" v-show="flag"></div>
        </form>
    </div>

    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                htmlStr:'<textarea></textarea>',
                flag:false
            },
            methods:{
                show(){
                    this.flag = !this.flag
                }
            }
        })
    </script>
</body>

 ​ (3)v-text:在元素中插入值。作用和插值表达式 {{ }}相同

<body>
    <div id="app">
        <p v-text="test"></p>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                test:'蜗牛学院'
            }
        })
    </script>
</body>

 ​ (4)v-if、v-else、v-else-if:类似于if-else 的功能

<body>
    <div id="app">
        <div v-if="role==1">
            <h2>超级管理员</h2>
        </div>
        <div v-else-if="role==2">
            <h2>管理员</h2>
        </div>
        <div v-else>
            <h2>过客</h2>
        </div>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                role:5
            }
        })
    </script>
</body>

强调:v-show和v-if的区别

A、实现方式:v-if底层采用appendChild方式实现,v-show是通过样式属性display来控制元素的显示和隐藏

B、加载性能:v-if的加载速度更快,v-show的加载速度慢

C、切换的开销:v-if开销大,v-show的开销小

v-if是条件渲染。将模型中的数据在视图中显示出来的过程称为渲染

​ (5)v-for:循环指令,用于遍历数组、集合、对象的属性

<body>
    <div id="app">
        <ul>
            <li v-for="item in arr">
                {{ item }}
            </li>
        </ul>
        <ul>
            <li v-for="(item,index) in arr">
                {{ item }} === {{ index }}
            </li>
        </ul>
        <ul>
            <li v-for="(item,key,index) in obj">
                {{ item }} === {{ key }} === {{ index }}
            </li>
        </ul>
        <ul>
            <li v-for="item in objArr">
                {{ item.id }}
                {{ item.name }}
                {{ item.address }}
                {{ item }}
            </li>
        </ul>
        <table border="1">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>地址</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in objArr">
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.address }}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                arr: [11, 22, 33, 44, 55],
                obj: { id: 1001, name: 'A1', address: '西安' },
                objArr: [
                    { id: 1001, name: 'A1', address: '西安' },
                    { id: 1002, name: 'A2', address: '西安' },
                    { id: 1003, name: 'A3', address: '西安' },
                    { id: 1004, name: 'A4', address: '西安' },
                    { id: 1005, name: 'A5', address: '西安' }
                ]
            }
        })
    </script>
</body>

 ​ (6)v-bind:绑定元素的属性,并执行相关操作。简写方式为( :属性名 )

<style>
    .ok{
        font-size: 25px;
        color: red;
    }
</style>
<body>
    <div id="app">
        <a v-bind:href="link">超链接</a>
        <!-- 简写 -->
        <!-- <a :href="link">超链接</a> -->
        <br><br>
        <button @click="change">改变超链接</button>
        <p :class="{ok:isok}">大唐芙蓉园</p>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                link:'http://www.baidu.com',
                isok:true
            },
            methods:{
                change(){
                    this.link = 'http://www.woniuxy.com',
                    this.isok = !this.isok
                }
            }
        })
    </script>
</body>

 ​ (7)v-on:监听事件,并执行相应的操作。v-on的简写方式(@事件名)

<body>
    <div id="app">
        <p>{{ msg }}</p>
        <button v-on:click="change">修改</button>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                msg:'钟楼'
            },
            methods:{
                change(){
                    this.msg = '鼓楼'
                }
            }
        })
    </script>
</body>

 ​ (8)v-model:将input标签的值和变量进行绑定,实现数据和视图的双向绑定

<body>
    <div id="app">
        <input type="radio" name="sex" value="男" v-model="gender">男
        <input type="radio" name="sex" value="女" v-model="gender">女
        <p>你选择的性别是:{{ gender }}</p>
        <hr>
        <select name="" id="" v-model="book">
            <optgroup label="西北地区">
                <option value="陕西">陕西</option>
                <option value="宁夏">宁夏</option>
                <option value="甘肃">甘肃</option>
            </optgroup>
        </select>
        <p>你选择的地区是:{{ book }}</p>
        <hr>
        <input type="checkbox" value="游戏" v-model="hobby">游戏
        <input type="checkbox" value="篮球" v-model="hobby">篮球
        <input type="checkbox" value="足球" v-model="hobby">足球
        <input type="checkbox" value="游泳" v-model="hobby">游泳
        <p>你的爱好是:{{ hobby }}</p>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                gender:'',
                book:'',
                hobby:[]
            }
        })
    </script>
</body>

 ​ (9)v-once:可以让元素或组件只渲染一次,一旦绑定,数据就不会改变。

<body>
    <div id="app">
        <input type="text" v-model="onceValue">
        <p>{{onceValue}}</p>
        <p v-once>{{onceValue}}</p>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                onceValue:'onceValue'
            }
        })
    </script>
</body>
Logo

前往低代码交流专区

更多推荐