vue入门及常用系统指令

最新推荐文章于 2022-10-19 17:08:10 发布

自律成就自由

最新推荐文章于 2022-10-19 17:08:10 发布

阅读量214

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_45145809/article/details/108853639

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.vue介绍

Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。

2.MVVM模式

MVVM是Model-View-ViewModel的简写。
它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开
MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）
Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是
ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷

3.快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vuejs/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="myVue">
    {{message}}
    {{num*num}}
    {{ok ? 'yes':'no'}}
</div>
<script>
    new Vue({
        el: '#myVue',   //vue绑定哪个区域
        data:{         //展示数据
            message:"hello Vue",
            num:100,
            ok:false
        }
    })
</script>
</body>
</html>

运行结果：

4.常用系统指令

4.1 v-on: 相当于@

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on 鼠标点击事件</title>
    <script src="vuejs/vuejs-2.5.16.js"></script>
</head>

<body>

<div id="myVue">
    <!-- @ 相当于 v-on:-->
    <button v-on:click="fun('aaaaaaa')">点我</button>
   <button @click="fun1('aaaaaaa')">点我</button>
    {{message}}
</div>
<script>
    new Vue({
        el: '#myVue',   //vue绑定哪个区域
        data:{         //展示数据
            message:"hello Vue",
        },
        methods:{
            fun:function (mes) {
                this.message=mes;
            },
            fun1:function (mes) {
                this.message=mes;
            }
        }
    })
</script>
</body>
</html>

运行结果：
在这里插入图片描述
点击之后：

4.2 v-on:keydown 键盘输入事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on:keydown 键盘输入事件</title>
    <script src="vuejs/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="myVue">
    <!-- @ 相当于 v-on:-->
   <input @keydown="fun($event)"/>
    {{message}}
</div>
<script>
    new Vue({
        el: '#myVue',   //vue绑定哪个区域
        data:{         //展示数据
            message:"hello Vue",
        },
        methods:{
            fun:function (mes) {
                if(mes.keyCode<96||mes.keyCode>105){
                    mes.preventDefault();
                }
            }
        }
    })
</script>
</body>
</html>

运行结果：只能输入数字，范围每个电脑有差异
在这里插入图片描述

4.3 v-on:mouseover 鼠标移动事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on:mouseover 鼠标移动事件</title>
    <script src="vuejs/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="myVue">
    <!-- @ 相当于 v-on:-->
    <div @mouseover="fun()" style="background-color: red;height: 300px;width: 300px">
        <textarea @mouseover="fun1()" style="height: 100px;width: 200px"></textarea>
    </div>
    {{message}}
</div>
<script>
    new Vue({
        el: '#myVue',   //vue绑定哪个区域
        data:{         //展示数据
            message:"hello Vue",
        },
        methods:{
            fun:function () {
                alert("鼠标进入div的区域")
            },
            fun1:function () {
                alert("鼠标进入textarea的区域")
                event.stopPropagation();只显示一次，后面的不显示
            }
        }
    })
</script>
</body>
</html>

运行结果：在这里插入图片描述

4.4 v-text/v-html 展示数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-text/v-html 展示数据</title>
    <script src="vuejs/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="myVue">
    <!-- @ 相当于 v-on:-->
    <!--
            th:utext 展示html标签
            th:text 展示文本信息
        -->
    <div v-text="message"></div>
    <div v-html="message"></div>
</div>
<script>
    new Vue({
        el: '#myVue',   //vue绑定哪个区域
        data:{         //展示数据
            message:"<h1>hello Vue</h1>",
        }
    })
</script>
</body>
</html>

运行结果：
在这里插入图片描述

4.5 v-bind：简写为：属性绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind 属性绑定</title>
    <script src="vuejs/vuejs-2.5.16.js"></script>
</head>

<body>

<div id="myVue">
    <!-- v-bind:简写为：-->
    <font :color="col">{{mess1}}</font>
    <font :color="cols">{{mess2}}</font>
</div>
<script>
    new Vue({
        el: '#myVue',   //vue绑定哪个区域
        data:{         //展示数据
            mess1:123,
            mess2:321,
            col:'red',
            cols:'green'
        }
    })
</script>
</body>
</html>

运行结果：
在这里插入图片描述

4.6 v-model 对象绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model 对象绑定</title>
    <script src="vuejs/vuejs-2.5.16.js"></script>
</head>

<body>

<div id="myVue">
    <input @click="findById" type="button" value="查询">
    <form>
        姓名：<input v-model="user.name" name="name">
        年龄：<input v-model="user.age" name="age">
        <input v-on:click="sub()" type="button" value="提交">
    </form>
</div>
<script>
    new Vue({
        el: '#myVue',   //vue绑定哪个区域
        data:{         //展示数据
            user:{
                name:"",
                age:""
            }
        },
        methods:{
            sub:function () {
                alert(this.user.name+"==="+this.user.age)
                //请求后台进行修改
            },findById:function () {
                //去后台进行请求获取数据
                this.user={name:"wang",age:"18"}
            }
        }
    })
</script>
</body>
</html>

运行结果：在这里插入图片描述
点击查询，获取值：

修改提交：

4.7 v-for 循环数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for 循环数据</title>
    <script src="vuejs/vuejs-2.5.16.js"></script>
</head>

<body>

<div id="myVue">

    <ul>
        <li v-for="(item,index) in arr">{{item}}------{{index}}</li>
    </ul><hr/>

    <ul>
        <li v-for="(item,index) in users">{{item}}------{{index}}</li>
    </ul><hr/>

    <table border="1">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr v-for="(item,index) in userList">
            <td>{{index+1}}</td>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.sex==1?'男':'女'}}</td>
        </tr>
    </table>
</div>
<script>
    new Vue({
        el: '#myVue',   //vue绑定哪个区域
        data:{         //展示数据
            arr:[11,22,33,44,55],
            users:{
                name:"张三",
                age:18,
                sex:1
            },
            userList:[
                {
                "name": "张三1",
                "age": 18,
                "sex": 0
                },
                {
                    "name": "张三2",
                    "age": 18,
                    "sex": 1
                },
                {
                    "name": "张三3",
                    "age": 18,
                    "sex": 0
                }
            ]
        }
    })
</script>
</body>
</html>

运行结果：在这里插入图片描述

4.8 v-if/v-show 展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if/v-show 展示</title>
    <script src="vuejs/vuejs-2.5.16.js"></script>
</head>

<body>

<div id="myVue">
    <span v-if="flag">vue牛皮</span>
    <span v-show="flag1">vue牛皮</span>

</div>
<script>
    new Vue({
        el: '#myVue',   //vue绑定哪个区域
        data:{         //展示数据
            flag:true,
            flag1:false
        }
    })
</script>
</body>
</html>

运行结果：flag为false不显示
在这里插入图片描述

自律成就自由

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue入门及常用系统指令

1.vue介绍Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。2.MVVM模式MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）Vue.js
复制链接

扫一扫