Vue语法

张小驰出没

发布于 2021-04-19 17:25:49

3120

发布于 2021-04-19 17:25:49

文章被收录于专栏：用户8506532的专栏用户8506532的专栏

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页面**

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
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}}`显示

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
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来绑定元素属性

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
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；

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
    <div id="vue">
        <h1 v-if="message=='A'">Ah1>
        <h1 v-else-if="message=='B'">Bh1>
        <h1 v-else>Ch1>
    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 进行循环输出

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
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 调用方法

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
    <div id="vue">
        <button v-on:click="sayHi">Click Mebutton>
    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指令在表单、</code> 及<code><select></code> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。 <blockquote> 注意：v-model会忽略所有元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源，你应该通过JavaScript在组件的data选项中声明。 </blockquote> <pre><code class="prism language-html"><!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> </code></pre> <img src="https://img-blog.csdnimg.cn/img_convert/e43dd29cad4d4ac05040c90fcdb752d3.png" alt="5"> <h3><a id="6Vue_296"></a>6.Vue组件</h3> 组件是可复用的<code>Vue</code>实例，说白了就是一组可以重复使用的模板，跟JSTL的自定义标签、Thymeleaf的<code>th:fragment</code> 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织： <img src="https://img-blog.csdnimg.cn/img_convert/faef7c1b107f971601a25280314b4865.png" alt="6"> <h4><a id="_304"></a>基础版</h4> <pre><code class="prism language-html"><!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> </code></pre> <img src="https://img-blog.csdnimg.cn/img_convert/91624758732497f74fea299a9a3a6219.png" alt="7"> <h4><a id="_332"></a>拓展版</h4> <ul><li>绑定div，data中加入数组信息</li><li>添加vue组件 zc</li><li>利用 v-for 循环数组， v-bind 绑定数组</li><li>在vue组件中用 props 接收，再添加到 template 中</li></ul> <pre><code class="prism language-html"><!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> </code></pre> <img src="https://img-blog.csdnimg.cn/img_convert/e829fbecae3b7ff831a1334c71e4bec4.png" alt="8"> <blockquote> 个人博客为： <a href="https://www.moyuzc.cn/">MoYu’s Github Blog</a> <a href="https://moyu-zc.gitee.io/">MoYu’s Gitee Blog</a> </blockquote>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2021-04-17 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html