Vue语法

最新推荐文章于 2023-10-23 20:58:40 发布

张小驰出没

最新推荐文章于 2023-10-23 20:58:40 发布

阅读量158

点赞数

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

本文链接：https://blog.csdn.net/qq_43740362/article/details/115794463

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue语法

MVVM

1.什么是MVVM

MVVM (Model-View-ViewModel) 是一种软件架构设计模式，由微软WPF (用于替代WinForm，以前就是用这个技术开发桌面应用程序的)和Silverlight (类似于Java Applet,简单点说就是在浏览器上运行的WPF)的架构师Ken Cooper和Ted Peters 开发，是一种简化用户界面的事件驱动编程方式。由John Gossman (同样也是WPF和Silverlight的架构师)于2005年在他的博客上发表。

MVVM 源自于经典的MVC (ModI-View-Controller) 模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用，其作用如下:

该层向上与视图层进行双向数据绑定
向下与Model层通过接口请求进行数据交互

2.MVVM好处

MVVM模式和MVC模式一样，主要目的是分离视图(View)和模型(Model),有几大好处：

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

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

第一个Vue程序

1.创建一个空的新文件夹，用idea引入

2**.创建一个新的html页面**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
</html>

3.引入Vue.js

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

4.编写项目

的id为 `vue` ，进行一个el绑定，data中`message`为固定值，在被绑定的div中使用`{{message}}`显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="vue">
        {{message}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#vue",
            data: {
                message: "第一个Vue项目"
            }
        });
    </script>
</body>
</html>

直接默认浏览器打开该静态页面:

Vue基本语法

1.v-bind

现在数据和DOM已经被建立了关联，所有的东西都是响应式的。我们在控制台操作对象的属性，界面可以实时更新。

我们可以使用v-bind来绑定元素属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div id="vue">
        <span v-bind:title="message">停这儿别动，这里有个提示信息！</span>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#vue",
            data: {
                message: "第一个Vue项目"
            }
        });
    </script>
</body>
</html>

2. v-if、v-else

message的值为 B ，在 div 中利用 v-if 进行判断，

如果为 message==‘A’ 则显示 A；
如果为 message==‘B’ 则显示 B；
如果不是 A 也不是 B ，则显示 C；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="vue">
        <h1 v-if="message=='A'">A</h1>
        <h1 v-else-if="message=='B'">B</h1>
        <h1 v-else>C</h1>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#vue",
            data: {
                message: "B"
            }
        });
    </script>
</body>
</html>

3. v-for

data中加入 items 数组信息，然后利用 v-for 进行循环输出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="vue">
        <li v-for="item in items">
            姓名：{{item.name}}，年龄：{{item.age}}
        </li>
    </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#vue",
            data: {
                items: [
                    {name: "zc", age: 20},
                    {name: "dongdong", age: 10},
                    {name: "lili", age: 16}
                ]
            }
        })
    </script>
</body>
</html>

4. v-on 事件绑定

data中message信息为boom！！
methods对象中绑定方法
被绑定的div中加入button，利用 v-on 调用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="vue">
        <button v-on:click="sayHi">Click Me</button>
    </div>
    </body>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#vue",
            data: {
                message: "boom！！！！"
            },
            methods: {
                //方法必须绑定在Vue的Methods对象中，v-on:事件
                sayHi: (function () {
                    alert(this.message)
                })
            }
        })
    </script>
</body>
</html>

5. 双向绑定 v-model

在Vue.js 中，如果使用vuex ，实际上数据还是单向的，对于我们处理表单，Vue.js的双向数据绑定用起来就特别舒服了

即两者并不互斥，在全局性数据流使用单项,方便跟踪;局部性数据流使用双向，简单易操作。

你可以用v-model指令在表单 <input>、<textarea> 及<select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

注意：v-model会忽略所有元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源，你应该通过JavaScript在组件的data选项中声明。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="vue">
        输入框:
        <input type="text" value="" v-model="text">
        <p>value:{{text}}</p>
        <br>
        文本域：
        <textarea v-model="textarea"></textarea>
        <p>value:{{textarea}}</p>
        <br>
        单选框：
        <input type="radio" name="sex" value="男" v-model="radio">男
        <input type="radio" name="sex" value="女" v-model="radio">女
        <p>value:{{radio}}</p>
        <br>
        下拉框：
        <select v-model="selected">
            <option value="" disabled>-请选择-</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <p>value:{{selected}}</p>
    </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#vue",
            data: {
                text: "",
                textarea:"",
                radio: "",
                selected: ""
            }
        })
    </script>
</body>
</html>

6.Vue组件

组件是可复用的Vue实例，说白了就是一组可以重复使用的模板，跟JSTL的自定义标签、Thymeleaf的th:fragment 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织：

基础版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="vue">
        <zc></zc>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script>
        Vue.component("zc",{
            template: '<h1>template</h1>'
        })
        var vm = new Vue({
            el: "#vue"
        })
    </script>
</body>
</html>

拓展版

绑定div，data中加入数组信息
添加vue组件 zc
利用 v-for 循环数组， v-bind 绑定数组
在vue组件中用 props 接收，再添加到 template 中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="vue">
        <zc v-for="item in items" v-bind:zc="item"></zc>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script>
        Vue.component("zc",{
            props: ['zc'],
            template: '<li>{{zc}}</li>'
        })
        var vm = new Vue({
            el: "#vue",
            data: {
                items: ['Java','Python','Php']
            }
        })
    </script>
</body>
</html>