Vue笔记

Y-S-P

于 2020-11-05 09:55:13 发布

阅读量138

点赞数

分类专栏：前端知识文章标签： vue

本文链接：https://blog.csdn.net/YSPLX/article/details/109503245

版权

前端知识专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue介绍：

是⼀套⽤于构建⽤户界⾯的渐进式框架。

它的7个属性，8个方法，以及7个指令。787原则

学习vue我们必须之到它的7个属性，8个方法，以及7个指令。787原则

el属性
– 用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。
data属性
用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。
template属性
用来设置模板，会替换页面元素，包括占位符。
methods属性
放置页面中的业务逻辑，js方法一般都放置在methods中
render属性
创建真正的Virtual Dom
computed属性
用来计算
watch属性
watch:function(new,old){}
监听data中数据的变化
两个参数，一个返回新值，一个返回旧值，

// 开发版本
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

// ⽣成版本
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

基础语法：（vue声明，data数据格式）

	let vm = new Vue({
		 el:"#app", // 作⽤范围！
		 data:{ // data是⼀个对象！作⽤范围内⽤到的数据！
			 msg:"哎呦！不错哦！",
			 str:"哦哦哦",
			 arr:[11,222,444],
				 person:{
				 name:"张⻜",
				 age:20
				 }
		 }
	 })
setInterval(()=>{
	 console.log(vm.msg)
	 vm.msg += '武哥你好！'
	data⾥⾯的数据⼀旦发⽣变化了，模板⾥⾯会⾃动更新！
	错误
	 vm.str +=" ! "
 }, 1000);
 // data⾥⾯的数据⼀旦发⽣变化，模板⾥⾯就会⾃动更新！

数据使用：

<!-- 第2步：创建⼀个容器元素 -->
<div id="app" >
   <h3>{{str}}</h3>
   <h3>{{msg}}</h3>
   <p>{{ 1+1 }}</p>
   <p>{{ 10>20 ? '哈哈':'呵呵' }}</p>
   <p>{{arr}}</p>
   <p>{{person}}</p>
</div>

常见指令：

v-html	可以转义HTML字符串内容！
v-text	不可以转义HTML字符串内容
v-bind 	性绑定！

判断语句
<标签 v-if="变量/表达式"></标签> 
<标签 v-else-if="变量/表达式"></标签> 
<标签 v-else></标签>

循环语句
<标签 v-for="值 in 数组/对象"></标签>
<标签 v-for="(值,键,下标) in 对象"></标签>

绑定事件
v-on
// 模板⾥⾯
<标签 v-on:事件类型="事件函数"></标签> 
<标签 v-on:事件类型="事件函数()"></标签>
// 缩写
<标签 @事件类型="事件函数"></标签> 
<标签 @事件类型="事件函数()"></标签>

// JS ⾥⾯ （methods属性）
new Vue({
	 el:"xx",
	 data:{},
	 methods:{
		 事件函数( 可以传参）{
			 ...
		 }
	 }
})

双向绑定
核⼼指令v-model

生命周期：
在这里插入图片描述
computed属性：计算属性，本质是属性，只不过需要计算（函数）得到！
类似缓存，不需要重新渲染（不变的函数模板可以使用计算属性）

 // 计算属性本质还是属性！
let vm = new Vue({
	 el:"#app",
	 data:{
		 msg:"天王盖地⻁，⼩鸡炖蘑菇！",
		 num:1
	 },
	 computed: {
		 str:function(){
		 // return 345345345;
		 return this.msg.split("").reverse().join("")
		 }
	 },
	 methods: {
			 haha(){
			 	return	 this.msg.split("").reverse().join("")
			 }
	 }
 })

# 组件

复⽤！
代码维护容易！
开发效率⾼！

使用：
全局注册
Vue.component(‘组件名1’,{ 组件配置选项 })
Vue.component(‘组件名2’,{ 组件配置选项 })

局部注册
new Vue({
…
components:{
组件名1:{组件配置选项},
组件名2:{组件配置选项}
}
})

new Vue({
	 el:"#app",
	 components:{ // 带s! 局部注册！
		 // 组件名1:{配置选项},
		 // 组件名2:{配置选项}
		 myalert:{
		 template:"<div class='alert'>我是alert组件</div>"
		 }
	 }
 })

Vue.component('Item',{
	 // template:'<h3>我是组件啊</h3>' // 组件的模板内容！
	 template:`
	 <div class="item">
		 <h3>
			 <span>标题</span>
			 <a href="">更多</a>
		 </h3>
			 <div class="content">
				 <img src=""/>
					 <ul>
						 <li>123123123123</li>
						 <li>123123123123</li>
					 </ul>
			 </div>
	 </div>
	 `
 })

组件数据通信：
⾃定义属性props!
组件有⼀个props配置选项，决定组件的⾃定义属性！

// ⽗的模板⾥⾯
<⼦组件名 ⾃定义属性名="数据" ⾃定义属性名2="数据" />

// ⼦组件JS⾥⾯
props:['⾃定义属性名','⾃定义属性名2'] // 这些⾃定义属性都是这个组件实例的属
性，可以直接在模板中使⽤！

对象写法：
props:{
	 属性名:类型 // 单类型校验！
	 属性名:[类型1，类型2,...] // 多类型校验
	 属性名:{ // 验证描述
	 type:类型， [类型1，类型2,...] // 校验类型
	 default:"默认值", // 默认值！
	 default(){ // 当⾃定属性的类型为引⽤数据类型的时候
	 return 对象/数组
	 },
	 validator(val){ // val就是属性值！ 函数返回⼀个布尔值，true表示通过验
	证，false表示验证不通过
	 // ⾃定义校验功能
	 return true/false
	 }
	 }
}

自定义事件：

⾃定义事件
实现
配图
// ⽗的模板⾥⾯
<⼦组件 @⾃定义事件名="⽗的事件函数" />
// ⽗的JS⾥⾯
methods:{
 ⽗的事件函数(形参){
 ....
 } }
this.$emit('⾃定义事件',实参)

在这里插入图片描述

插槽
// ⽗组件模板⾥⾯
<组件名>
⾃定义HTML⽚段
</组件名>

// 组件模板⾥⾯

// ⽗组件模板⾥⾯
<组件名>
 // ⽼语法！
 <template slot="名称1">⾃定义HTML⽚段</template>
 <template slot="名称2">⾃定义HTML⽚段</template>
 <template slot="default">⾃定义HTML⽚段</template>
 // 新语法！
 <template v-slot:名称1>⾃定义HTML⽚段</template>
 <template v-slot:名称2>⾃定义HTML⽚段</template>
 <template v-slot:default>⾃定义HTML⽚段</template>
 // 新语法的简写
 <template #名称1>⾃定义HTML⽚段</template>
 <template #名称2>⾃定义HTML⽚段</template>
 <template #default>⾃定义HTML⽚段</template>
</组件名>

// 组件模板⾥⾯
<slot name="default"></slot> <slot name="名称1"></slot> <slot name="名称2"></slot>

路由-router
创建和配置

import Vue from "vue";
import VueRouter from "vue-router";
// 安装vue-router插件
Vue.use(VueRouter);
// 导⼊相关组件
import Index from "@/pages/Index"
import About from "@/pages/About"
import News from "@/pages/News"
import User from "@/pages/User"
import Login from "@/pages/Login"

// 实例化⼀个路由对象！
// new VueRouter({配置对象})
let router = new VueRouter({
 routes: [ // routes 路由映射， 什么地址展示什么组件！
 { path: "/", component: Index },
 { path: "/about", component: About },
 { path: "/news", component: News },
 { path: "/user", component: User },
 { path: "/login", component: Login },
 ]
})
// 暴露出去！
export default router;


挂在vue实例上
// main.js中！
import Vue from 'vue'
import App from './App'
// 导⼊路由实例！
import router from "./router"
Vue.config.productionTip = false
new Vue({
	 el: '#app',
	 		// router: router,
	 router, 
	 // 【重要！重要！重要！ ⼀旦路由挂载到vue实例⾥⾯，所有的组件⾥⾯都会有$rouer和$route两个属性！】
	 components: { App },
	 template: '<App/>'
})

在App.vue中放⼊展示组件
<router-view></router-view>
利⽤ router-link 当作a标签进⾏渲染！

---
给路由取名！
routes:[
 { path:"/地址", name:"名称", component:组件 }
 ]

 router-link 可以采⽤命名路由跳转
 <router-link to="/地址"></router-link> <router-link :to="{name:'名称',params:{标识符:数据},query:{属性名:数据}}"></routerlink>

 重定向
访问某个地址，给你重新转到另外⼀个地址去！
routes:[
 { path:"/地址", name:"名称", component:组件, redirect:"/地址2" } // 访问 /地址 
的时候会⾃动跳转到 /地址2 去！！！
 ]

404配置
routes:[
 ...
 // 404配置放在路由映射⾥⾯的最下⾯！
 { path: "*", name:"404", component: NotFound },
 ]

axios：是⼀个http请求库！本质就是⼀个封装好的ajax请求！

// axios({
// url:"请求地址",
// method:"请求⽅式",
// data:{ post提交的参数 },
// params:{ get⽅式提交的参数 },
// headers:{ 请求头的配置 },
// baseURL:"前缀地址",
// timeout:"请求时⻓"
// }).then(res=>{ res是axios处理好的相应数据，res.data才是真正的服务器端返回
的数据 })


---
axios.get()
// axios({
// url:"请求地址",
// method:"请求⽅式",
// data:{ post提交的参数 },
// params:{ get⽅式提交的参数 },
// headers:{ 请求头的配置 },
// baseURL:"前缀地址",
// timeout:"请求时⻓"
// }).then(res=>{ res是axios处理好的相应数据，res.data才是真正的服务器端返回
的数据 })
// axios.get("请求地址",{ 配置对象 }).then(res=>{ ... })
// axios.get("请求地址?key=val&key2=val2").then(res=>{ ... })
// axios.get("请求地址",{ params:{key:val,key2:val2} }).then(res=>{ ...
})
axios.post()
// axios.post("请求地址",{post提交的参数},{ 配置对象 }).then(res=>{ ... })
// axios.post("请求地址",{key:val,key2:val2},{ headers:{} }).then(res=>{
... })
axios.all()
// 请求1 = axios.get("请求地址")
// 请求2 = axios.get("请求地址")
// axios.all([请求1，请求2]).then(res=>{ res是⼀个数组！ })
axios.create()
/*
// axios.create({配置对象}) // 创建了⼀个axios实例！！！
let $axios = axios.create({
baseURL:"基准前缀地址",
timeout:"请求时⻓"
})
*/
// 创建出来的实例没有all和create⽅法！