vue前端框架快速入门,看完就会简单使用了
vue是什么
vue是一个响应式数据驱动的JavaScript框架,其实就是一个js文件。
通俗来说,传统的JavaScript,以及jQuery都是基于元素操作的,干啥都要先通过id、通过类名、或者通过标签名获取元素,然后才能进行下一步操作;而vue采取的是基于数据的开发方式,把重心放到数据上,页面只是数据的展示,元素的表现会随着数据的变动而跟着变动。
MVVM模式(了解)
对这一部分不感兴趣的盆友可以略过,对vue的学习没有影响,只是加深理解
MVC(Model-View-Controller)
传统MVC模式的工作原理:View 传送指令到 Controller,Controller 完成业务逻辑后,要求 Model 改变数据状态,Model 将新的数据发送到 View,View重新渲染页面,用户得到反馈。
MVVM(Model-View-ViewModel)
在MVVM模式中:View的变动,自动反映在ViewModel上,ViewModel 的状态改变也可以自动传递给 View,即所谓的数据双向绑定。同样,Model 和 ViewModel 之间的交互也是双向的,因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。
MVVM模式中最核心是ViewModel层,负责转换 Model 中的数据对象来让数据变得更容易管理和使用,该层向上与View 层进行双向数据绑定,向下与 Model 层通过接口请求进行数据交互,从而把Model和View关联起来:把Model的数据变化同步到View显示出来,把View的数据修改同步回Model。
MVC中所有通信都是单向的,而MVVM实现了View和ViewModel的双向数据绑定。
Vue.js就是当下流行的 MVVM 框架之一
三步使用vue
导入vue.js
在html文件头中引入vue.js文件,可以自己下载,也可以直接引用下面这行
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
在自己的js中创建Vue实例对象
$(function () {
var app = new Vue({
el:'#app',
data:{
message:"Hello Vue!"
}
})
})
- el属性:挂载点,vue实例的作用范围是el属性命中的元素及其内部的后代元素。el属性值设置css选择器,包括#id选择器、.类选择器、标签选择器,但一般建议使用id选择器。只支持双标签,不支持单标签(如img),但不能使用在html和body标签上。
- data属性:需要在页面中渲染的数据。
使用模板语法把数据渲染到页面上
<div id="app">
{{ message }}
</div>
模板语法其实就是一对双大括号{{ }}
data可以是基本数据类型、数组、对象
<div id="app">
{{ message }}
<h2>{{ info.name }}:{{ info.age }}</h2>
<ul>
<li>{{ location[0] }}</li>
<li>{{ location[1] }}</li>
<li>{{ location[2] }}</li>
</ul>
</div>
$(function () {
var app = new Vue({
el:'#app',
data:{
message:"Hello Vue!",
info:{
name:'lpr',
age:20
},
location:['XX省','XX市','XX县']
}
})
})
vue指令
v-text
设置标签的文本值
注意和直接用{{ }}
的区别:使用v-text指令后,标签内的文本就没有了
<div id="app">
<h2 v-text="message+'拼接'">其他字不在了</h2>
<h2>其他字还在{{ message + "拼接" }}</h2>
</div>
$(function () {
var app = new Vue({
el:'#app',
data:{
message:"Hello Vue!"
}
})
})
结果展示:
v-html
设置元素的innerHTML值,和v-text的区别是,它可以解析html标签
<div id="app">
<p v-text="content"></p>
<p v-html="content"></p>
</div>
$(function () {
var app = new Vue({
el:'#app',
data:{
content:"<a href='https://www.baidu.com'>百度</a>"
}
})
})
结果展示:
v-on
为元素绑定事件,可以简写为“@”
- methods属性:需要为页面中元素绑定的事件处理函数。
<div id="app">
<div>我最喜欢吃{{ food }}</div>
<input type="button" value="v-on点击事件" v-on:click="fun">
<input type="button" value="v-on点击事件简写" @click="fun">
<input type="button" value="v-on双击事件简写" @dblclick="fun">
<input type="button" value="换个吃的" @click="changeFood">
</div>
$(function () {
var app = new Vue({
el:'#app',
data:{
food:"番茄炒鸡蛋"
},
methods:{
fun:function () {
alert('执行fun方法')
},
changeFood:function () {
//获取当前Vue实例定义在data中的数据food
this.food = "青椒土豆丝"
}
}
})
})
实现效果:点击“换个吃的”按钮,触发“changeFood”事件处理函数,data中的food变量值变化,页面中{{ food }}
的显示也同步发生变化
事件处理函数传递参数
<div id="app">
<input type="button" value="点击" @click="add(1,2)">
</div>
$(function () {
var app = new Vue({
el:'#app',
methods:{
add:function (num1,num2) {
alert(num1+num2)
}
}
})
})
事件修饰符
在此只举一个例子说明怎么使用,感兴趣的盆友可以自行百度更多事件修饰符
@keyup.enter:键盘弹起事件,且限定弹起的按键是“enter”回车键
<div id="app">
<input type="text" @keyup.enter="sayHi">
</div>
$(function () {
var app = new Vue({
el:'#app',
methods:{
sayHi:function () {
alert($('input').val())
}
}
})
})
v-show
根据表达式的真假,切换元素的显示和隐藏,原理是修改元素的display
<div id="app">
<img src="images/1.jpg" v-show="true">
<img src="images/2.jpg" v-show="isShow">
<img src="images/3.jpg" v-show="age>=18">
</div>
$(function () {
var app = new Vue({
el:'#app',
data:{
isShow:false,
age:30
}
})
})
运行结果:第一张和第三张图片显示,第二张图片隐藏
v-if
根据表达式的真假,控制DOM元素是否显示,原理是操作DOM树的添加移除元素
<div id="app">
<input type="button" value="切换" @click="toggleShow">
<p v-if="isShow">我是一个p标签</p>
</div>
$(function () {
var app = new Vue({
el:'#app',
data:{
isShow:false
},
methods:{
toggleShow:function () {
this.isShow = !this.isShow
}
}
})
})
实现效果:点击“切换”按钮,触发“toggleShow”事件处理函数,data中的isShow布尔变量值取反,页面中<p>
标签的显示与隐藏也同步发生切换
v-show和v-if的使用选择:如果一个元素需要频繁切换显示与隐藏,建议使用v-show,因为不需要操作DOM树,开销较小
v-bind
为元素绑定属性 v-bind:属性名=表达式,可以简写为“ : ”
表达式内部可以拼接字符串,可以写三元表达式,可以是一个对象
<div id="app">
<input type="button" @click="toggleActive" value="加边框">
<img v-bind:src="img_src">
<!--v-bind简写-->
<img :src="img_src" :title="img_title+'!!!'" >
<img :src="img_src" :class="isActive?'active':''">
<img :src="img_src" :class="{active:isActive}">
</div>
.active{
border: 2px solid red;
}
$(function () {
var app = new Vue({
el:'#app',
data:{
img_src:'images/123.jpg',
img_title:'图片标题',
isActive:false
},
methods:{
toggleActive:function () {
this.isActive = !this.isActive
}
}
})
})
v-for
根据数据生成列表结构
<div id="app">
<input type="button" value="添加数据" @click="add">
<input type="button" value="移除数据" @click="remove">
<ul>
<li v-for="(item,index) in arr">{{index+1}}:{{item}}</li>
<li v-for="(item,index) in objArr">{{item.name}}:{{item.age}}</li>
</ul>
</div>
$(function () {
var app = new Vue({
el:'#app',
data:{
arr:['北京','上海','广州','深圳'],
objArr:[
{name:'小明',age:22},
{name:'小红',age:20}
]
},
methods:{
add:function () {
this.arr.push('西安')
},
remove:function () {
this.arr.shift()
}
}
})
})
运行结果:第一张图为初始状态,第二张图为添加和移除分别点了一次后的状态
![](https://i-blog.csdnimg.cn/blog_migrate/1d3ca952fab6daa8c36dac0fede3a148.png)
![](https://i-blog.csdnimg.cn/blog_migrate/6d29fc924a3984060b3922e2354c5320.png)
v-model
获取和设置表单元素的值(双向数据绑定)
<div id="app">
<input type="text" v-model="message" @keyup.enter="sayHi">
<p>检测message的同步修改:{{ message }}</p>
</div>
$(function () {
var app = new Vue({
el:'#app',
data:{
message:'BugFrog'
},
methods:{
sayHi:function () {
alert(this.message)
}
}
})
})
实现效果:用户修改<input>
文本框的输入值,<p>
标签中的{{ message }}
同步修改;按下回车键,弹出message变量值也就是其绑定的<input>
的当前输入值