Vue简单介绍
程序员文章站
2022-03-20 23:29:39
Vue(Vue.js的简称)是前端的主流框架之一,和Angular.js、React.js一起,成为前端三大主流框架,Vue.js是一套构建用户界面的框架,只关注视图层,它不仅容易上手,还便于与第三方库或既有项目整合(Vue有配置的第三方类库,可以整合起来做大型项目的开发)。框架和库的区别:框架是一套完整的解决方案,对项目侵入性大,项目如需更换框架,则需重新架构整个项目库(插件)提供一个......
Vue(Vue.js的简称)是前端的主流框架之一,和Angular.js、React.js一起,成为前端三大主流框架,Vue.js是一套构建用户界面的框架,只关注视图层,它不仅容易上手,还便于与第三方库或既有项目整合(Vue有配置的第三方类库,可以整合起来做大型项目的开发)。
先来说明几个概念:
框架和库的区别:
- 框架是一套完整的解决方案,对项目侵入性大,项目如需更换框架,则需重新架构整个项目
- 库(插件)提供一个小功能,对项目的侵入性较小,如果某个库无法完成某些需求,可以很容易的切换到其他库来满足需求
MVC和MVVM:
- MVC(模型(model)-视图(view)-控制器(controller)),model是数据管理者,要么是数据库中存储的数据,要么是从服务器中获取的数据;view是用户在屏幕上看到的结构、布局和外观;将两者联系起来的是controller,通过controller将model里的数据放到view中,或从view中获取数据存入model。
- MVVM(Model-View-ViewModel),model是与view界面对应的数据对象,view是用户在屏幕上看到的结构、布局和外观,ViewModel是一个绑定器,在view和model之间进行通信。
- vue基本代码与MVVM之间的对应关系:
<body>
<!--vue实例所控制的这个元素区域,就是MVVM的V-->
<div id="app">
<p>{{msg}}</p>
</div>
<script>
//创建一个vue实例,当导入包之后,在浏览器内存就多了一个vue构造函数
//new出来的vm对象即为MVVM的VM绑定器
var vm = new Vue({
el: '#app', //el属性表示控制的是页面上哪个区域
//这里的data就是MVVM的M,专门用来保存每个页面的数据
data: {
msg: '欢迎学习vue'
//通过vue提供的指令,很方便的把数据渲染到页面上,不需要手动操作DOM元素
}
})
</script>
</body>
- MVC和MVVM一样,都是为了将view和model分离,但MVC需要对DOM进行操作,这样页面就有大量DOM绑定与监听类的操作;MVVM通过数据双向绑定让数据自动地双向同步,V修改数据自动同步M、M修改数据自动同步到V,无需手动操作DOM。
- 两者详细的比较可参考https://www.jianshu.com/p/b0aab1ffad93
vue的几种指令:
- v-cloak:解决插值表达式(即上面例子中的“{{msg}}”)闪烁的问题。在上面的例子中,当网速很慢时,页面会出现‘{{msg}}’闪烁而过的一瞬间,带给用户不好的体验,可用v-cloak来解决这个问题,在css样式中设置其为不可见,当加载完时,msg中的数据也能正常显示。
[v-cloak] {
display:none;
}
<div id="app">
<p v-cloak>{{msg}}</p>
</div>
- v-text:用来渲染普通文本(即无法解析出文本中的html代码),默认v-text无闪烁问题,v-text会覆盖元素中原本的内容,但是插值表达式只会替换自己的这个占位符,不会把整个元素的内容清空。
<body>
<div id="app">
<p>+++{{msg}}---</p>//插值表达式前后的内容不会被覆盖,会显示出来
<h4 v-text="msg">======</h4>//里面的======会被覆盖,不会显示出来
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '欢迎学习vue'
}
})
</script>
</body>
- v-html:和v-text类似,不同之处在于v-html可将文本中的html代码解析出来
<body>
<div id="app">
<p v-cloak>{{msg2}}</p>
<div v-text="msg2"></div>
<div v-html="msg2"></div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '欢迎学习vue',
msg2: '<h1>hello world</h1>'
}
})
</script>
</body>
页面显示:
- v-bind:提供的用于绑定属性的指令,v-bind:可简写为“:要绑定的属性值”
<body>
<div id="app">
<input type="button" value="按钮" title="mytitle">
<input type="button" value="按钮" v-bind:title="mytitle">
<input type="button" value="按钮" :title="mytitle + '123'">
<!--第一个title为“mytitle”,第二个title为“这是一个自己定义的title”,第三个title为“这是一个自己定义的title123”,
因为v-bind将“”里面的内容作为js代码解析,所以字符串变量加上一个字符串并不会报错-->
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
mytitle: '这是一个自己定义的title'
}
})
</script>
</body>
- v-on:事件绑定机制,v-on:的缩写为@
<body>
<div id="app">
<input type="button" value="按钮" v-on:click="show">
<input type="button" value="按钮" v-on:mouseover="show">
<input type="button" value="按钮" @mouseover="show">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
mytitle: '这是一个自己定义的title'
},
methods: {
//这个methods属性中定义了当前vue实例所有可用的方法
show: function() {
alert("今天要好好学习呀")
}
}
})
</script>
</body>
跑马灯效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>跑马灯效果</title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="demo">
<input type="button" value="跑起来" @click="go">
<input type="button" value="立定" v-on:click="stop">
<h3>{{mes1}}</h3>
</div>
<script>
//在VM实例中,如果想获取data上的数据或想调用methods中的方法,必须通过this来进行访问
var lang = new Vue({
el: '#demo',
data: {
mes1: '向左转,跑步走~~!',
intervalid: null //在data上定义定时器id
},
methods: {
go: function() {
if (this.intervalid != null) return;
//此时应该用箭头函数,如果用function就会出现this指向问题,用箭头函数,this还是指向外部实例
this.intervalid = setInterval(() => {
//获取第一个字符
var start = this.mes1.substring(0, 1);
//获取后面所有字符
var end = this.mes1.substring(1);
//进行新的字符串连接
this.mes1 = end + start;
//注意:VM实例会监听自己身上的data所有数据改变,只要数据发生了变化,就会自动把最新数据同步到页面中去
}, 400)
},
stop: function() {
//停止定时器
clearInterval(this.intervalid);
this.intervalid = null;
}
}
})
</script>
</body>
</html>
本文地址:https://blog.csdn.net/qq_46469137/article/details/107461197
上一篇: C++COM库(tlb文件)调用方法详解
下一篇: vue 微信浏览器缓存问题解决方案