文章目录
前言
这是我在学习Vue基础的时候总结的文章。具体可参考Vue官方文档：Vue2.X官方文档
以下是使用CDN进行Vue的学习，也就是直接通过<script>标签引入Vue文件，即可使用。
一、数据绑定
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
new Vue({
el: '#vue-app',
data: {
name: '29',
age: 21,
blog: '<a href="https://hcq29.github.io">个人博客</a>'
},
methods: {
sing: function (str) {
return this.name + str;
}
}
})
el：是element，需要获取的元素，一定是HTML中的根容器元素。
data：是用于存取数据的。
methods：用来存储各种方法
v-bind:href 绑定值
{ {}}的解释
在文档上编写了{ {}}，但是实际上的页面展示是没有两个花括号的，那是因为Vue会将{ {}}里面的值放入一个虚拟DOM里面，通过虚拟DOM操作，把需要的值插入到真实DOM里面。
v-html内可显示标签，用<p>标签包括起来，单纯的{
{}}是不会显示文本标签的。
<p v-html="blog"></p>
blog: '<a href="https://hcq29.github.io">个人博客</a>'
二、事件
1.怎样使用事件？
事件就是要做的事情在程序运行过程中能够不停地去调用一个方法，然后去改变相应的内容
使用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--;
}
}
})
2.何时要()。
当
<p>{
{sing('会唱歌')}}</p>
这时候如果没有（），那它解析的是sing是个属性，而不是方法，所以要加括号
v-on:click=””内的方法可加括号，也可不加。因为Vue知道v-on:clic内一定绑定的是一个方法，所以不给括号也会调用默认的方法。（给括号就是手动调用，不给括号就是回调函数）
传参需要括号。
3.双击事件
v-on:dblclick
<button v-on:dblclick="subtract">减一岁</button>
4.共用函数：传入不同的参数。
<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;
}
}
})
5.@mousemove v-on:mousemove 方法
<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;
}
}
)}
6.语法糖
v-xxxx: ====》》》@
7 事件修饰符（阻止事件-事件冒泡）
法一：
在事件处理程序中调用event.preventDefault()或event.stopPropagation()
<div id="canvas" @mousemove="updateXY">
{
{X}},{
{Y}} - <span @mousemove="stop">Stop Moving</span>
</div>
new Vue({
el: '#vue-app',
data: {
X: 0,
Y: 0
},
methods: {
stop: function (event) {
event.stopPropagation();
}
}
)}
缺点但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
法二：
Vue.js为v-on提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。
- .stop
- .prevent
- .capture
- .self
- .once
- .passive
直接使用 @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>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<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 + A</button>
<button @click="b++">Age + B</button>
<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 + A</button>
<button @click="b++">Age + B</button>
<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
}
五、动态绑定CSS样式
以下绑定的class属性在浏览器中显示red
<h1 v-bind:class="{red:true}">示例1</h1>
而下面的class属性的red值则不显示
<h1 v-bind:class="{red:false}">示例2</h1>
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>Hello</span>
</div>
new Vue({
el: '#vue-app',
data: {
changeColor: false,
changeLength: false
},
methods: {
},
computed: {
}
})
方式二：
使用计算属性，将只改变，也可返回多个class值
<div v-bind:class="compClasses">
<span>Hello</span>
</div>
<button v-on:click="changeColor = !changeColor">Change Color</button>
<button v-on:click="changeLength = !changeLength">Change Length</button>
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
之前有对其进行总结，请查看：
v-if、v-show、v-for
七、创建多个Vue实例对象
我们都了解到，创建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也被更改了";
八、Vue中的组件
组件初始化。首先为两个DOM节点创建两个Vue根实例，实现组件的具体应用。
<!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>组件Vue</title>
<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: `
<div>
大家好！我是{
{name}}，今年{
{age}}岁
<button v-on:click="changeAge">改成真实年龄</button>
</div>
`,
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>
- 全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。
为什么data 必须是一个函数？
因为每一个实例都有各自的数据，都可以维护一份被返回对象的独立的拷贝，我们想要的效果就是，一个实例下的数据不被另一个实例下的数据所影响。
（你可尝试着将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学习篇二