一,基础环境准备,使用步骤
一个heml文件想要使用vue必须先导入下载的vue.js文件,也可以一通过cdn服务引入
<script src="vue.js"></script>
1. vue的使用要从创建Vue对象开始
var vm = new Vue();
2. 创建vue对象的时候，需要传递参数，是json对象，json对象对象必须至少有两个属性成员
var vm = new Vue({
el:"#app",
data: {
数据变量:"变量值",
数据变量:"变量值",
数据变量:"变量值",
},
});
el:设置vue可以操作的html内容范围，值一般就是css的id选择器。
data: 保存vue.js中要显示到html页面的数据。
3. vue.js要控制器的内容范围，必须先通过id来设置。
<div id="app">
<h1>{{message}}</h1>
<p>{{message}}</p>
</div>
二, vue常用指令
2.1 操作标签文本
v-text 控制标签文本
{{ }} 控制标签文本
v-html 控制标签文本具有html格式
1. 在双标签中显示纯文本数据一般通过{{ }}来完成数据显示,该方法部分替换标签数据
<div>{{num}}'文本'</div> '文本'能显示到标签中
<div>num的下一个数字：{{num-0+1}}</div> 支持js语法
2. 在表单输入框中显示数据要使用v-model来完成数据显示,该方法为整个标签设置数据属性,不能再添加其他文本
<div v-text='num'>'文本'</div> '文本'不能显示到标签中
<div v-text='num+1'></div> 支持js语法
3. 如果双标签的内容要显示的数据包含html代码，则使用v-html来完成
<div v-html="text"></div> "text"具有html格式
4.v-model或者v-html等vue提供的属性，或者 {{}} 都支持js代码。
v-model 用于表单元素,实现双向数据绑定(一个该了另一个也跟着该)
<input type="text" v-model="username">
当对象的"username"属性改变,或input的内容改变都能实现相互的影响
2.2 操作标签样式
v-show 通过操作display:none,来控制标签的显隐
标签元素：
<h1 v-show="ok">Hello!</h1>
data数据：
data:{
ok:false // true则是显示，false是隐藏
}
v-if 直接从HTML文档中移除元素[ DOM操作中的remove ]
标签元素：
<!-- vue对象最终会把条件的结果变成布尔值,这里可以是个js表达式 -->
<h1 v-if="ok">Yes</h1>
data数据：
data:{
ok:false // true则是显示，false是隐藏
}
可以出现多个v-else-if语句，但是v-else-if之前必须有一个v-if开头。后面可以跟着v-else，也可以没有。
标签元素：
<h1 v-if="num==1">num的值为1</h1>
<h1 v-else-if="num==2">num的值为2</h1>
<h1 v-else>num的值是{{num}}</h1>
data数据：
data:{
num:2
}
v-bind 操作标签的属性
使标签属性的值成为一个变量,和事件绑定可以做到客户通过鼠标点点点的方式来修该变量值以达到改变标签样式的效果.
v-bind: 使标签属性的值成为一个变量,vue2.x版本可以简写为 :
<a href="url2">淘宝</a> "url2"需要是一个网址,如果这有写就是一个字符串
<a v-bind:href="url1">百度</a> vue1.x版本的写法
<a :href="url2">淘宝</a> "url2"是一个变量指向一个网址
2.3 循环,事件绑定
v-for 根据数据生成列表结构,常和数组一起使用
<ul>
<!--book是列表的每一个元素，index是每个元素的下标-->
<li v-for="(book, index) in book_list">第{{ index+1}}本图书：{{book.title}}</li>
</ul>
<script>
var vm1 = new Vue({
el:"#app",
data:{
book_list:[
{"id":1,"title":"图书名称1","price":200},
{"id":2,"title":"图书名称2","price":200},
{"id":3,"title":"图书名称3","price":200},
{"id":4,"title":"图书名称4","price":200},
]
}
})
</script>
v-on 给标签绑定事件,加上.stop阻止事件冒泡
@click.stop.prevent="" 阻止事件冒泡且阻止页面刷新
<button v-on:click="num++">按钮</button> <!-- v-on 是vue1.x版本的写法 -->
<button @click="num+=5">按钮2</button> 直接操作vue对象的属性
<button @click="changeNum">按钮2</button> 通过函数changeNum操作对象属性
<button @click="changeNum1(p1,p2)">按钮2</button> 给changeNum1函数传参
<button @keyup.enter="changeNum1(p1,p2)">按钮2</button> 使用事件修饰符检测enter键的使用才触发
<!--vue中操作一个标签不需要dom操作取选中标签,因为vue对象已经挂载了该标签,标签的数据来自vue对象的属性值,所以直接修改vue对象对应的属性值就能改变对应的标签属性值-->
<script>
let vm = new Vue({
el:"#box",
data:{
num:0,
},
methods:{
changeNum(){
if(this.num<=1){
this.num=0;
}else{
this.num--;
}
}
changeNum1(p1,p2){}
}
})
</script>
三,Vue对象提供的方法属性
3.1 过滤器
过滤器:就是一个自定义函数,用来调整数据格式的
可以使用在两个地方：输出内容和操作数据中。
定义过滤器的方式有两种。
3.1.1 使用Vue.filter()进行全局定义
全局定义一般新建一个filter.js文件,导入使用
Vue.filter("RMB1", function(v){
//就是来格式化(处理)v这个数据的
if(v==0){
return v
}
return v+"元"
})
3.1.2 在vue对象中通过filters属性来定义
该对象内部使用
var vm = new Vue({
el:"#app",
data:{},
filters:{
RMB2:function(value){
if(value==''){
return;
}else{
return '¥ '+value;
}
}
}
});
3.2 计算和侦听属性
3.2.1 计算属性 computed
vue对象提供默认方法,该方法将对象属性进行计算并返回结果
computed:{ //计算属性：里面的函数都必须有返回值
strRevs: function(){
var ret = this.str1.split("").reverse().join("");
return ret
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.min.js"></script>
<script>
window.onload = function(){
var vm = new Vue({
el:"#app",
data:{
str1: "abcdefgh"
},
computed:{ //计算属性：里面的函数都必须有返回值
strRevs: function(){
var ret = this.str1.split("").reverse().join("");
return ret
}
}
});
}
</script>
</head>
<body>
<div id="app">
<p>{{ str1 }}</p>
<p>{{ strRevs }}</p>
</div>
</body>
</html>
3.2.2 监听属性 watch
侦听属性，可以帮助我们侦听data，当数据的变化自动执行对应的函数。
这个函数在被调用时，vue会传入两个形参，第一个是变化前的数据值，第二个是变化后的数据值。
watch:{
num:function(newval,oldval){
//num发生变化的时候，要执行的代码
console.log("num已经发生了变化！");
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.min.js"></script>
<script>
window.onload = function(){
var vm = new Vue({
el:"#app",
data:{
num:20
},
watch:{
num:function(newval,oldval){
//num发生变化的时候，要执行的代码
console.log("num已经发生了变化！");
}
}
})
}
</script>
</head>
<body>
<div id="app">
<p>{{ num }}</p>
<button @click="num++">按钮</button>
</div>
</body>
</html>
3.3 vue对象的生命周期和钩子函数
空对象创建-->对象初始化(传入data等)-->对象挂载标签渲染完成-->修改对象数据后修改标签属性-->对象销毁
对象创建后4个过程的前后都有提供钩子函数分别为:
空对象创建
beforeCreate:(){}
对象初始化
created:(){} 对象有了data属性之后执行的操作
beforMount:(){}
对象挂载标签渲染完成
mounted:(){} 对象挂载标签并且渲染完成之后执行的操作
对象数据被修改
beforUpdate:(){}
自动修改标签属性
updated:(){}
beforeDestroy:(){}
对象被回收
destroyed:(){}
常用的两个钩子函数是:
created:(){} 对象有了data属性之后我们可以给对象的data属性初始化一些值,一般这个时候去服务器拿一些数据赋值给data
mounted:(){} 模板渲染完成之后修改页面类容特效
练习: To do list
四, axios与json
4.1 json数据
json是 JavaScript Object Notation 的首字母缩写，单词的意思是javascript对象表示法，这里说的json指的是类似于javascript对象的一种数据格式。
json的作用：在不同的系统平台，或不同编程语言之间传递数据。
4.2 json数据语法
json数据对象类似于JavaScript中的对象，但是它的键对应的值里面是没有函数方法的，值可以是普通变量，不支持undefined，值还可以是数组或者json对象。
// 原生的js的json对象
var obj = {
age:10,
sex: '女',
work(){ // work: function(){}的简写
return "好好学习",
},
}
// json数据的对象格式,json数据格式,是没有方法的,只有属性,属性值：字符串，数值(整数，浮点数，布尔值), json，
{
"name":"tom",
"age":18
}
// json数据的数组格式：
["tom",18,"programmer"]
复杂的json格式数据可以包含对象和数组的写法。
{
"name":"小明",
"age":200,
"is_delete": false,
"fav":["code","eat","swim","read"],
"son":{
"name":"小小明",
"age":100,
"lve":["code","eat"]
}
}
// 数组结构也可以作为json传输数据。
json数据可以保存在.json文件中，一般里面就只有一个json对象。
总结：
1. json文件的后缀是.json
2. json文件一般保存一个单一的json数据
3. json数据的属性不能是方法或者undefined，属性值只能：数值[整数,小数,布尔值]、字符串、json和数组
4. json数据只使用双引号、每一个属性成员之间使用逗号隔开，并且最后一个成员没有逗号。
{
"name":"小明",
"age":200,
"fav":["code","eat","swim","read"],
"son":{
"name":"小小明",
"age":100
}
}
4.3 js中提供的json数据转换方法
javascript提供了一个JSON对象来操作json数据的数据转换.
| 方法 | 参数 | 返回值 | 描述 |
|---|---|---|---|
| stringify | json对象 | 字符串 | json对象转成字符串 |
| parse | 字符串 | json对象 | 字符串格式的json数据转成json对象 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// json语法
let humen = {
"username":"xiaohui",
"password":"1234567",
"age":20
};
console.log(humen);
console.log(typeof humen);
// JSON对象提供对json格式数据的转换功能
// stringify(json对象) # 用于把json转换成字符串
let result = JSON.stringify(humen);
console.log(result);
console.log(typeof result);
// parse(字符串类型的json数据) # 用于把字符串转成json对象
let json_str = '{"password":"1123","age":20,"name":"xiaobai"}';
console.log(json_str)
console.log(typeof json_str)
let json_obj = JSON.parse(json_str);
console.log(json_obj);
console.log(typeof json_obj)
console.log(json_obj.age)
</script>
</body>
</html>
4.4 ajax
ajax，一般中文称之为："阿贾克斯"，是英文 “Async Javascript And Xml”的简写，译作：异步js和xml数据传输数据。
ajax的作用： ajax可以让js代替浏览器向后端程序发送http请求，与后端通信，在用户不知道的情况下操作数据和信息，从而实现页面局部刷新数据/无刷新更新数据。
所以web开发中ajax是很常用的技术，主要用于操作后端提供的数据接口，从而实现网站的前后端分离。
ajax技术的原理是实例化js的XMLHttpRequest对象，使用此对象提供的内置方法就可以与后端进行数据通信。
实际而言，axios或者jQuery提供的ajax，本质上就是XMLHttpRequest对象操作的封装。
4.5 通过axios实现数据请求
vue.js默认没有提供ajax功能的。
所以使用vue的时候，一般都会使用axios的插件来实现ajax与后端服务器的数据交互。
注意，axios本质上就是javascript的ajax封装，所以会被同源策略限制。
下载地址：
https://unpkg.com/axios@0.18.0/dist/axios.js
https://unpkg.com/axios@0.18.0/dist/axios.min.js
使用文档：https://www.kancloud.cn/yunye/axios/234845
axios提供发送http请求的常用方法有两个：axios.get() 和 axios.post() 。
增 post
删 delete
改 put/patch
查 get
// 发送get请求
// 参数1: 必填，字符串，请求的数据接口的url地址，例如请求地址：http://www.baidu.com?id=200
// 参数2：可选，请求参数和请求头内容，json对象，要提供给数据接口的参数
axios.get('服务器的资源地址',{ // http://www.baidu.com
params:{
参数名:'参数值', // id: 200,
},
headers:{
选项名:'选项值', // 请求头
}
}).then(response=>{ // 请求成功以后的回调函数
console.log("请求成功");
console.log(response.data); // 获取服务端提供的数据
}).catch(error=>{ // 请求失败以后的回调函数
console.log("请求失败");
console.log(error.response); // 获取错误信息
});
// 发送post请求，参数和使用和axios.get()类似。
// 参数1: 必填，字符串，请求的数据接口的url地址
// 参数2：必填，json对象，要提供给数据接口的参数,如果没有参数，则必须使用{}
// 参数3：可选，json对象，请求头信息
axios.post('服务器的资源地址',{
username: 'xiaoming',
password: '123456'
},{
headers:{
选项名:"选项值",
}
})
.then(response=>{ // 请求成功以后的回调函数
console.log(response);
})
.catch(error=>{ // 请求失败以后的回调函数
console.log(error);
});
// b'firstName=Fred&lastName=Flintstone'
注意：
axios.delete() 的用法和参数与axios.get()一样，
axios.put()或者axios.patch的用法和参数与axios.post()一样。
在http协议中，不同的请求动作都有不同的含义，例如：
get 代表向目标服务器请求获取数据
post 代表向目标服务器请求上传数据
put 代表向目标服务器请求更新数据【修改全部数据】
patch 代表向目标服务器请求更新数据【修改部分数据】
patch 代表向目标服务器请求更新数据
delete 代表向目标服务器请求删除数据
五,组件化开发
5.1 组件[component]
组件（Component）是自定义封装的功能。在前端开发过程中，经常出现多个网页的功能是重复的，而且很多不同的页面之间，也存在同样的功能。
而在网页中实现一个功能，需要使用html定义功能的内容结构，使用css声明功能的外观样式，还要使用js来定义功能的特效，因此就产生了把一个功能相关的[HTML、css和javascript]代码封装在一起组成一个整体的代码块封装模式，我们称之为“组件”。
所以，组件就是一个html网页中的功能，一般就是一个标签，标签中有自己的html内容结构，css样式和js特效。
这样，前端人员就可以在组件化开发时，只需要书写一次代码，随处引入即可使用。
vue的组件有两种：默认组件[全局组件] 和 单文件组件
5.1.1 默认组件
<div id="app">
<addnum></addnum>
<addnum></addnum>
<addnum></addnum>
<addnum></addnum>
<addnum></addnum>
</div>
<script>
Vue.component("addnum",{
template:'<div><input type="text" v-model="num"><button @click="num+=1">点击</button></div>',
data: function(){
// 写在这里的数据只有当前组件可以使用
return {
num:1,
}
}
});
var vm = new Vue({
el:"#app",
// 这里写的数据是全局公用的，整个文件共享
data:{
}
})
</script>
普通组件的缺点：
- html代码是作为js的字符串进行编写，所以组装和开发的时候不易理解，而且没有高亮效果。
- 普通组件用在小项目中非常合适，但是复杂的大项目中，如果把更多的组件放在html文件中，那么维护成本就会变得非常昂贵。
- 普通组件只是整合了js和html，但是css代码被剥离出去了。使用的时候的时候不好处理。
5.1.2 单文件组件
将一个组件相关的html结构，css样式，以及交互的JavaScript代码从html文件中剥离出来，合成一个文件，这种文件就是单文件组件，相当于一个组件具有了结构、表现和行为的完整功能，方便组件之间随意组合以及组件的重用，这种文件的扩展名为“.vue”，比如："Home.vue"。
一个组件最基本的结构
<template>
<div id="Home">
所有的html代码必须在这一个双标签下
</div>
</template>
<script>
//js代码中,任何对象必须被export default抛出,才能在其他地方引用到
export default {
name:"Home",
}
</script>
<style scoped>
/*scoped表示当前样式只影响当前组件,否则该自检被引用是会影响到全局样式*/
css代码
</style>