一、开发环境配置
VSCode & 插件安装
jshint：js代码规范检查。
Beautify：一键美化代码的插件。
Vetur：.vue文件识别插件。
Javascript(ES6) code snippets：ES6语法提示。
Auto Rename Tag：自动重命名标签。标签都是成对出现的，开始标签修改了，结束标签也会跟着修改。
Auto Close Tag：自动闭合标签。针对一些非标准的标签，这个插件还是很有用的。
vue helper：一些Vue代码的快捷代码。
vscode-icons：可选。提供了很多类型的文件夹icon，不同类型的文件夹使用不同的icon，会让文件查找更直观。
open in browser：可选。右键可以选择在默认浏览器中打开当前网页。
二、Vue安装和使用
需要联网的方式
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
下载在本地的引用方法
将提前下载好的 vue.js 放在代码同级目录下
<script src="./vue.js"></script>
三、基本使用&Vue模板语法
（1）Vue对象、el参数和data参数
创建一个Vue对象，并且在这个对象中传递el参数，el参数全称是element，用来找到一个给vue渲染的根元素。并且我们可以传递一个data参数，data中的所有值都可以直接在根元素下使用{{}}来使用，且data中的数据，只能在vue的根元素下使用，在其他地方是不能被vue识别和渲染的
（2）vue对象中添加methods
methods专门用来存储自己的函数。methods中的函数也可以在模板中使用，并且在methods中的函数来访问data中的值，只需要通过this.属性名就可以访问到了
（3）v-once 文本
变量在第一次渲染完成后，不想要跟着后期数据的更改而更改，那么可以使用 v-once指令来实现。
<p v-once>{{username}}</p>
（4） v-html 文本
后台返回给我们一个段原生的html代码，我们需要渲染出来，那么如果直接通过{{}}渲染，会把这个html代码当做字符串。这时候我们就可以通过v-html指令来实现
简单来说就是跳转链接
<div v-html="code"></div>
（5）属性绑定 v-bind:
属性绑定不需要花括号,属性不同于方法
在html元素的属性上绑定我们Vue对象中的变量，那么需要通过v-bind来实现
第一种
<img v-bind:src="image" alt="">
第二种
<img :src="image" alt="">
（6）代码参考
<!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>
</head>
<body>
<div id="app">
<!-- 这里变量来自 vue 模块中的 data 引用变量的时候需要带上{{}} -->
<!-- <p>username: {{username}}</p> -->
<!-- 加上 v-once 变量则在第一次渲染出来后 不被更替 -->
<p v-once>username: {{username}}</p>
<p>password:{{password}}</p>
<!-- 方法里的变量用() -->
{{demo(username)}}
<!-- v-html 跳转链接实现 两种方式实现结果相同 -->
<p v-html="code">第一种</p>
<p v-html="code">{{code}}</p>
<!-- 按钮 点击一下 改变 username 的值 v-on:click -->
<button @click="demo2">按钮</button>
<!-- src 路径 这里是想要绑定属性 和之前的那些变量的调用不同-->
<!-- 错误的 属性是不需要包裹在{{}} -->
<!-- <img v-bind:src="{{imagesrc}}" alt=""> -->
<!-- <img v-bind:src="imagesrc" alt=""> -->
<div>
<!-- 图片部分 属性绑定 -->
<img :src="imagesrc" alt="">
</div>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
// vn 有自动补全
new Vue({
// app 和 body里面 id 为 div 的联系起来
el: "#app",
data:{
"username":"逻辑教育",
"password": 123,
"code":"<a href='https://www.baidu.com/'>百度一下</a>",
"imagesrc": "https://www.baidu.com/img/bd_logo1.png?qua=high&where=super",
},
// 定义方法
methods:{
// name 形参 可在使用的时候外部传入一个参数 第一个demo 传入外部参数的方式
demo: function(name){
return "晚上好," + name
},
demo2: function(){
this.username = "lgcoder"
}
}
})
</script>
四、属性绑定Class和Style
（1）绑定Class
绑定class或者style
<p v-bind:class="[class1,class2]">武汉,加油！！！</p>
<!-- main-title 有-用''来包裹表示变量 -->
<p :class="{title:class1, 'main-title':class2}">hello world</p>
（2）绑定Style
但是样式如果有横线，则都需要变成驼峰命名的方式
用数组的方式
# 读取对应样式的值
<li :style="{backgroundColor:pBgColor,fontSize:pFontSize}">首页</li>
# 或者是直接读取整个字符串
<li :style="liStyle">首页</li>
<!-- <p v-bind:style="[pclass1, pclass2]">加油, 中国</p> -->
（3）JavaScript表达式
运行使用失败，不知道原因
只能是JavaScript表达式，不能是语句
三目运算符：
{color:color?‘red’:‘blue’}
<p v-bind:style="{color:color?'red':'blue'}">{{username.split(" ").reverse().join(" ")}}</p>
（4）代码参考
<!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>
<!-- 红色的样式 style -->
<style>
.title{
font-size: 20px;
color: red;
}
.main-title{
font-weight: 800;
}
</style>
</head>
<body>
<p class="title">中国,加油</p>
<div id="app">
<!-- <p v-bind:class="class1">中国,加油！！！</p> -->
<p v-bind:class="class1">中国,加油！！！</p>
<!-- 通过[] 数组的方式加载两种 class 给这个p标签 -->
<!-- <p v-bind:class="[class1,class2]">武汉,加油！！！</p> -->
<!-- 通过对象的方式实现绑定 main-title 有-用''来包裹表示变量 -->
<p :class="{title:class1, 'main-title':class2}">hello world</p>
<!-- 样式如果有横线 加单引号'' -->
<p v-bind:style="{'background-color':background}">逻辑</p>
<!-- 样式如果有横线 驼峰命名（backgroundColor）的方式 -->
<p v-bind:style="{backgroundColor:background}">教育</p>
<!-- style 属性 -->
<p :style="pstyle">逻辑教育</p>
<!-- <p v-bind:style="[pclass1, pclass2]">加油, 中国</p> -->
<!-- JavaScript的三目运算符 -->
<!-- color:color 判断布尔值 true 为 red 反之 blue -->
<p v-bind:style="{color:color?'red':'blue'}">{{username.split(" ").reverse().join(" ")}}</p>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
// // 这里的 title 代表引用上面的红色样式
// // class1:"title",
// 通过[]数组方式 class1 + class2
// class2:"main-title",
// // 加载 class 的第二种方式(中国,加油！！！)
// class1:"title main-title",
// 通过对象的方式实现绑定
class1:true,
class2:true,
background: 'red',
pstyle:{
// 这里的颜色可以写 rgb 颜色代码 red英文表示
// backgroundColor 驼峰命名也适合于这里
background: 'rgb(255, 255, 51)',
},
username: "hello world",
color:true,
}
})
</script>
五、事件绑定 & 传入 event 参数
绑定的是事件，而不是属性
如果在事件处理函数中，想要获取原生的DOM事件，那么在html代码中，调用的时候，可以传递一个$event参数。
<p>{{count}}</p>
<!-- 加的按钮 v-on:click -->
<button v-on:click="count+=1">加</button>
<!-- 减的按钮 @click 传入参数$event -->
<button @click="sub(2,$event)" value="这是一个减按钮" name="hello world">减</button>
<script>
new Vue({
sub: function(value, event){
// console.log 在控制台打印信息
//console.log(event)
console.log(event.target.value) // 这是一个减按钮
console.log(event.target.name) // hello world
this.count -= value
}
})
</script>
六、条件判断和循环
（1）条件判断基本使用v-if、 v-else-if、v-else
<div id="app">
<p v-if="weather == 'summer' ">今天去约女神</p>
<p v-else-if="weather == 'rain'">今天在家打游戏</p>
<p v-else>今天吃火锅</p>
</div>
（2）使用 template 在一个条件中加载多个html元素
<div id="app">
<template v-if="age < 18">
<p>上网</p>
<p>逃学</p>
</template>
<template v-else-if="age >= 18 && age<25">
<p>找工作</p>
<p>找女朋友</p>
</template>
<template v-else>
<p>工资多少</p>
<p>结婚</p>
</template>
</div>
（3）条件判断、JavaScript 表达式、key 属性 & button 切换的应用
在标签加上 key 元素作为唯一标识，可以实现条件下的重新渲染对应标签 key 属性的 html 元素
可应用在切换登陆方式，跟随唯一标识的元素
<!-- loginType 为定义好的登陆方式 username 和 email -->
<!-- vue 中定义函数 changeLoginType 实现来回切换（三目运算） -->
<!-- loginType=='username'?'email':'username' -->
<template v-if="loginType=='username'">
<label for="">用户名:</label>
<!-- placeholder -->
<input type="text" placeholder="用户名" key="username" >
</template>
<!-- 邮箱 input key="email" -->
<template v-else-if="loginType=='email'">
<label for="">邮箱:</label>
<input type="text" placeholder="邮箱" key="email">
</template>
<!--button v-on:click 或者 @click 切换登陆方式 -->
<!-- 属性 click 由 changeLoginType函数实现 -->
<button v-on:click="changeLoginType">切换登录类型</button>
（4）v-for 循环数组
<table>
<tr>
<th>序号</th>
<th>标题</th>
<th>作者</th>
</tr>
<!-- 循环数组 第一个位置 数据 第二个位置 索引 -->
<tr v-for="(book, index) in books">
<td>{{index+1}}</td>
<td>{{book.title}}</td>
<td>{{book.author}}</td>
</tr>
</table>
###（5）v-for 循环对象
<!-- 循环对象 第一个位置 值 第二个位置 key -->
<div v-for="(value, key) in person">
{{key}}: {{value}}
</div>
// data 中定义对象
person: {
// key value(值)
"username": "juran",
"age": 18,
"address": "csc"
},
（5）代码参考
<!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>
</head>
<body>
<!-- div#app div id="app" -->
<!-- div.app div class="app" -->
<!-- div*3 生成3个div -->
<!-- 条件判断 v-if v-else-if v-else -->
<!-- <div id="app">
<p v-if="weather == 'summer' ">今天去约女神</p>
<p v-else-if="weather == 'rain'">今天在家打游戏</p>
<p v-else>今天吃火锅</p>
</div> -->
<!-- 一个条件中加载多个html元素 template条件判断 if else-if else -->
<!-- <div id="app">
<template v-if="age < 18">
<p>上网</p>
<p>逃学</p>
</template>
<template v-else-if="age >= 18 && age<25">
<p>找工作</p>
<p>找女朋友</p>
</template>
<template v-else>
<p>工资多少</p>
<p>结婚</p>
</template>
</div> -->
<!-- 输入框 placeholder 输入框提示的内容 -->
<div id="app">
<!-- 用户名 在这个 username 的标签加上 key 属性，可以实现条件下的重新渲染对应 key 属性的 html 元素 -->
<template v-if="loginType=='username'">
<label for="">用户名:</label>
<input type="text" placeholder="用户名" key="username" >
</template>
<!-- 邮箱 input key="email" -->
<template v-else-if="loginType=='email'">
<label for="">邮箱:</label>
<input type="text" placeholder="邮箱" key="email">
</template>
<!--button v-on:click 或者 @click 切换登陆方式 -->
<!-- 属性 click 由 changeLoginType函数实现 -->
<button v-on:click="changeLoginType">切换登录类型</button>
<table>
<tr>
<th>序号</th>
<th>标题</th>
<th>作者</th>
</tr>
<!-- tr 循环 v-for -->
<!-- <tr v-for="book in books"> -->
<!-- td 里面包裹变量{{}} -->
<!-- <td>{{book.title}}</td> -->
<!-- <td>{{book.author}}</td> -->
<!-- </tr> -->
<!-- 循环数组 第一个位置 数据 第二个位置 索引 -->
<tr v-for="(book, index) in books">
<td>{{index+1}}</td>
<td>{{book.title}}</td>
<td>{{book.author}}</td>
</tr>
</table>
<!-- 循环对象 第一个位置 值 第二个位置 key -->
<div v-for="(value, key) in person">
{{key}}: {{value}}
</div>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
weather: "summer",
age: 30,
loginType: 'email',
// book 数组 {} 是元素
books:[
{
'title': 'python',
'author': '龟叔'
},
{
'title': 'java',
'author': 'xxx1'
},
{
'title': 'PHP',
'author': 'xxx2'
},
{
'title': 'C++',
'author': 'xxx3'
},
],
// 对象
person: {
// key value(值)
"username": "juran",
"age": 18,
"address": "csc"
},
},
methods:{
changeLoginType:function(){
// 使用三目运算 实现来回切换
this.loginType = this.loginType=='username'?'email':'username'
}
}
})
</script>
七、触发视图更新
（1）push()：添加元素的方法。
this.books.push("居然")
（2） pop()：删除数组最后一个元素。
this.books.pop()
（3） shift()：删除数组的第一个元素。
this.books.shift()
（4） unshift(item)：在数组的开头位置添加一个元素。
this.books.unshift("居然")
（5）splice(index,howmany,item1,…,itemX)：向数组中添加或者删除或者替换元素。
// 向books第0个位置添加元素
this.books.splice(0,0,"金瓶梅")
// 下标从0开始，删除2个元素
this.books.splice(0,2)
// 下标从0开始，替换2个元素
this.books.splice(0,2,'金瓶梅','骆驼祥子')
（6）sort(function)：排序。
// 1
this.books.sort(function(x,y){
// 取两个随机数排序
a = Math.random();
b = Math.random();
return a-b;
});
// 2
methods:{
changeBooks:function(){
// 对books两两排序
this.books.sort(function (a,b){
// 根据返回值 对传入的两个参数排序 返回正数true 返回负数false 进行正序或是逆序的
return Math.random() - 0.5
})
}
}
（7）reverse()：将数组元素进行反转。
this.books.reverse();
八、Vue.set()
（1）修改数组中的某个值
this.books[0] = ‘Python’; 不会让页面发生数据更新
//方法一 Vue.set
Vue.set(this.books,0,'Python');
//方法二 splice
（2）动态的给对象添加属性
methods: {
changePerson: function(event){
Vue.set(this.person,'age',18)
}
}
九、计算属性和监听器
（1）计算属性
一般情况下属性都是放到data中的，但是有些属性可能是需要经过一些逻辑计算后才能得出来，那么我们可以把这类属性变成计算属性。
区别于 method 计算属性更加智能，他是基于它们的响应式依赖进行缓存的。也就是说只要相关依赖（比如以上例子中的area）没有发生改变，那么这个计算属性的函数不会重新执行，而是直接返回之前的值。这个缓存功能让计算属性访问更加高效。
<p>{{count}}</p>
<!-- 加的按钮 v-on:click -->
<button v-on:click="count+=1">加</button>
<!-- 减的按钮 @click -->
<button @click="sub">减</button>
<script>
new Vue({
// 另外一种写法 sub(){}
sub:function(){
this.count -= 1
}
})
</script>
（2）计算属性和双向绑定 v-model
计算面积
//计算面积
<div id="app">
<label>长</label>
<!-- v-model 双向绑定，让data里面的 length 的数据发生变化 -->
<!-- 简写：v-model:"" -->
<input type="number" name="length" v-model:value="length">
<label>宽</label>
<!-- 如果不是 v-model 而是: 则 width 等值不会发生变化 -->
<input type="number" name="width" v-model:value="width">
<label>面积</label>
<!-- 绑定 area 方法 是一个计算属性 -->
<input type="number" readonly v-bind:value="area">
</div>
……
……
……
<script>
new Vue({
el: "#app",
data:{
// data 里面的数据根据 input 里 v-model 的值进行变化
length:0,
width:0
},
// 计算属性
computed:{
area:function(){
return this.length*this.width
}
}
})
</script>
分割、组合
<!-- 分割整体、组合成整体 -->
<div id="app">
<div>
<label>省：</label>
<input type="text" name="province" v-model:value="province">
</div>
<div>
<label>市：</label>
<input type="text" name="city" v-model:value="city">
</div>
<div>
<label>区：</label>
<input type="text" name="dist" v-model:value="dist">
</div>
<div>
<label>详细地址：</label>
<input type="text" name="address" v-model:value="address">
</div>
</div>
……
……
……
<script>
new Vue({
el: "#app",
data:{
// data 里面的数据根据 input 里 v-model 的值进行变化
province:"",
dist:"",
city:"",
},
// 计算属性
computed:{
address:{
// get 方法
get:function(){
// 定义一个变量
var result = ""
if(this.province){
result = this.province + "省"
}
if(this.city){
result += this.city + "市"
}
if(this.dist){
result += this.dist + "区"
}
return result
},
set:function(value){
// 分割 split(/省|市|区/)
var result = value.split(/省|市|区/)
// 逻辑不够全
//if(result && result.length > 0){
// this.province = result[0]
// }
// if(result && result.length > 1){
// this.city = result[1]
// }
// if(result && result.length > 2){
// this.dist = result[2]
// }
}
}
}
})
</script>
（3）监听器
监听搜索框输入的结果，并在短暂的延时之后再页面中显示
<div id="app">
<label>搜索</label>
<input type="text" v-model:value="keyword">
<p>结果</p>
{{answer}}
</div>
……
……
……
data:{
// data 里面的数据根据 input 里 v-model 的值进行变化
value:"",
answer:"",
keyword:"",
},
// 监听 监听到变化就会来执行监听函数 keyword
// console 的打印是监听到立刻打印
// 定时器 setTimeout 获取一个新值之后进入延迟1000ms 1000ms内发生的数值变化不能够在页面显示出
watch:{
keyword: function(newvalue,oldvalue){
console.log(newvalue)
console.log(oldvalue)
this.answer = "加载中……"
// 定时器
setTimeout(() =>{
this.answer = "搜索结果：" + newvalue
// 1000是延时
}, 1000);
}
},
