提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
前言
提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。
提示：以下是本篇文章正文内容，下面案例可供参考
一、安装Vue工具 Vue CLI
- Vue Cli Vue开发的标准工具，基于Vue.js进行快速开发的完整系统
npm install -g @vue/cli
- 检查在cmd中输入检验是否安装成功
vue --version
- 创建项目
vue create vue-demo
vue-demo是项目名，在控制台中，可以用上下按键调整选择项，在控制台中，可以用空格(spacebar)选择是否选中和取消选中。
- Vue开发模式 MVVM
- 模板语法（插值表达式）
数据绑定最常见的形式就是使用“Mustache” (双大括号) 语法的文本插值。
<span>Message: {{ msg }}</span>
export default {
name: 'HelloWorld',
data(){
return{
msg:"消息提示"
}
}
}
- 指令
插值表达式只能将数据显示在标签中。但是如果将data数据显示在 标签的属
性中，插值表达式不能使用。
input type="text" value="{{name}}" /> 错误。
<span>{{name}}</span> 正确。
插值表达式再快速刷新页面的时候，会有闪烁的问题。v-text和v-html可以解决闪烁问题。
Mustache 语法不能在 HTML 属性中使用，然而，可以使用 v-bind或者 v-html指令。
- v-text 和 v-html指令
<!-- 插值表达式取法 -->
<h1>{{name}}</h1>
<!-- v-text指令的取法 -->
<h1 v-text="name"></h1>
<div v-bind:id="dynamicId"></div>
data(){
return{
dynamicId:1001
}
}
为了输出真正的 HTML，你需要使用v-html 指令
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
data(){
return{
rawHtml:"<a href='https://www.itbaizhan.com'>百战</a>"
}
}
注意：
- 条件渲染
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。
<p v-if="flag">我是孙猴子</p>
data() {
return {
flag: true
}
}
- v-else
v-else 指令来表示 v-if 的“else 块”
<p v-if="flag">我是孙猴子</p>
<p v-else>你是傻猴子</p>
data() {
return {
flag: false
}
}
- v-show
另一个用于条件性展示元素的选项是 v-show 指令 - v-if vs v-show 的区别
v-if 是“真正”的条件渲染，因为它会确保在切换过程中，条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好
- 列表渲染
用 v-for 把一个数组映射为一组元素， v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
<ul>
<li v-for="item in items">{{ item.message }}</li>
</ul>
data() {
return {
items: [{ message: 'Foo' }, { message: 'Bar' }]
}
}
- 维护状态
当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一的 key attribute：
<div v-for="(item,index) in items" :key="item.id|index">
<!-- 内容 -->
</div>
-
绑定事件
-
Vue中监听事件
-
事件处理方法
许多事件的处理逻辑会很复杂，所以直接把JavaSript代码写在v-on指令中是不可行的。因此v-on还可以接受一个调用方法名称。
注意：
v-on绑定事件是在项目中经常使用。所以可以进行简写。
v-on:click 绑定单击事件 是可以简写为 @click，在项目编程中，全部使用简写。
表单输入绑定
- v-model指令实现就是双向的数据绑定。数据可以从M到V，也可以从V到M。
- v-model不是所有的HTML标签都可以使用，只能在表单标签中使用（数据必须在页面
上能够修改）。 - 表单标签：文本框、密码框、单选、复选、下拉列表、多行文本框…
v-model修饰符:
- 修饰符
.lazy:
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步。
.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符
组件基础
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符
组件之间的通信
组件生命周期
每个组件在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
Axios网络请求
//局部axios get请求
axios({
method:'get',
url:"/api?type=yule&page=1&page_size=3&is_filter=1&key=28b45371e287872fbae2484fe78c6669",
}).then(res =>{
if (res!=null){
console.log(res.data.reason)
console.log(res.data.result.data)
}
})
//局部post请求
axios({
method:"post",
url:"/api",
data:qs.stringify({
type:'top',
page:1,
page_size:50,
is_filter:1,
key:'28b45371e287872fbae2484fe78c6669'
})
}).then(res=>{
console.log(res)
})
简洁写法:
//局部axios get请求
axios({
method:'get',
url:"/api?type=yule&page=1&page_size=3&is_filter=1&key=28b45371e287872fbae2484fe78c6669",
}).then(res =>{
if (res!=null){
console.log(res.data.reason)
console.log(res.data.result.data)
}
})
//局部post请求
axios({
method:"post",
url:"/api",
//需要借助第三方stringify插件工具转换
data:qs.stringify({
type:'top',
page:1,
page_size:50,
is_filter:1,
key:'28b45371e287872fbae2484fe78c6669'
})
}).then(res=>{
console.log(res)
})
Vue请求跨域
在vue.config.js中配置如下：
const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
host: '127.0.0.1',
port: 8084,
open: true,//vue项目启动时自动打开浏览器
proxy: {
'/api': { // '/api'是代理标识，用于告诉node，url前面是/api的就是使用代理的
target: "http://v.juhe.cn/toutiao/index",
changeOrigin: true, //是否跨域
pathRewrite: { // pathRewrite 的作用是把实际Request Url中的'/api'用""代替
'^/api': ""
}
}
}
}
})
Axios网络请求封装
在日常应用过程中，一个项目中的网络请求会很多，此时一般采取的方案是将网络请求封装起来
在src目录下创建文件夹utils，并创建文件request，用来存储网络请求对象 axios。
import axios from "axios";
import querystring from 'querystring';
//网络请求的公共配置
const instance = axios.create({
timeout:5000
})
const errorHandle = (status,info) => {
switch(status){
case 400:
console.log("语义有误");
break;
case 401:
console.log("服务器认证失败");
break;
case 403:
console.log("服务器拒绝访问");
break;
case 404:
console.log("地址错误");
break;
case 500:
console.log("服务器遇到意外");
break;
case 502:
console.log("服务器无响应");
break;
default:
console.log(info);
break;
}
}
//拦截器的配置
//发送数据之前
instance.interceptors.request.use(
config =>{
if (config.method ==='post'){
config.data = querystring.stringify(config.data);
}
//config包含了请求中的所有信息
return config;
},
error => {
Promise.reject(error);
}
)
// 接收数据前
instance.interceptors.response.use(
response => {
return response.status == 200 ? Promise.resolve(response) : Promise.reject((response));
},
error =>{
const {response} = error;
//错误的处理
errorHandle(response.status,response.info)
}
)
export default instance;
在src目录下创建文件夹api，并创建文件index和path分别用来存放网络请求方法和请求路径
//pash.js
const base = {
//请求根路径
bashUrl:"/api",
// 子路径
childUrl:'?type=yule&page=1&page_size=3&is_filter=1&key=5a10bce079754877d106880a2c78c550',
}
export default base;
//index.js
import axios from "../utils/requerst";
import pash from "@/api/pash";
const api = {
//get 获取头条信息
getTopNews(){
return axios.get(pash.bashUrl+pash.childUrl)
},
postGetNews(){
return axios.post(pash.bashUrl,{
type:'top',
page:1,
page_size:30,
is_filter:1,
key:'5a10bce079754877d106880a2c78c550'
})
}
}
export default api;
各个组件中调用方式
import api from "../api/index"
//封装api 请求接口
// api.getTopNews().then(res =>{
// console.log(res.data.reason)
// console.log(res.data.result.data)
// })
api.postGetNews().then(res=>{
if (res!=null){
console.log(res.data.reason)
console.log(res.data.result.data)
}
})
路由传递参数
Vue状态管理(Vuex)
31万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
