Vue简介
1什么vue
1.1Vue是一套用于构建用户界面的前端框架
1.2构建用户界面用vue往html页面中填充数据
1.3框架是一套现成的解决方案
2vue 的特性
2.1数据驱动视图
在使用了vue的页面中，vue会监听数据的变化。从而自动重新渲染页面的结构，当页面数据发生变化时，页面会自动重新渲染，注意数据驱动视图是单向的数据绑定
2.2双向数据绑定
在网页中。from表单负责采集数据，ajax负责提交数据。
在填写表单时，双向数据绑定可以辅助开发者在不同的dom的前提下，自动把用户填写的内容同步到数据源中，开发者不再需要手动操作dom元素，来获取表单元素最新的值。
js数据变更，会自动的渲染到页面上，页面上的表单采集的数据发生变换的时候，会被vue自动获取到，并更新到js数据中
3MVVM
3.1MVVM是uve实现的数据驱动图和双向数据绑定的核心原理
3.2MVVM指的是Model（表示当前页面的渲染时所依赖的数据源）、view（表示当前页面所渲染的DOM结构）和viewmodel（表示vue的实例，它是MVVM的核心），它把每个HTNL页面都拆分成了这三 个部分
3.3MVVM的工作原理：
viewmodel作为MVVM的核心，是他把当前页面的数据源（model）和页面的结构（view）链接在了一起
vue的基本使用
1.基本使用步骤
1.1导入vue.js的script脚本文件
<!-- 导入vue的库文件 --> <script src="./lib/vue-2.6.12.js"></script>
1.2在页面中声明一个将要被vue所控制的dom区域
<!-- 希望vue能够控制下面这个div，帮我们把数据填充到div内部 --> <div id="app">{{ username }}</div>
1.3创建vm实例对象
<script >
//创建vue的实例对象 new一个构造函数
const vm= new Vue({
//el属性是固定写法表示当前vm实例要控制页面上的那个区域，接受到的值是一个选择器
el:'#app'
//data这个对象就是要渲染到页面上的数据
data: {
username: 'zhangsan'
}
})
</script>
vue的调试工具
1.1vue官方提供的vue-devtools调试工具，能够方便开发者对vue的项目进行调试
1.2chrome浏览器https://chrome.google.com/webstore/category/extensions
1.3点击chrome浏览器右上角
按钮，选择更多工具>扩展程序>Vue.js devtools 详细信息，并且勾选两个选项
1.4使用 vue-devtools 调试 vue 页面
在浏览器中访问一个使用了 vue 的页面，打开浏览器的开发者工具，切换到 Vue 面板，即可使用 vue-devtools
调试当前的页面。
vue的指令与过滤器
1. 指令的概念
1.1指令（Directives）是vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构.
2.1vue中的指令按照不同的用途可以分为6大类：
① 内容渲染指令
② 属性绑定指令
③ 事件绑定指令
④ 双向绑定指令
⑤ 条件渲染指令
⑥ 列表渲染指令
2.1.1内容渲染指令：用来辅助开发者渲染DOM元素的文本内容
v-textz指令
<body> <!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 --> <script src="./lib/vue-2.6.12.js"></script> <!-- 希望 Vue 能够控制下面的这个 div，帮我们在把数据填充到 div 内部 --> <div id="app"> <p v-text="username" ></p> <!--缺点如果强制渲染v-text指令会把原先的内容覆盖 --> <p v-text="gender"> 性别</p> </div> <!-- 2. 创建 Vue 的实例对象 --> <script> // 创建 Vue 的实例对象 const vm = new Vue({ // el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器 el: '#app', // data 对象就是要渲染到页面上的数据 data: { username: 'zhangsan', gender: '女' } }) </script> </body>
{{}}指令：专门用来解决v-text会覆盖默认文本内容问题，这种{{}}语法的专业名称是插值表达式（英文名:Mustache)
<body> <!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 --> <script src="./lib/vue-2.6.12.js"></script> <!-- 希望 Vue 能够控制下面的这个 div，帮我们在把数据填充到 div 内部 --> <div id="app"> <!-- 在实际开发中用的最多，只是内容的占位符，不会覆盖原先有的内容 --> <p>姓名：{{ username }}</p> <p>性别：{{ gender }}</p> </div> <!-- 2. 创建 Vue 的实例对象 --> <script> // 创建 Vue 的实例对象 const vm = new Vue({ // el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器 el: '#app', // data 对象就是要渲染到页面上的数据 data: { username: 'zhangsan', gender: '女' } }) </script> </body>
v_html指令：如果要把包含html标签的字符串渲染为页面的html元素，则需要用到v-html这个指令
<body> <!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 --> <script src="./lib/vue-2.6.12.js"></script> <!-- 希望 Vue 能够控制下面的这个 div，帮我们在把数据填充到 div 内部 --> <div id="app"> <!-- 可以把带有标签的字符串，渲染成真正的html标签内容 --> <div v-html="info"></div> </div> <!-- 2. 创建 Vue 的实例对象 --> <script> // 创建 Vue 的实例对象 const vm = new Vue({ // el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器 el: "#app", // data 对象就是要渲染到页面上的数据 data: { username: "zhangsan", gender: "女", info:'<h4 style="color: red font-weight: bold"> Hello VUE.js</h4>' }, }); </script> </body
2.2.2属性绑定指令：如果需要为元素的属性动态绑定属性值，则需要用到v-bind属性绑定的指令
<body> <!-- 希望 Vue 能够控制下面的这个 div，帮我们在把数据填充到 div 内部 --> <div id="app"> <!-- vue规定 v-bind指令可以简写为 ： --> <input type="text" :placeholder="tips"> <hr><img v-bind:src="photo" alt="" style="width:150px;" > </div> <!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 --> <script src="./lib/vue-2.6.12.js"></script> <!-- 2. 创建 Vue 的实例对象 --> <script> // 创建 Vue 的实例对象 const vm = new Vue({ // el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器 el: '#app', // data 对象就是要渲染到页面上的数据 data: { tips:'请输入用户名', photo:'http://cn.vuejs.org/images/logo.svg' } }) </script> </body>
2.2.3使用javasript表达式：在vue提供的模板渲染语法中，支持javascript表达式的运算
<body> <!-- 希望 Vue 能够控制下面的这个 div，帮我们在把数据填充到 div 内部 --> <div id="app"> <div> 1+3的结果为：{{1+3}} </div> <div>{{tips}}的反转结果为：{{tips.split('').reverse().join('')}}</div> <div v-bind:title="'box'+index"></div> </div> <!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 --> <script src="./lib/vue-2.6.12.js"></script> <!-- 2. 创建 Vue 的实例对象 --> <script> // 创建 Vue 的实例对象 const vm = new Vue({ // el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器 el: '#app', // data 对象就是要渲染到页面上的数据 data: { idnex:3 } }) </script> </body>
2.2.4事件绑定指令： 提供了v-on的指令，用来辅助程序员为dom元素绑定事件监听。
<body> <!-- 希望 Vue 能够控制下面的这个 div，帮我们在把数据填充到 div 内部 --> <div id="app"> <p>count 的值是：{{count}}</p> <!-- v-on绑定事件指令 在绑定事件的时候可以小括号来传递参数 --> <button v-on:click="add(2)">+1</button> <!-- 使用@可以简化v-on --> <button @click="sub">-1</button> </div> <!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 --> <script src="./lib/vue-2.6.12.js"></script> <!-- 2. 创建 Vue 的实例对象 --> <script> // 创建 Vue 的实例对象 const vm = new Vue({ // el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器 el: '#app', // data 对象就是要渲染到页面上的数据 data: { count: 0 }, //定义事件处理函数 methods: { add: function (n) { console.log(vm.count += n) }, //简写：function sub() { //第二种写法使用this当前对象 this.count -= 1 } } }) </script> </body>
2.2.4.1事件绑定指令： - $enent在原生的 DOM 事件绑定中，可以在事件处理函数的形参处，接收事件参数对象 event。同理，在 v-on 指令（简写为 @ ）所绑定的事件处理函数中，
同样可以接收到事件参数对象 event.
<body> <!-- 希望 Vue 能够控制下面的这个 div，帮我们在把数据填充到 div 内部 --> <div id="app"> <p> count的值为:{{count}}</p> <!-- 如果count是偶数则按钮背景颜色为红色，反之取消背景颜色 --> <!-- vue提供了内置变量 $event 他就是原生的dom的事件对象 e --> <button @click="add(1,$event)">+n</button> </div <!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 --> <script src="./lib/vue-2.6.12.js"></script> <!-- 2. 创建 Vue 的实例对象 --> <script> // 创建 Vue 的实例对象 const vm = new Vue({ // el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器 el: '#app', // data 对象就是要渲染到页面上的数据 data: { count: 0 }, methods:{ add(n,e){ this.count+=n //判断 this.count的值是否为偶数 if(this.count % 2===0){ //偶数 e.target.style.backgroundColor='red' }else{ //奇数 e.target.style.backgroundColor='' } } } }) </script> </body>
2.2.5事件修饰符:在事件处理函数调用event.prevenDefault()或者event.stopPropagation()是非常常见的需求，vue提供了事件修饰符的概念
<body> <!-- 希望 Vue 能够控制下面的这个 div，帮我们在把数据填充到 div 内部 --> <div id="app"> <a href="http://www.baidu.com" @click.prevent="show">点击跳转到百度页面</a> <hr> <div style="height: 150px; background-color: orange; padding-left: 100px; line-height:150px " @click="divHandler"> <!-- 阻止事件冒泡 --> <button @click.stop="btnHandler">按钮</button> </div> </div> <!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 --> <script src="./lib/vue-2.6.12.js"></script> <!-- 2. 创建 Vue 的实例对象 --> <script> // 创建 Vue 的实例对象 const vm = new Vue({ // el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器 el: '#app', // data 对象就是要渲染到页面上的数据 data: { }, methods:{ show(){ console.log('点击了链接s') }, btnHandler(){ console.log('btnHandler') }, divHandler(){ console.log('divHandler') } } }) </script> </body>
2.2.6按键修饰符:在监听键盘事件时，我们经常需要判断详细的按键，此时，可以为键盘相关的事件添加按键修饰符
<body> <!-- 希望 Vue 能够控制下面的这个 div，帮我们在把数据填充到 div 内部 --> <div id="app"> <input type="text" @keyup.esc="clearInput"> <input type="text" @keyup.enter="submit"> </div> <!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 --> <script src="./lib/vue-2.6.12.js"></script> <!-- 2. 创建 Vue 的实例对象 --> <script> // 创建 Vue 的实例对象 const vm = new Vue({ // el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器 el: '#app', // data 对象就是要渲染到页面上的数据 data: {}, methods: { clearInput(e){ console.log('触发了clearInput方法') e.target.value='' }, submit(){ console.log('submit') } }, }) </script> </body>
2.2.7双向绑定指令：用来辅助开发者在不操作dom的前提下，快速获取表单数据，vue提供了v-model双向数据绑定
body> <!-- 希望 Vue 能够控制下面的这个 div，帮我们在把数据填充到 div 内部 --> <div id="app"> <p>用户名字是：{{username}}</p> <input type="text" v-model="username"> <hr> <input type="text" :value="username"> <hr> <select v-model="address"> <option value="1">北京</option> <option value="1">上海</option> <option value="1">广州</option> </select> </div> <!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 --> <script src="./lib/vue-2.6.12.js"></script> <!-- 2. 创建 Vue 的实例对象 --> <script> // 创建 Vue 的实例对象 const vm = new Vue({ // el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器 el: '#app', // data 对象就是要渲染到页面上的数据 data: { username: 'zhangsan', address:''
} }) </script> </body>
2..2.7.1v-model指令的修饰符
<body> <!-- 希望 Vue 能够控制下面的这个 div，帮我们把数据填充到 div 内部 --> <div id="app"> <!-- v-moidel.number指令的修饰符:自动将用户输入的值转换为数值类型 --> <input type="text" v-model.number="n1">+<input type="text" v-model.number="n2"><span>{{n1+n2}}</span> <hr> <!--v-moidel.trtim 自动过滤用户输入的首尾空白字符 --> <input type="text" v-model.trim="username"> <button @click="showName">获取用户姓名</button> <hr> <!-- v-moidel.lazy延迟更新input中的数据 --> <input type="text" v-model.lazy="username"> </div> <!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 --> <script src="./lib/vue-2.6.12.js"></script> <!-- 2. 创建 Vue 的实例对象 --> <script> // 创建 Vue 的实例对象 const vm = new Vue({ // el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器 el: '#app', // data 对象就是要渲染到页面上的数据 data: { username: 'zhangsan', n1:1, n2:2 }, method:{ showName(){ console.log('用户名称是："${this.username}"') } } }) </script> </body>
2.2.8条件渲染指令:用来辅助开发者按需控制DOM的显示与隐藏分别是 v-if（当if为tuue时创建动态元素反之删除） ,v-show（当show为true时添加style中的display属性反之删除）,
同样是显示和隐藏但是这边建议大家使用v-show
<body> <!-- 希望 Vue 能够控制下面的这个 div，帮我们把数据填充到 div 内部 --> <div id="app"> <p v-if="flag">这是if控制的元素</p> <p v-show="flag">这是show控制的元素</p> </div> <!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 --> <script src="./lib/vue-2.6.12.js"></script> <!-- 2. 创建 Vue 的实例对象 --> <script> // 创建 Vue 的实例对象 const vm = new Vue({ // el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器 el: '#app', // data 对象就是要渲染到页面上的数据 data: { flag:true } }) </script> </body>
2.2.8列表渲染指令(v-for)：是辅助开发者基于一个数组来循环渲染一个列表结构. 此指令需要使用item(被循环的每一项) in ite ms（带循环的数组）的形式的特殊语法
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入bootstarap -->
<link rel="stylesheet" href="./lib/bootstrap.css">
</head>
<body>
<!-- 希望 Vue 能够控制下面的这个 div，帮我们把数据填充到 div 内部 -->
<div id="app">
<table class="table table-bordered table-hover table-striped">
<thead>
</thead>
<tbody>
<!-- 建议：只要用到了v-for的命令那一定要绑定一个：key的属性，尽量把id作为key的值，key的值是唯一的-->
<tr v-for="(item,index) in list" :key="item.id">
<!-- v-for指令还支持可选的第二个参数，即当前项的索引语法格式为：（item，index）in itmes如下 -->
<td>{{index}}</td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
</div>
<!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 -->
<script src="./lib/vue-2.6.12.js"></script>
<!-- 2. 创建 Vue 的实例对象 -->
<script>
// 创建 Vue 的实例对象
const vm = new Vue({
// el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器
el: '#app',
// data 对象就是要渲染到页面上的数据
data: {
list:[
{id:1,name:'张三'},
{id:2,name:'李四'},
{id:3,name:'王五'},
{id:4,name:'赵六'},
]
}
})
</script>
</body>
3过滤器
1.1过滤器（filters） 常用于文本的格式化，可以用在两个地方：插值表达式和v-bind属性绑定，过滤器应该添加到javascript表达式的尾部，由管道符进行调用。
<body> <div id="app"> <p>message 的值是：{{ message | capi }}</p> </div> <script src="./lib/vue-2.6.12.js"></script> <script> const vm = new Vue({ el: '#app', data: { message: 'hello vue.js' }, // 过滤器函数必须定义到filters结点之下 filters:{ //过滤器函数形参中的val永远是管道符前面的那个值 capi(val){ //charat方法接受索引值表示从字符串中把索引对应的字符获取出来 const fisrt=val.charAt(0).toUpperCase() //字符串有自带的chart方法可以截取字符串从指定索引往后截取 const other=val.slice(1) //过滤器中必须要有返回值 return fisrt+other } } }) </script> </body>
1.2 全局过滤器在多个vue实例之间共享过滤器，则可以按照格式定义全局过滤器
<body> <div id="app"> <p>message 的值是：{{ message | capi }}</p> </div> <div id="app2"> <p>message 的值是：{{ message | capi }}</p> </div> <script src="./lib/vue-2.6.12.js"></script> <script> // 使用vue.filter（）定义全局过滤器 Vue.filter('capi',function(str){ const fisrt= str.charAt(0).toUpperCase() const other=str.slice(1) return fisrt+other+'-----' }) const vm = new Vue({ el: '#app', data: { message: 'hello vue.js' }, // 过滤器函数，必须被定义到 filters 节点之下 // 过滤器本质上是函数 filters: { // 注意：过滤器函数形参中的 val，永远都是“管道符”前面的那个值 capi(val) { // 字符串有 charAt 方法，这个方法接收索引值，表示从字符串中把索引对应的字符，获取出来 // val.charAt(0) const first = val.charAt(0).toUpperCase() // 字符串的 slice 方法，可以截取字符串，从指定索引往后截取 const other = val.slice(1) // 强调：过滤器中，一定要有一个返回值 return first + other } } }) // ---------------------------------- const vm2 = new Vue({ el: '#app2', data: { message: 'heima' } }) </script> </body>
4侦听器
1.1watch允许开发者监视数据的变化，从而针数据的变化做特定的工作语法格式如下：
<body> <div id="app"> <input type="text" v-model="username"> </div> <script src="./lib/vue-2.6.12.js"></script> <script src="./lib/jquery-v3.6.0.js"></script> <script> const vm = new Vue({ el: '#app', data: { username: '' }, //所有的监听器都应该被定义到watch节点下 watch: { //侦听器本质上就是一个函数，要监视那个数据的变化，就把数据名作为方法名 username(newVal) { if(newVal==='') return //调用j'quertry中的Ajax发起请求 $.get('https://wwww.escook.cn/api/finduser/'+newVal,function(result){ console.log(result); }) } } }) </script> </body>
1.2immediate选项：默认情况下，组件在初次加载完毕后不会调用watch侦听器。如果让watch侦听器立即被调用，则需要使用immediate选项代码如下：
<body> <div id="app"> <input type="text" v-model="username"> </div> <script src="./lib/vue-2.6.12.js"></script> <script src="./lib/jquery-v3.6.0.js"></script> <script> const vm = new Vue({ el: '#app', data: { username:'admin' }, //定义对象格式的侦听器 watch:{ username:{ //侦听器的处理函数 handler(newVal,oldVal){ console.log(newVal,oldVal) }, //选项的默认值是false 作用是控制侦听器是否自动触发一次 immediate:true } } }) </script> </body>
1.3deep开启深度监听，只要对象中任何一个属性变化了，都会触发对象的监听器
<body> <div id="app"> <input type="text" v-model="info.username"> </div> <script src="./lib/vue-2.6.12.js"></script> <script src="./lib/jquery-v3.6.0.js"></script> <script> const vm = new Vue({ el: '#app', data: { //用户的信息对象 info:{ username:'admin' } }, // 所有的侦听器，都应该被定义到 watch 节点下 watch: { info:{ handler(newVal){ console.log(newVal) }, //开启深度监听，只要对象中任何一个属性变化了，都会触发对象的监听器 deep:true }
} }) </script> </body>
5计算属性
1.计算属性指的是通过一系列的运算之后，最终得到一个属性值，这个动态计算出的属性值可以被模板结构或者methods方法使用
<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="./lib/vue-2.6.12.js"></script> <style> .box { width: 200px; height: 200px; border: 1px solid #ccc; } </style> </head> <body> <div id="app"> <div> <span>R：</span> <input type="text" v-model.number="r"> </div> <div> <span>G：</span> <input type="text" v-model.number="g"> </div> <div> <span>B：</span> <input type="text" v-model.number="b"> </div> <hr> <!-- 专门用户呈现颜色的 div 盒子 --> <!-- 在属性身上，: 代表 v-bind: 属性绑定 --> <!-- :style 代表动态绑定一个样式对象，它的值是一个 { } 样式对象 --> <!-- 当前的样式对象中，只包含 backgroundColor 背景颜色 --> <div class="box" :style="{ backgroundColor: rgb }"> {{ rgb }} </div> <button @click="show">按钮</button> </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { // 红色 r: 0, // 绿色 g: 0, // 蓝色 b: 0 }, methods: { // 点击按钮，在终端显示最新的颜色 show() { console.log(this.rgb) } }, // 所有的计算属性，都要定义到 computed 节点之下 // 计算属性在定义的时候，要定义成“方法格式” computed: { // rgb 作为一个计算属性，被定义成了方法格式， // 最终，在这个方法中，要返回一个生成好的 rgb(x,x,x) 的字符串 rgb() { return `rgb(${this.r}, ${this.g}, ${this.b})` } } }); console.log(vm) </script> </body>
6axios请求
1.1 axios是一个专注于网络请求的库！ 基本语法如下：
<body> <button id="btnPost">发起POST请求</button> <button id="btnGet">发起GET请求</button> <script src="./lib/axios.js"></script> <script> //async修饰的方法中 document.querySelector('#btnPost').addEventListener('click',async function(){ //如果调用某个方法的返回值是promise实例则前面可以添加await，只能用在被async修饰的方法中 const {data}/*使用结构赋值*/ =await axios({ //请求方式 method:'POST', //请求地址 url:'http://www.liulongbin.top:3006/api/getbooks', daya:{ name:'zs', age:20 } }) console.log(data); }) // 调用axios之后使用awati async进行简化 // 使用结构赋值从axios封装的大对象中把data属性结构出来 // 把结构出来的data属性使用：冒号进行重命名 document.querySelector('#btnGet').addEventListener('click', async function(){ //结构赋值以后可以对对象重命名 const {data:result}= await axios({ //请求方式 method:'GET', //请求地址 url:'http://www.liulongbin.top:3006/api/getbooks', }) console.log(result.data) }) </script> </body>
1.2直接发起GET和POST请求
<body> <button id="btnGET">GET</button> <button id="btnPOST">POST</button> <script src="./lib/axios.js"></script> <script> //GET请求 document.querySelector('#btnGET').addEventListener('click',async function(){ const {data:result}=await axios.get('http://www.liulongbin.top:3006/api/getbooks',{ params:{id:1} }) console.log(result); }) //POST请求 document.querySelector('#btnPOST').addEventListener('click',async function(){ const{data:result} =await axios.post('http://www.liulongbin.top:3006/api/getbooks',{name:'zs' ,gender:'女'}) console.log(result) }) </script> </body>
1.3vue-cli开发的标准工具，基于webpack创建工程化的vue项目的过程。
4安装和使用
1.4.1 vue-cli是npm上的一个全局包，使用npm install命令（npm install -g @vue/cli），安装到电脑上
1.4.2请选择一个预设（建议选择第三个自定义配置）
1.4.3 选择所需要的配置
1.4.4选择vue的一个版本（默认2.x）
1.4.5选这Less
1.4.6第三放的插件需要放置的路径（默认第一项）
1.4.7预设可以下一次使用
1.4.8创成功
1.4.9编译成功
vue组件
1.什么是组件化开发:根据封装的思想，把页面上可重用的UI结构封装为组件
2.vue规定以 .vue后缀结尾的文件就是组件
3vue的三个组成部分
3.1template-> 组件的模板结构
3.2script->组件的Javascript行为
3.3style->组建的样式
<template> <div class="test-box"> <h3>这是用户自定义的test.vue {{ username }}</h3> </div> </template> <script> //默认导出。这是固定写法 export default { //组件中的data不能像之前那样，不能指向对象，组件中的data必须是一个函数 /*data数据源*/data() { //return出去{}中可以定义数据 return { username: "admin", }; }, }; </script> <style > .test-box { background-color: blue; } </style>
4在组件中定义methods方法
<template> <div class="test-box"> <h3>这是用户自定义的test.vue {{ username }}</h3> <button @click="changageName">修改用户名称</button> </div> </template> <script> //默认导出。这是固定写法 export default { //组件中的data不能像之前那样，不能指向对象，组件中的data必须是一个函数 /*data数据源*/data() { //return出去{}中可以定义数据 return { username: "admin", } }, methods:{ changageName(){ //当前的this是组件中实例 this.username='公田' } } }; </script> <style > .test-box { background-color: blue; } </style>
5.启动less语法
<style lang="less"> // 需要在style标签中定义lang属性启用 .test-box { background-color: blue; h3{ color:red; } } </style>
4组件之间的父子关系
1.1在vue中封装了三个组件，组件在被封装好以后彼此之间是独立的，不存在父子关系
1.2若在项目中使用这些组件的时候，根据彼此之间的嵌套关系，形成了父子关系和兄弟关系
2使用组件的三个步骤
2.1使用import语法导入需要的组件
import Count from '@/components/Count.vue'
2.2使用components节点注册组件
//注册组件
components: {
//自定义标签名称
Left,
Right,
HelloWorld
}
2.3以标签的形式使用刚才的组件
<div> <!-- 渲染组件 --> <Left></Left> <Right></Right> <HelloWorl ></HelloWorl> <MyCount></MyCount> </div>
3注册全局组件
3.1在vue项目中main.js入口文件中，通过vue.component（）方法，可以注册全局组件
//导入需要全局注册的组件
import Count from '@/components/Count.vue'
Vue.config.productionTip = false
//参数1 字符串格式 表示组件的注册名称
//参数2 需要被全局注册的那个组件
Vue.component('MyCount',Count)
4组件的props
1.1props是组件的自定义属性在封装通用组件的时候，props可以提高组件的复用性，组件中封装的自定义属性是只读的，程序员不能直接修改 props 的值。否则会直接报错：
<script> export default { //props是自定义属性，允许使用者通过自定义属性，为当前组件指定初始化值 跟data函数同一级 //自定义属性的名字是封装者自己定义的，可以在直接在模板结构使用 props:['init'], data(){ return{ count: 0 } }, methods:{ add(){ this.count+=1 } } } </script>
1.2如果需要修改props的值，可以把props的值转储到data中，data中的数据可读可写
<script> export default { //props是自定义属性，允许使用者通过自定义属性，为当前组件指定初始化值 跟data函数同一级 //自定义属性的名字是封装者自己定义的 props:['init'], data(){ return{ count: this.init //把this.init的值转存到count中 } }, methods:{ add(){ this.count+=1 } } } </script>
1.3在声明自定义属性时，可以通过 default 来定义属性的默认值。
<script> export default { //props是自定义属性，允许使用者通过自定义属性，为当前组件指定初始化值 跟data函数同一级 //自定义属性的名字是封装者自己定义的 // props:['init'],
//对象格式的props props:{ init:{ //如果用户在外界传值的话，default默认不生效，反之用户没有传值default生效 //用default定义默认值 default:0 } }, data(){ return{ count: this.init //把this.init的值转存到count中 } }, methods:{ add(){ this.count+=1 } } } </script>
1.4在声明自定义属性时，可以通过type来定义属性的值类型
props:{
init:{
//如果用户在外界传值的话，default默认不生效，反之用户没有传值default生效
//用default定义默认值
default:0,
//定义默认值的类型
type:Number
}
1.5props的required必填项强制用户必须传递属性的值，和默认值没关系
props:{
init:{
//如果用户在外界传值的话，default默认不生效，反之用户没有传值default生效
//用default定义默认值
default:0,
//定义默认值的类型
type:Number,
//开启必填项
required:true
}
浙公网安备 33010602011771号