Vue简介和用法

小咪咪 2023-06-13 06:02 3阅读 0赞

## vue简介 ##

MVVM是前端视图层的概念，主要关注于视图层分离  
MVVM把前端的视图层，分为了 三部分 Model（数据）, View（视图） , VM ViewModel（驱动器，调度者）

**三大主流框架**：Angular.js、React.js 、Vue.js

**Vue.js** 是一套构建用户界面的框架，**只关注视图层**，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）

**Vue的特点：**

1.高效的数据绑定 	
    2.灵活的组件应用

**注意：** 函数必须在 Vue实例中的 methods 属性下添加，在 Vue.js 中，methods 被命名为方法，是调用对象上下文中的函数，还可以操作对象中包含的数据。

**用法**

（1）引入vue.js文件
    （2）在script标签中定义实例
    （3）在模板中写html代码

<script src="lib/vue-2.6.10.js"></script>
    //app相当于view视图模板，也相当于组件（之后介绍）
    <div id="app">
        <h1>{ { msg}}</h1>
        <button @click="msg='world hello'">change</button>
        <button @click="count('html')">添加</button>
    </div>
    <script>
    	//new Vue 实例相当于vm驱动器
    	var vm=new Vue({ 
    		el:"#app",	//定义vue的实例操作的范围
    		data:{ 	//数据，相当于model
    		   msg:"hello world"
    		},
    		methods:{ 
    			count(x){ 
    				this.msg=this.msg+x;	//this指向vue实例
    			}
    		}
    	})
    </script>
    
    效果：页面中输出 hello world，点击添加按钮内容变为 hello world html，
    	 每点击一次后边多一个 html ，点击change按钮内容变为 world hello

**一个页面可以有多个实例，此实例的data只在这个实例的范围内有用。**

发表评论取消回复

表情：

评论列表（有 0 条评论，3人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue简介和用法

vue简介 MVVM是前端视图层的概念，主要关注于视图层分离 MVVM把前端的视图层，分为了三部分 Model（数据）, View（视图） , VM ViewMod

小咪咪/ 2023年06月13日 06:02/ 0 赞/ 4 阅读

相关 Vue slot 用法

Vue 实现了一套内容分发的 API，将 `<slot>` 元素作为承载分发内容的出口。可以理解为模板中的占位符, 在实例化时用自定义标签元素替代. 本文基于Vue 2.0

约定不等于承诺〃/ 2022年10月01日 07:56/ 0 赞/ 114 阅读

相关 vue2和vue3中mixins的用法

mixin模式表面上看起来很安全。然而，通过合并对象来共享代码，由于它给代码增加了脆弱性，并且掩盖了推理功能的能力，因此成为一种反模式。 Composition API最聪

深碍√TFBOYSˉ_/ 2022年09月04日 09:48/ 0 赞/ 148 阅读

相关 HttpServlet类简介和简单用法

一, servlet 的三种模式 1.1 实现servlet 接口如果1个类要实现servlet接口.则要重写如下所有方法: void destro

水深无声/ 2022年08月07日 01:52/ 0 赞/ 196 阅读

相关 CFileDialog的用法和简介，读取多文件

MFC中使用CFile类和CFileDialog可以很简单的载入和保存文件…… CFileDialog文件选择对话框的使用：首先构造一个对象并提供相应的参数，构造函数原

灰太狼/ 2022年08月06日 00:12/ 0 赞/ 270 阅读

相关 Vue的props和$attrs用法

用过vue的都知道`props`这个属性，而`$attrs`也许会有好些小伙伴不了解，它是从vue2.4版本才推出的，为了简化父组件和孙组件的传值，使用方式如下： <

左手的ㄟ右手/ 2022年04月06日 08:05/ 0 赞/ 231 阅读

相关 vue基本用法

一、v-text与v-html.html v-html 可以解析标签，解析样式,v-text不能解析，只能原样输出 ![在这里插入图片描述][watermark_t

骑猪看日落/ 2022年01月22日 02:27/ 0 赞/ 241 阅读

相关 Vue 一些用法

v-model : 数据绑定（多数用于表单元素） ps:同时v-model支持双向数据绑定 v-for : 用于元素遍历 v-on:事件名称=“方法名” （事件绑定）

怼烎@/ 2021年12月22日 19:45/ 0 赞/ 302 阅读

相关 vue 中用法

1.v-for和data属性 <li v-for="(item, index) in message" v-on:click="addClassFun(inde

我不是女神ヾ/ 2021年12月03日 15:07/ 0 赞/ 408 阅读

相关 vue指令用法

vue指令指令式带有 `v-` 前缀的特殊特性`v-text`和`v-html`都属于指令将数据和dom做关联，当表达式的值改变时，响应式地作用在视图解决大胡子语法闪烁

桃扇骨/ 2021年07月25日 02:03/ 0 赞/ 479 阅读