您的位置: 首页  >  文章  >  Vue补充

Vue补充

分类: 文章 • 2025-04-19 09:16:10

1.MVVM模式

     M：即Model，模型，包括数据和一些基本操作

     V：即View，视图，页面渲染结果

     VM：即View-Model，模型与视图间的双向操作（无需开发人员干涉）

在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。

而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的：

  • 只要我们Model发生了改变，View上自然就会表现出来。

  • 当用户修改了View，Model中的数据也会跟着改变。

把开发人员从繁琐的DOM操作中解放出来，把关注点放在如何操作Model上。

2.在IDEA下面创建一个Static Web工程，点击下面的terminal，进行npm安装

(1)先输入：npm init -y 进行初始化

Vue补充

(2)安装Vue，输入命令：npm install vue --save

Vue补充

3.入门案例

<body>
    <div id="app">
        <h2>{{name}}，非常帅！！！</h2>
    </div>
</body>
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
    // 创建vue实例
    var app = new Vue({
        el:"#app", // el即element，该vue实例要渲染的页面元素
        data:{ // 渲染页面需要的数据
            name: "峰哥"
        }
    });

</script>

  • 首先通过 new Vue()来创建Vue实例

  • 然后构造函数接收一个对象，对象中有一些属性：

    • el：是element的缩写，通过id选中要渲染的页面元素，本例中是一个div

    • data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中

      • name：这里我们指定了一个name属性

  • 页面中的h2元素中，我们通过{{name}}的方式，来渲染刚刚定义的name属性。

4.v-model:双向渲染，在表单元素中使用。

<body>
    <div id="app">
        <input type="text" v-model="num">
        <h2>
            {{name}}，非常帅！！！有{{num}}位女神为他着迷。
        </h2>
    </div>
</body>

Vue补充

<div id="app">
    <input type="checkbox" v-model="language" value="Java" />Java<br/>
    <input type="checkbox" v-model="language" value="PHP" />PHP<br/>
    <input type="checkbox" v-model="language" value="Swift" />Swift<br/>
    <h1>
        你选择了：{{language.join(',')}}
    </h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            language: []
        }
    })
</script>

5.生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。

Vue补充

6.使用v-text和v-html指令来替代{{}} ，网速很慢的时候，会显示{{}}（插值闪烁），对用户很不友好。

v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出

v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染

相关推荐