Vue基础
1. VUE简介
MVVM思想
M:Model,模型,包括数据和一些基本操作
V:View,视图,页面渲染结果
VM:即View-Model,模型与视图之间的双向操作(无需开发人员干涉)
个人理解,像是消息中间件的原理,subscriber和publisher通过VM进行自动交互.
在MVVM之前,先要从后端获取数据模型,然后要通过DOM操作Model渲染到View中.
然后当用户操作视图,还要通过DOM获取View中的数据,然后同步到Model中.
而MVVM中的VM要做的事情就是把DOM操作完全封装起来,开发人员不用再关心Model和View之间如何互相影响的,
只需要将他们都与VM关联起来即可.
双向绑定:
·只要Model发生了变化,View上自然就会表现出来
·当用户修改了View,Model中的数据也会跟着改变
中文官网地址:
cn.vuejs.org
2. 安装
首先,Vue的运行需要Node.js的支持,就像Java需要JDK一样.
所以我们需要
- 先安装Node.js
http://nodejs.cn/download/
查看版本号,以确定是否安装成功
npm -v
- 初始化环境
安装 好Node.js后,新建一个目录,来作为我们学习的工作目录
E:\VueDemo
进入此目录,进行环境初始化,
npm init -y
执行成功后会再目录中生成一个package.json
的文件,npm安装时候回根据此文件来下载依赖,根maven原理类似.
- 执行安装
npm install vue
执行成功后会生成一个node_modules
目录
- 引入vue.js
这里可以使用自己喜欢的工具来操作,我这里用的是vscode
<script src="./node_modules/vue/dist/vue.js"></script>
当然你也可以忽略上面的所有安装操作,仅仅引入官方提供的js即可
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
3. Hello Word
<div id="app">
{
{message}}
</div>
let vm = new Vue({
el: "#app",
data: {
message: "Hello World"
}
});
这样我们就完成了一个Vue的Hello World,下面来解释一下.
首先上面的代码分为2部分,
- html部分,即View
- JavaScript部分,这其中的Vue实例,是vm,而数据data可以想成是Model.
vm通过el
与id为"app"
的页面元素实现关联,通过data
属性来与数据进行关联,这样我们只需要将数据拿到交给vm即可,整个数据的显示过程都由vm来控制,免去了我们认为的操作.使得我们可以真正的将注意力集中在View上.
{
{message}}
是vue的插值表达式,它将vm的data中key
为message
的数据的value显示在页面上.
{
{}}可以支持js语法,可以支持函数调用,但是必须是有返回结果的,但不能声明变量(let a = 2
)
4. v-text命令:
功能和插值表达式{
{}}
类似,都是用来显示内容的.
<div id="app" v-text="message"></div>
let vm = new Vue({
el: "#app",
data: {
message: "Hello World With v-text"
}
});
建议使用v-text
,原因是插值表达式在页面被完全渲染前会显示{
{message}}
这种样子,而v-text
在完全渲染前不会显示内容.
可以在浏览器按F12,找到NetWork,选择Slow 3G,就会出现下列状态.
v-html:
与v-text类似的命令,只不过它是用来将内容按照html标签的形式来解析的,而v-text只是显示文本内容.
<div id="app" v-text="h1"></div>
let vm = new Vue({
el: "#app",
data: {
h1: "<h1>Hello World!!!</h1>"
}
});
使用v-html
的效果:
<div id="app" v-html="h1"></div>
let vm = new Vue({
el: "#app",
data: {
h1: "<h1>Hello World!!!</h1>"
}
});
5. v-bind
vue几乎为html标签的任何原生属性都提供了v-bind
的支持,比如title
属性,可以用来在鼠标悬停时显示信息.(v-bind:xxx
,通常简写为:xxx
,即v-bind
可以省略,只留一个:
+属性即可)
<div id="app" v-bind:title="msg">鼠标来来来</div>
let vm = new Vue({
el: "#app",
data: {
msg: "悬停中~~~~~~~~~"
}
});
v-bind还特别为class
,和style
进行了进一步的支持.
.active {
font-size :xx-large
}
<div id="app" v-text="msg" v-bind:class="{active: isActive}"></div>
let vm = new Vue({
el: "#app",
data: {
msg: "v-bind演示用",
isActive: true
}
});
当isAvtive为true时,class为active,否则class为空.
v-bind:class="{active: isActive}"
让我们在F12
的Console
手动的更改一下isAvtive
的值,可以看到更改之后的值立即被响应到了页面的组件上,这就是前面说过的,我们只需要将view和data都绑定到vm即可,其他的vm都会帮我们来完成.
6. v-model
v-model
指令,是用来实现双向绑定的.前面我们见识过了从data的变化到view的动态响应,而要在次基础上实现从view的改变动态响应到data,则需要使用v-model
<div id="app">
<input type="text" v-model="msg"/>
<br>
<span v-text="msg"></span>
</div>
let vm = new Vue({
el: "#app",
data: {
//message: "Hello World With v-text"
msg: "v-mode演示用"
}
});
当我们在input
中输入内容,下面的展示内容也会跟着发生变化,此时的vm.msg
变成了input
框中的内容.
而当我们改变vm.msg
的值时,发现input
框中的内容也会跟着改变,这就是双向绑定的含义.
7. v-on
v-on
指令监听DOM事件,比如onclick
事件的监听:
<div id="app">
<button v-text="'我被点击了'+num+'次'" v-on:click="num++"></button>
</div>
let vm = new Vue({
el: "#app",
data: {
num: 1
}
});
每次点击都会触发num++
v-on:xxx
通常简写为@xxx
7.1 事件修饰符
在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求
尽管我们可以在方法中轻松实现这单,但更好的方式是:
方法只有纯粹的数据逻辑,而不是去处理DOM事件细节
为了解决这个问题,Vue.js为v-on提供了事件修饰符
修饰符是由点开头的指令后缀来标示的:
.stop: 阻止事件冒泡到父元素
.prevent: 阻止默认事件发生
.capture: 使用事件捕获模式
.self: 只有元素自身触发事件才执行(冒泡或捕获的都不执行)
.once: 只执行一次
7.2 按键修饰符
vue还为我们提供了特殊按键修饰符.常用的有如下内容
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right
举个简单的例子,上键++,下键–;
<div id="app">
<input type="text" @keyup.up="num++" @keyup.down="num--" :value="num"/>
</div>
let vm = new Vue({
el: "#app",
data: {
num: 1
}
});
7.3 组合键
除了单一键位之外,vue还提供了组合键的支持.
.ctrl
.alt
.shift
比如还是上面的例子,我们按shift+↑的时候对num进行+10,然后shift+↓的时候对num的值-10;
(不仅是2个键,多建的组合只要继续.xxx
就好了)
<input type="text" @keyup.up="num++" @keyup.down="num--"
@keyup.shift.up="num+=10" @keyup.shift.down="num-=10" :va