认识vue

2024年1月9日 170次阅读 来源: 回不去的童年

知识点一：MVVM模式

MVVM之前：

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

MVVM之后：

   DOM操作完全封装起来：Model发生了改变，View上自然就会表现出来。用户修改了View，Model中的数据也会跟着改变。
   如图所示：

图片描述

知识点二：Node和NPM

NPM：

NPM是Node提供的模块管理工具，可以非常方便的下载安装很多前端框架，包括Jquery、AngularJS、VueJs都有。为了后面学习方便，我们先安装node及NPM工具。
步骤一：下载Node.js
完成后可以在控制台输入
node -v //查看版本命令
步骤二：查看npm
安装完成Node应该自带了NPM了，在控制台输入npm -v 命令查看：

知识点三：Vue入门

1.安装vue

步骤一：进入指定的目录
步骤二：输入`npm init -y`命令进行初始化
步骤三：安装vue，输入命令`npm install vue --save`
发现多了一个node_modules目录

2.vue渲染

<div id="app">
    <h2>{{name}} 非常帅</h2>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
// 生成一个Vue实例
var app = new Vue({
    el:"#app", // el,即element。要渲染的的页面元素
    data:{ // 数据
        name:"虎哥"
    }
})
</script>

解析：

1.首先通过 new Vue()来创建Vue实例
2.然后构造函数接收一个对象，对象中有一些属性：
    el：是element的缩写，通过id选中要渲染的页面元素，本例中是一个div。
    data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中。

3.双向绑定

在上面进行修改：
<div id=”app”>

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

</div>
对num进行绑定。

4.事件绑定

在页面添加：

<button v-on:click="num++">点我</button>
    原文作者：回不去的童年
    原文地址: https://segmentfault.com/a/1190000019031609
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞