Vue笔记

最新推荐文章于 2024-08-19 19:16:20 发布

艹民一G

最新推荐文章于 2024-08-19 19:16:20 发布

阅读量137

点赞数

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/qq_29532651/article/details/79692454

版权

Vue 专栏收录该内容

7 篇文章

订阅专栏

Vue.js是一款轻量级的MVVM框架，专为构建用户界面设计。它支持数据绑定、组件化开发及虚拟DOM等特性，适用于开发大型单页应用(SPA)，同时优化了移动端用户体验。本文介绍了Vue.js的基本概念、核心特性和常用指令。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue.js是一套构建用户界面（view)的的MVVM框架，
vue.js的核心库只关注视图层，并且非常容易学习，容易与其他库或已有项目整合。

vue.js的产生核心是为了解决：
1.解决数据绑定问题
2.为了开发大型单页面应用（SPA:single page application）

angular.js中对PC端的支持比较好，但是对移动端支持一般，
而vue.js主要支持移动端，也支持PC端。
3.它还支持组件化，也就是可以将页面封装成若干个组件，采用积木式编程，使页面复用度达到最高。

特性：
1.MVVM模式
M：model，业务模型，处理数据，提供数据
V：view ，用户界面，用户视图
业务模型model中的数据发生变化时，用户视图view也会随之改变，反之也成立。
2.组件化
3.指令系统
4.vue.js2.0开始支持虚拟DOM。虚拟DOM可以提升页面的刷新度。

<script>
var app=new Vue({
el:'#demo', //声明vue.js管理的边界
data:{
name:'zhangsan', //存放显示在页面中的数据,需要是一个对象
}
});
</script>
<body>
<h3 id="demo">{{name}} ,你好</h3>
</body>

vue.js指令：
1. v-text 相当于{{}}
如：<h3 class="demo" v-text="'name+,你好'"></h3>

2.v-html
显示图片：<div id="demo" v-html="msg"></div>
new Vue({
el:'#demo',
data:{
msg:'<img src="a.jpg"/>',
}
});

3.v-bind 控制标签属性
<a v-bind:href="hrefValue" id="demo></a>
<img v-bind:src="source"/>
<div id="demo" v-bind:style="styles">样式</div>

new Vue({
el:'#demo',
data:{
hrefValue:'http://baidu.com',
source:'a.jpg',
styles:{
color:'red',
fontSize:'20px',
fontWeight:'normal',
}
}
});

4.v-show 通过判断是否显示该内容,true为显示

data:{
seen:true,
}

5.v-if v-else