前言
最近在学习了Vue，对其基础进行了一些总结，希望能帮到和我一样或是刚开始学习Vue的你。如果文章中有什么不对的地方也希望您能指出问题。在这非常感谢技术胖大神分享的免费学习视频。
什么是Vue呢？官方文档是这样介绍的："Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
"简而言之：Vue是一个构建数据驱动的 web 界面的渐进式框架。Vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。且拥有丰富的插件
Vue简单入门安装
初学vue只需直接用script引入->详情戳官方文档。其中分为开发版本和生产版本，推荐引用开发版本因为它包含了完整的警告和调试模型，这里要着重说一点有很多初学者点击下载版本时出现的是下面这种情况。你只需要Ctrl+A再Ctrl+C将它复制下来再创建一个.js文件粘贴进去就好了，让后在需要编译的.html文件中用script标签引入，Vue就会被注册为全局变量了
创建一个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>Hello World</title>
<script src='./vue.js'></script>
</head>
<body>
<div id="app">{{content}}</div>
<script>
var app = new Vue({ //构造一个Vue实例
el: '#app', //实例负责管理的区域
data: {
content: 'hello world'
}
})
setTimeout(function() {
app.$data.content = 'bye world'
},2000)
</script>
</body>
</html>
在script中
var 实例名称 = new Vue({
el(element缩写用于指定Vue实例所管理的区域)：'#app'(html中的结点),
data(Vue实例中数据model部分的内容):{
content(自定义数据名称)：'hello world'（自定义数据内容）
}
})
在html中
<div id="app">{{content}}</div>
在Vue实例所管理的区域内可使用双大括号{{xxx}}的文本插值对data中的自定义数据名称进行数据绑定，渲染至页面
指令的使用
v-text和v-html
实例：
<!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="./vue.js"></script>
</head>
<body>
<div id="app">
<div>{{name + 'Lee'}}</div>
<div v-text="name + 'Lee'"></div>
<div v-html="name + 'Lee'"></div>
</div>
<script>
var vm = new Vue ({
el: "#app",
data() {
return {
name: '<h1>hahaha</h1>'
}
},
})
</script>
</body>
</html>
v-if、v-show
- v-if和v-show都是通过其后绑定的model当中的数据来判断view中的dom元素显示或隐藏。区别在于v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css--display:none，dom元素还在，性能相对较好。
- v-if还可以与v-else-if、v-else一起使用。它们必须紧挨着写中间不能插入其他元素标签。否则页面将会报错
- v-if 当在某一输入框存在的状态下输入内容后修改了状态值后，渲染出来的另一个输入框中的内容会复用前一输入框中的input值直接显示出来不会清空。我们必须给元素标签上加唯一的key值。当给某个元素标签加上key值后，view会知道这是页面上唯一的元素，如果两个元素标签的key值不一样，view就不会尝试去复用以前的input标签
- 下面实例包含了上述几点内容，可以复制下来操作一遍加深理解
<!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="./vue.js"></script>
</head>
<body>
<div id="app">
<!-- DOM是否存在于页面之中 v-else必须紧贴的写在v-if下面，中间不能插入其他元素否则将会报错-->
<div v-if="show">{{message}}</div>
<div v-else> 当show(data中的show)为false是显示</div>
<!-- DOM一直存在与页面之中 只是对其样式的display的操作 不会频繁删除和增加DOM 性能相对较高-->
<div v-show="show">{{message}}</div>
<!-- 还可以如下使用 也需要紧挨在一起写-->
<div v-if="showOne === 'a'">This is A</div>
<div v-else-if = "showOne === 'b'">This is B</div>
<div v-else>This is others</div>
<!-- 当在某一输入框存在的状态下输入内容后修改了show值后，渲染出来的另一个输入框中的内容会复用前一输入框中的input值直接显示出来不会清空 如何解决 -->
<div v-if="show">
用户名：<input />
</div>
<div v-else>
邮箱名：<input />
</div>
<!-- 解决方法 原理 当给某个元素标签加上key值后，view会知道这是页面上唯一的元素，如果两个元素标签的key值不一样，view就不会尝试去复用以前的input标签 -->
<div v-if="show" key="uesrname">
用户名：<input />
</div>
<div v-else key="password">
邮箱名：<input />
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data() {
return {
show:false,
message: "hello world",
showOne: "a"
}
},
})
</script>
</body>
</html>
v-model双向数据绑定
- v-model双向数据绑定通常使用在input、select、textarea、components上，实现了view(视图)->model(数据)。当我们在输入框中输入内同时view的改变时数据也发生了改变。
- v-model还有.lazy(只有当输入数据后点击输入框之外的区域时绑定了原始数据的试图才会发生改变)、.number(输入字符串转为有效的数字)、.trim(过滤首位的空格，当开头和结尾输入了空格时，会自动过滤空格)修饰符。
- 如果看文字理解不了，可以将下面实例运行并操作去理解
<!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>v-model 实例</title>
<script src="../assets/vue.js"></script>
</head>
<body>
<h1>v-model 实例</h1>
<hr>
<div id="app">
<p>原始文本信息:{{message}}yua
</p>
<h3>文本框</h3>
<p>v-model: <input v-model="message" type="text" /> </p>
<p>v-model.lazy: <input v-model.lazy="message" type="text" /> </p>
<p>v-model.number <input v-model.number="message" type="text" /> </p>
<p>v-model.trim <input v-model.trim="message" type="text" /> </p>
<hr>
<h3>文本域</h3>
<textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>
<hr>
<h3>多选框绑定一个值</h3>
<input type="checkbox" id="isTrue" v-model="isTrue">
<label for="isTrue">{{isTrue}}</label>
<hr>
<h3>多选框绑定数组</h3>
<p>
<input type="checkbox" id="yuhan" value="yuhan" v-model="web_names">
<label for="isTrue">yuhan</label>
<input type="checkbox" id="yuda" value="yuda" v-model="web_names">
<label for="isTrue">yuda</label>
<input type="checkbox" id="hanhan" value="hanhan" v-model="web_names">
<label for="isTrue">hanhan</label>
</p>
<p>{{web_names}}</p>
<hr>
<h3>单选框的绑定</h3>
<p>
<input type="radio" id="one" value="男" v-model="sex">
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex">
<label for="two">女</label>
<p>你选择的性别是:{{sex}}</p>
</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
message:'hello world!',
isTrue:true,
web_names:[],
sex:'男'
}
})
</script>
</body>
</html>
v-bind
- v-bind 指令被用来响应地更新 HTML 属性，可缩写为冒号”：“。我们可以通过修改model中的data去改变html的属性。它常用来用来绑定class、style等，您可复制以下代码运行操作加深理解
<!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>v-bind 实例</title>
<script src="../assets/vue.js"></script>
<style>
.classA{
color: red;
}
.classB{
font-size: 150%;
}
</style>
</head>
<body>
<h1>v-bind 实例</h1>
<hr>
<div id="app">
<p><img v-bind:src="imgSrc" alt="" width="200px"></p>
<p><a :href="#" target="_black">哈哈哈</a></p>
<hr>
<div :class="className">1、绑定class</div>
<div :class="{classA:isOK}">2、绑定class中的判断</div>
<div :class="[classA,classB]">3、绑定class中的数组</div>
<div :class="isOK?classA:classB">4、绑定class中的三元运算符</div>
<hr>
<div>
<input type="checkbox" id="isOK" v-model="isOK">
<label for="isOK">isOK={{isOK}}</label>
</div>
<hr>
<div :style="{color:red,fontSize:font}"> 5、绑定style</div>
<div :style="styleObject"> 5、对象 绑定style</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
imgSrc:'https://jspang.com/images/react16_image.png',
webUrl:"http://jspang.com",
className:"classA",
isOK:true,
classA:'classA',
classB:'classB',
red:'red',
font:'20px',
styleObject:{
color:'green',
fontSize:'24px'
}
}
})
</script>
</body>
</html>
v-on
- 用来绑定事件的，可缩写为@，v-on:click(@click)相当于html中的onClick事件，在标签上使用v-on指令绑定事件，再在Vue的实例methods中定义方法。
- 栗子
<!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>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div @click="handleClick">
{{message}}
</div>
<item></item>
</div>
<script>
Vue.component('item',{
template:'<div>hello item</div>'
})
var vm = new Vue({
el: '#root',
data: {
message: 'hello world'
},
methods: {
handleClick: function() {
alert('hello')
}
},
})
</script>
</body>
</html>
其他指令 v-pre、v-once、v-clock
- v-once指令用于指示设置了此指令的部分只会进行一次渲染，就算model发生了改变，渲染过一次以后view也不会改变了。
- v-clock指令用于指示设置了此指令的部分在DOM渲染完成后才会显示。
- v-pre指令用于指定元素的一些静态的内容不需要编辑加这个指令可以加快编辑。
<span v-pre>{{msg}}</span>
在data中定义了msg为hello world 而在页面中任然会显示{{msg}}
您可以操作下面代码加深印象
<!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>v-pre & v-clock & v-once 实例</title>
<script src="../assets/vue.js"></script>
</head>
<body>
<h1>v-pre & v-clock & v-once 实例</h1>
<hr>
<div id="app">
<div>{{message}}</div>
<div v-pre>{{message}}</div>
<hr>
<div v-clock>dom渲染完成后：才显示!</div>
<div v-once>{{message}}</div> <!--只进行一次渲染 -->
<input v-model="message" type="text" />
<div>{{message}}</div>
</div>
</body>
<script>
var app= new Vue({
el:'#app',
data:{
message:'hello world!'
}
})
</script>
</html>
计算属性、方法和侦听器
计算属性、方法、侦听器的区别
- 计算属性用于完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以，可以提高代码的性能
- 侦听器主要是用于监听model中数据的变化的，当所监听的数据发生改变时，监听属性中的返回值也会发生改变从而影响view
- 方法：通过事件绑定在methods中定义方法来实现功能
- 区别：计算属性是内置缓存的 当它依赖的变量没有发生任何改变的时候，不会重新计算，一直用上一次计算的结果，这样会提高性能，而方法不会。侦听器当你有一些数据需要随着其它数据变动而变动时，你很容易滥用。所以在既可以用methods、watch、computed实现功能的情况下 优先选择computed，因为computed既简洁性能又好。
看个栗子吧
<!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="./vue.js"></script>
</head>
<body>
<div id="app">
<div>{{fullName1()}} </div>
<div>{{fullName}}</div>
<div>{{addAge}}</div>
</div>
<script>
var vm = new Vue ({
el: "#app",
data() {
return {
firstname: 'Yh',
lastName: 'Han',
age: 20,
age1:19,
addAge:39
}
},
methods: {
// 无缓存机制
fullName1: function() {
console.log('计算了一次1')
return this.firstname + " " + this.lastName
}
},
// 计算属性 是内置缓存的 当它依赖的变量没有发生任何改变的时候，不会重新计算，一直用上一次计算的结果，这样会提高性能
computed: {
fullName: function() {
console.log('计算了一次');
return this.firstname + " " + this.lastName
}
},
// 如果有一段代码既可以用methods、watch、computed实现 优先选择computed，因为computed既简洁性能又好
// 跟计算属性一样具有缓存
watch: {
age:function() {
this.addAge = this.age + this.age1
},
age1:function() {
this.addAge = this.age1 + this.age
}
},
})
</script>
</body>
</html>
这个栗子中包含了计算属性、方法和监听器的使用。可在控制台操作数据进行理解
计算属性的setter和getter
当我们需要对计算属性中的返回值进行修改时，直接修改是不会影响view,甚至还会报错。这时候我们就需要用到计算属性的setter。srtter会使计算属性返回值所依赖的data值也发生改变
<!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>计算属性的setter和getter</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
{{fullName}}
</div>
<script>
var vm = new Vue ({
el: "#app",
data() {
return {
firstName: 'Yu',
lastName:'Han'
}
},
computed: {
// fullName: function() {
// return this.firstName + " " +this.lastName
// }
fullName: {
get: function() {
return this.firstName + " " +this.lastName
},
// 当fullName被直接修改时 用过set 可将fullName的依赖的变量在set中进行修改， 如果没有set值，直接修改fullName是不会导致view发生变化的
set: function(value) {
var arr = value.split(" ")
this.firstName = arr[0]
this.lastName = arr[1]
console.log(value)
}
}
},
})
</script>
</body>
</html>
上面代码中 当你在控制台用 vm.fullName = "ke ai" 时，视图会发生变化，firstName和lastName也会被修改。你可以注释掉set部分再在控制台重复这个操作，结果将会报错
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="./vue.js"></script>
</head>
<body>
<div id="app">
<!-- 为了提升循环显示的性能，会在每一个循坏项中加一个唯一的key值 -->
<!-- 不推荐使用index作为key值(在频繁操作DOM元素相对应的数据的时候，比较费性能，可能会让view没法充分的复用结点) -->
<div v-for="(item, index) of list"
:key="index">
{{item}} --- {{index}}
</div>
<!-- 1.修改数组中的值不能直接用下标修改(用下标修改后的数组在view不会更新) 只能通过数组的push pop unshift shift splice sort reverse 操作-->
<!-- 2.改变数据中数组的引用地址(将数组内容完全替换成别的数据)也可以实现数据改变试图的效果 -->
<div v-for="(item, index) of listOne"
:key="item.id">
{{item.text}} --- {{index}}
</div>
<!-- template模板占位符，可以帮助我们去包裹一些元素，但是它并不会被真正的渲染到页面之上 -->
<template>
</template>
<!-- 对象的循环渲染 可以通过userInfo.[键名]修改键值使数据改变view也跟着改变，但是不能直接添加新的键名和键值 可以像修改数组一样通过改变引用修改-->
<!-- item 键名 key 键值 index 位置 -->
<div v-for="(item,key,index) of userInfo">
{{item}} ---- {{key}} -----{{index}}
</div>
<button @click="handlerChange">变化</button>
</div>
<button onclick="handlerChangeOne()">变化</button>
<script>
var vm = new Vue({
el: "#app",
data() {
return {
list: [ "hello","yuhan","nice","to","meet","you "],
listOne: [
{id:"565",text:'dgfdg'},
{id:"56351",text:'fgjte'},
{id:"523",text:'pkjjk'},
],
userInfo: {
name: "YuHan",
age: 20,
sex: "nicai"
}
}
},
methods: {
handlerChange:function() {
// set 可以操作对象向对象中加值(第一个参数是需要操作的对象，第二个是参数添加的键名，第三个参数是添加的键值)
// return Vue.set(this.userInfo,"address","hangzhou")
// return Vue.set(this.list,1,"傻孩子")
// return Vue.set(this.listOne,3,{id:"45645",text:"我新加的"})
// return this.listOne.splice(1,1,{id:46545,text:"你猜我猜不猜"})
}
},
})
// set 还是一个实例方法，可以在Vue实例的外部通过vue所创建的实例调用.$set()方法
handlerChangeOne= function() {
vm.$set(vm.userInfo,"age","19")
}
</script>
</body>
</html>
<!-- 改变数组使得数据发生改变view也跟着变的方法：
1. 七种数组编译方法 push()、pop()、shift()、unshift()、splice()、reverse()、sort()
2. 改变引用地址
3. set方法 vue内可使用Vue.set(需要修改的数组名称,需要修改/添加的值的下标,新值) 外部可通过 vue创建的实例对象.$set(需要修改的数组名称,需要修改/添加的值的下,新值)
-->
<!-- 改变对象使得数据发生改变view也跟着变得方法
1. 修改键值可以直接通过 对象名称.[键名] = [新键值]
2. 改变对象的引用
3. set方法 vue内可使用Vue.set(需要修改的对象名称,需要修改/添加的键名，修改/添加的键值) 外部可通过 vue创建的实例对象.$set(需要修改的对象名称,修改/添加的键名，修改/添加的键值)
-->
结语
目前只总结了这些，希望我的分享对您能有所帮助。
