这是我在学习Vue基础的时候总结的文章。具体可参考Vue官方文档:Vue2.X官方文档
以下是使用CDN进行Vue的学习,也就是直接通过标签引入Vue文件,即可使用。
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
new Vue({
el: '#vue-app',
data: {
name: '29',
age: 21,
blog: '个人博客'
},
methods: {
sing: function (str) {
return this.name + str;
}
}
})
el:是element,需要获取的元素,一定是HTML中的根容器元素。
data:是用于存取数据的。
methods:用来存储各种方法
v-bind:href 绑定值
在文档上编写了{{}},但是实际上的页面展示是没有两个花括号的,那是因为Vue会将{{}}里面的值放入一个虚拟DOM里面,通过虚拟DOM操作,把需要的值插入到真实DOM里面。
v-html内可显示标签,用标签包括起来,单纯的{{}}是不会显示文本标签的。
<p v-html="blog">p>
blog: '个人博客'
事件就是要做的事情在程序运行过程中能够不停地去调用一个方法,然后去改变相应的内容
使用v-on:click触发点击事件:
<button v-on:click="add">涨一岁button>
<button v-on:click="subtract">减一岁button>
new Vue({
el: '#vue-app',
data:
age: 21
},
methods: {
add: function (inc) {
this.age++;
},
subtract: function (dec) {
this.age--;
}
}
})
当
<p>{{sing('会唱歌')}}p>
这时候如果没有(),那它解析的是sing是个属性,而不是方法,所以要加括号
v-on:click=””内的方法可加括号,也可不加。因为Vue知道v-on:clic内一定绑定的是一个方法,所以不给括号也会调用默认的方法。(给括号就是手动调用,不给括号就是回调函数)
传参需要括号。
v-on:dblclick
<button v-on:dblclick="subtract">减一岁button>
<button v-on:click="add(1)">涨一岁button>
<button v-on:click="subtract(1)">减一岁button>
<button v-on:dblclick="subtract(10)">减十岁button>
new Vue({
el: '#vue-app',
data: {
age: 21
},
methods: {
add: function (inc) {
this.age += inc;
},
subtract: function (dec) {
this.age -= dec;
}
}
})
<div id="canvas" @mousemove="updateXY">
{{X}},{{Y}}
div>
new Vue({
el: '#vue-app',
data: {
X: 0,
Y: 0
},
methods: {
updateXY: function (event) {
this.X = event.offsetX;
this.Y = event.offsetY;
}
}
)}
v-xxxx: ====》》》
@
法一:
在事件处理程序中调用event.preventDefault()或event.stopPropagation()
<div id="canvas" @mousemove="updateXY">
{{X}},{{Y}} - <span @mousemove="stop">Stop Movingspan>
div>
new Vue({
el: '#vue-app',
data: {
X: 0,
Y: 0
},
methods: {
stop: function (event) {
event.stopPropagation();
}
}
)}
缺点但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。
法二:
Vue.js为v-on提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。
直接使用 @mousemove.stop
<a v-on:click.once="doThis">a>
<a v-on:click.stop="doThis">a>
<form v-on:submit.prevent="onSubmit">form>
<a v-on:click.stop.prevent="doThat">a>
<form v-on:submit.prevent>form>
<div v-on:click.capture="doThis">...div>
<div v-on:click.self="doThat">...div>
法一:
ref:ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件
名字:<input ref="name" v-on:keyup="enter_name" />
年龄:<input ref="age" v-on:keyup="enter_age"/>
new Vue({
el: '#vue-app',
data: {
name: 'hcq',
age: 21
},
methods: {
enter_name: function () {
this.name = this.$refs.name.value;
},
enter_age: function () {
this.age = this.$refs.age.value;
}
}
})
法二:
使用v-model
名字:<input v-model="name" />
年龄:<input v-model="age"/>
v-model的工作流程
①v-model相当于相绑定了name属性,如果name有内容且已经绑定了,就会显示到元素上。把属性绑定到元素上,
②input内的内容决定输出的部分,也会决定属性的值,变化会影响属性值。
v-model.lazy
实现懒加载 ,不产生实时更新,只在焦点离开时更新
前言:按照普通的形式,每次的操作都通过methods方法,但是这个methods方法一旦有其中的一个方法被执行,其他方法都会被执行一遍,console.log为例,但是我们不想无关的操作就触发一次方法,这样会降低页面的性能。
这就引入了计算属性,只有值真正变化的时候才会去操作DOM,虚拟DOM与真实DOM不同的时候才会改变
真正触发事件时还是使用对应的方法methods,只有在耗时、大量搜索需要使用计算属性,来减少项目的支出,优化项目。
方法的缺陷:只要有一个触发,其他就会被触发。
<button @click="a++">Age + Abutton>
<button @click="b++">Age + Bbutton>
<p>Age + A = {{addToA()}}p>
<p>Age + B = {{addToB()}}p>
new Vue({
el: '#vue-app',
data: {
a: 0,
b:0
},
methods: {
addToA: function () {
console.log('addToA');
return this.a + this.age;
},
addToB: function () {
console.log('addToB');
return this.b + this.age;
}
}
})
设置computed计算属性
<button @click="a++">Age + Abutton>
<button @click="b++">Age + Bbutton>
<p>Age + A = {{addToA}}p>
<p>Age + B = {{addToB}}p>
computed: {
addToA: function () {
console.log('addToA');
return this.a + this.age;
},
addToB: function () {
console.log('addToB');
return this.b + this.age;
}
}
- 注意,不应该使用箭头函数来定义 method 函数 (例如plus: () =>this.a++)。理由是箭头函数绑定了父级作用域的上下文,所以this将不会按照期望指向 Vue 实例。
- 注意,如果你为一个计算属性使用了箭头函数,则 this 不会指向这个组件的实例,不过你仍然可以将其实例作为函数的第一个参数来访问。
computed: {
aDouble: vm => vm.a * 2
}
以下绑定的class属性在浏览器中显示red
<h1 v-bind:class="{red:true}">示例1h1>
而下面的class属性的red值则不显示
<h1 v-bind:class="{red:false}">示例2h1>
Css样式:
span{
background: red;
padding: 10px;
}
.changeColor span{
background: green;
}
.changeLength span:after{
content: "World";
margin-left: 10px;
}
利用表达式显示class的值
<div v-on:click="changeColor = !changeColor" v-bind:class="{changeColor: changeColor}">
<span>Hellospan>
div>
new Vue({
el: '#vue-app',
data: {
changeColor: false,
changeLength: false
},
methods: {
},
computed: {
}
})
使用计算属性,将只改变,也可返回多个class值
<div v-bind:class="compClasses">
<span>Hellospan>
div>
<button v-on:click="changeColor = !changeColor">Change Colorbutton>
<button v-on:click="changeLength = !changeLength">Change Lengthbutton>
new Vue({
el: '#vue-app',
data: {
changeColor: false,
changeLength: false
},
methods: {
},
computed: {
compClasses: function(){
return {
changeColor: this.changeColor,
changeLength: this.changeLength
}
}
}
})
之前有对其进行总结,请查看:
v-if、v-show、v-for
我们都了解到,创建Vue实例对象的时候,我们是对相应的节点进行有作用域的操作,那个我们可以通过多个节点对其创建Vue以实现多个不同的Vue实例对象的操作。
对于以下两个DOM节点,我们分别创建一个Vue实例。
<div id="vue-app-one">{{title}}div>
<div id="vue-app-two">{{title}}div>
var one = new Vue({
el: '#vue-app-one',
data: {
title: "这里是vue App One"
},
methods: {
},
computed: {
}
})
var two = new Vue({
el: '#vue-app-two',
data: {
title: "这里是vue App Two"
},
methods: {
},
computed: {
}
})
对应的效果,就会展示两个Vue创建的实例内容。
那我们如果要在Vue作用域以外去更改数据的话,可以使用Vue实例的方法或者计算属性,也可以是全局的更改数据。
<div id="vue-app-one">
<h1>{{title}}h1>
<h2>{{changeTitle}}h2>
<button v-on:click="changeOne">
改变two的内容
button>
div>
<div id="vue-app-two">
<h1>{{title}}h1>
div>
var one = new Vue({
el: '#vue-app-one',
data: {
title: "这里是vue App One"
},
methods: {
changeOne: function(){
two.title = "这里改变了two的title"
}
},
computed: {
changeTitle: function(){
return '这里是One'
}
}
})
var two = new Vue({
el: '#vue-app-two',
data: {
title: "这里是vue App Two"
},
methods: {
},
computed: {
}
})
one.title = "vue App One 的title也被更改了";
组件初始化。首先为两个DOM节点创建两个Vue根实例,实现组件的具体应用。
<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>组件Vuetitle>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="vue-app-one">div>
<div id="vue-app-two">div>
<script src="app.js">script>
body>
html>
new Vue({ el: "#vue-app-one" })
new Vue({ el: "#vue-app-two" })
这样一来我们就可以给Vue实例创建一个公共的组件,可以说我们为这个项目创建了一个公共的模板,需要用到它的时候,直接使用自定义的标签引入即可。组件是可复用的 Vue 实例,且带有一个名字:在这个例子是。我们可以在一个通过new Vue创建的 Vue 根实例中,把这个组件作为自定义元素来使用。(注:这里使用了ES5的写法可以让html文本换行)
Vue.component("head-title", {
template: `
大家好!我是{{name}},今年{{age}}岁
`,
data: function(){
return {
name: "cq",
age: 18
}
},
methods: {
changeAge: function(){
this.age = 22;
}
}
})
然后就可以在每个已经Vue实例化的根实例应用自定义组件了。
<div id="vue-app-one">
<head-title>head-title>
div>
<div id="vue-app-two">
<head-title>head-title>
div>
因为每一个实例都有各自的数据,都可以维护一份被返回对象的独立的拷贝,我们想要的效果就是,一个实例下的数据不被另一个实例下的数据所影响。
(你可尝试着将data返回一个对象,看看效果。)
不同Vue根实例下可共用组件,同个Vue根实例也可以复用组件,且都维护一份被返回对象的独立的拷贝。
<div id="vue-app-two">
<head-title>head-title>
<head-title>head-title>
<head-title>head-title>
div>
Vue是一款易用、灵活、高效的前端框架,后续还有一篇是使用Vue Cli脚手架进行学习。一起加油吧!
进入Vue学习第二篇【Vue.js】Vue 2.X学习篇二