Vue简介以及基础语法的使用

最新推荐文章于 2022-12-02 16:23:25 发布

爱喝椰汁的木木

最新推荐文章于 2022-12-02 16:23:25 发布

阅读量575

点赞数

分类专栏：前端部分文章标签： vue javascript

本文链接：https://blog.csdn.net/qq_45503643/article/details/110234500

版权

前端部分专栏收录该内容

10 篇文章 0 订阅

订阅专栏

简介

Vue (读音 /vjuː/，类似于 view)： Vue.js是一个渐进式JavaScript 框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。

官网：https://cn.vuejs.org/

为什么要使用 Vue.js(特点)

轻量级，体积小是一个重要指标。Vue.js 压缩后有只有 20多kb （Angular 压缩后 56kb+，React压缩后 44kb+）
移动优先。更适合移动端，比如移动端的 Touch 事件
易上手，学习曲线平稳，文档齐全
吸取了 Angular（模块化）和 React（虚拟 DOM）的长处，并拥有自己独特的功能，如：计算属性
开源，社区活跃度高

MVVM 模式的实现者

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

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

ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新

ViewModel 能够监听到视图的变化，并能够通知数据发生改变

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

为什么要使用 MVVM

MVVM 模式和 MVC 模式一样，主要目的是分离视图（View）和模型（Model），好处：

低耦合：视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的 View上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。
可复用：你可以把一些视图逻辑放在一个 ViewModel 里面，让很多 View 重用这段视图逻辑。
独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
可测试：界面素来是比较难于测试的，而现在测试可以针对 ViewModel 来写。

View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。

兼容性

Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

第一个vue程序

1、新建一个.html文件，在body标签中引入 vue在线cdn

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

代码演示：

<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

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

<script>
//实例化一个vue对象
    let app = new Vue({
    //el表示vue实例与标签元素进行绑定
        el:'#app',
        //data：存放数据
        data:{
            msg:'Hello Vue'
        }
    })
</script>
</body>

在浏览器运行测试：
在这里插入图片描述

vue基础语法

v-if系列条件渲染

代码演示：

<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
    <p v-if="see">看到我了-->see:true</p>
    <p v-else>-->see:false</p>

    <div v-if="type === 'A'">
        A
    </div>
    <div v-else-if="type === 'B'">
        B
    </div>
    <div v-else-if="type === 'C'">
        C
    </div>
    <div v-else>
        not A/B/C
    </div>

</div>

<script>
    let app = new Vue({
        el:'#app',
        data:{
            see:false,
            type:'E'
        }
    })
</script>
</body>

浏览器结果图：
在这里插入图片描述

v-for列表渲染

1、用 v-for 指令基于一个数组来渲染一个列表

两种写法：一种不带索引值，一种带索引值

代码演示：

<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
    <ul>
        <!--遍历数组元素的两种写法-->
        <li v-for="item in items">{{item}}</li>
        <li v-for="(item,index) in items">{{index}} : {{item}}</li>
    </ul>
</div>

<script>
    let app = new Vue({
        el:'#app',
        data:{
            items:['java','js','vue']
        }
    })
</script>
</body>

浏览器效果图：
在这里插入图片描述
2、也可以用 v-for 来遍历一个对象的 property。

代码演示：

<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
    <ul>
        <!--遍历对象-->
        <li v-for="value in stu">{{value}}</li>
        <li v-for="(value,name) in stu">{{name}} : {{value}}</li>
    </ul>
</div>

<script>
    let app = new Vue({
        el:'#app',
        data:{
            stu:{
                name:'jack',
                age:18,
                gender:'男'
            }
        }
    })
</script>
</body>

浏览器效果图：
在这里插入图片描述

不推荐在同一元素上使用 v-if 和 v-for
当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中

v-on 事件处理

许多事件处理逻辑会比较复杂，因此需要 v-on 接收一个需要调用的方法名称。这个方法定义在vue实例的 methods 中。

语法糖：

v-on: 相当于 @

代码演示：

<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
    <button v-on:click="addCount">点击递增</button>
    <button v-on:click="disCount">点击递减</button>
    <p>值： {{count}}</p>
    <!--语法糖 v-on: 相当于 @ -->
    <input type="text" @focus="onFocused">

</div>

<script>
    let app = new Vue({
        el:'#app',
        data:{
            count:0
        },
        methods:{
            addCount:function () {
                this.count +=1;
            },
            disCount(){
            //this.count相当于app.count
                app.count -=1;
            },
            onFocused(){
                alert('输入框聚焦了...');
            }
        }
    })
</script>
</body>

浏览器效果图：

在这里插入图片描述

v-model 表单输入绑定

表单input双向绑定

代码演示：

<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
    用户名：<input type="text" v-model="name" placeholder="username">
    <p>username: {{name}}</p>
    密码：<input type="password" v-model="pass" placeholder="password">
    <p>password: {{pass}}</p>
</div>

<script>
    let app = new Vue({
        el:'#app',
        data:{
            name:'tom',
            pass:''
        }
    })
</script>
</body>

浏览器效果图：
在这里插入图片描述
当在密码框中输入密码时：

表单复选框绑定
代码演示：

<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
    <!--单个复选框绑定-->
    <input type="checkbox" id="checkbox"v-model="checked"> Java
    <label for="checkbox">{{ checked }}</label> <br>
    <!--多个复选框，绑定到同一个数组：选中的情况下会把value的值赋给数组-->
    <input type="checkbox" id="jack" value="Jack1" v-model="checkedNames"> Jack <br>
    <input type="checkbox" id="tom" value="Tom1" v-model="checkedNames"> Tom <br>
    <input type="checkbox" id="anne" value="Anne1" v-model="checkedNames"> Anne <br>
    <span>选择了： {{checkedNames}}</span>

</div>

<script>
    let app = new Vue({
        el:'#app',
        data:{
            checked:true,
            checkedNames:[]
        }
    })
</script>
</body>

浏览器效果图：

在这里插入图片描述
表单单选按钮绑定

代码演示：

<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="main">
    <input type="radio" id="one" value="选择了--->One" v-model="picked"> One <br>
    <input type="radio" id="two" value="选择了--->Two" v-model="picked"> Two <br>
    <span>Picked: {{ picked }}</span>
</div>

<script>
    //实例化一个vue对象
    let app = new Vue({
        //el表示vue实例与标签元素进行绑定
        el: '#main',
        //data：存放数据
        data: {
            picked:''
        }
    })
</script>
</body>

浏览器效果图：
在这里插入图片描述
表单选择框绑定

v-bind:用于绑定数据和元素属性,任何属性都可以被绑定，例如：src属性、class属性、href属性

语法糖：

v-bind: 相当于 :

代码演示：

<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
    <select v-model="selected">
        <option value="" disabled>请选择</option>
        <!--<option value="广东省">GD</option>
        <option value="山东省">SD</option>
        <option value="河南省">HN</option>-->
        <!--语法糖：v-bind: 等价 :-->
        <option v-for="option in options" v-bind:value="option.value">
            {{option.text}}
        </option>
    </select>

    <span>选择了： {{selected}}</span>
</div>

<script>
    let app = new Vue({
        el:'#app',
        data:{
            selected:'',
            options:[{value:'广东省',text:'GD'},{value:'山东省',text:'SD'},{value:'河南省',text:'HN'}]
        }
    })
</script>
</body>

浏览器结果：
在这里插入图片描述

v-bind 绑定 HTML Class

1、布尔值给class动态绑定

代码演示：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            font-size: 30px;
        }
        .c2 {
            background-color: aqua;
        }
    </style>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
    <!--布尔值给class动态绑定-->
    <!-- 语法糖：v-bind: 等价 :-->
    <div :class="{ c1:flag1,c2:flag2 }">容器1</div>
</div>

<script>
    let app = new Vue({
        el:'#app',
        data:{
            flag1:true,
            flag2:true
        }
    })
</script>
</body>

结果：

在这里插入图片描述

2、使用数组语法动态绑定class

代码演示：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            font-size: 30px;
        }
        .c2 {
            background-color: yellow;
        }
    </style>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
    <!--2.数组语法-->
    <!-- 语法糖：v-bind: 等价 :-->
    <div :class="[cFlag1,cFlag2]">容器2</div>
</div>

<script>
    let app = new Vue({
        el:'#app',
        data:{
            cFlag1:'c1',
            cFlag2:'c2'
        }
    })
</script>
</body>

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

v-bind 绑定内联样式

对象语法

方式一：
代码演示：

<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="main">
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">容器</div>
</div>

<script>
    //实例化一个vue对象
    let app = new Vue({
        //el表示vue实例与标签元素进行绑定
        el: '#main',
        //data：存放数据
        data: {
            activeColor: 'red',
            fontSize: 30
        }
    })
</script>
</body>

结果：
在这里插入图片描述
方式二：(推荐)

代码：

<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="main">
    <div v-bind:style="obj">容器</div>
</div>

<script>
    //实例化一个vue对象
    let app = new Vue({
        //el表示vue实例与标签元素进行绑定
        el: '#main',
        //data：存放数据
        data: {
            obj:{
                color: 'green',
                fontSize: '30px'
            }
        }
    })
</script>
</body>

结果：
在这里插入图片描述
数组语法
代码：

<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="main">
<!--    <div v-bind:style="obj">容器</div>-->
    <div v-bind:style="[obj1,obj2]">容器</div>
</div>

<script>
    //实例化一个vue对象
    let app = new Vue({
        //el表示vue实例与标签元素进行绑定
        el: '#main',
        //data：存放数据
        data: {
            obj1:{
                color: 'green',
                fontSize: '30px'
            },
            obj2:{
                backgroundColor:'red'
            }
        }
    })
</script>
</body>

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

爱喝椰汁的木木

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue简介以及基础语法的使用

简介Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，发布于 2014 年 2 月。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库（如：vue-router，vue-resource，vuex）或既有项目整合。MVVM 模式的实现者Model：模型层，在这里表示 JavaScript 对象View：视图层，在这里表示 DOM（HTML 操作的元素）ViewModel：连接视图和数据的中
复制链接

扫一扫

专栏目录