Vue学习总结

高超不爱笑

已于 2022-11-24 14:04:39 修改

阅读量258

点赞数 1

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

于 2020-09-24 14:17:14 首次发布

本文链接：https://blog.csdn.net/weixin_45453240/article/details/108766237

版权

前端专栏收录该内容

7 篇文章

订阅专栏

概述

是一套用于构建用户界面的渐进式框架，遵循 MVVM 模式，与React，AngularJS 并称为前端的三大框架
编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发，本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目
扩展插件
- vue-cli: vue 脚手架
- vue-resource(axios): ajax 请求
- vue-router: 路由
- vuex: 状态管理
- vue-lazyload: 图片懒加载
- vue-scroller: 页面滑动相关
- mint-ui: 基于 vue 的 UI 组件库(移动端)
- element-ui: 基于 vue 的 UI 组件库(PC 端)
MVVM架构：V是View（页面）即DOM，M：Model（服务器上的业务逻辑操作）即JavaScript Object，VM：ViewModel（Model与View之间核心枢纽）即vue，VM数据是双向绑定的

实例

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="/js/vue/vue.js" ></script>
</head>
<body>
	<div id="app">{{msg}}</div>
	<script>
		let vm= new Vue({
			el:"#app", //不能指向 html,body标记.通常使用div标记
			data:{
				msg:"hello Vue" //数据区域
			}
		});
	</script>
</body>
<html>

模板语法

模板语法：Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

<!-- 数据部分 -->
<script>
	let vm= new Vue({
		el:"#app", //不能指向 html,body标记.通常使用div标记
		data:{
			msg:"hello Vue" //数据区域
		}
		methods:{
			function show(){
				console.log("hello Vue")
			}
		}
	});
</script>

插值属性

语法：{{ 变量名称 }} //支持表达式

过滤器：{{ message | capitalize }}

过滤器函数总接受表达式的值作为第一个参数

let vm= new Vue({
  // ...
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

v-cloak指令

解决插值表达式闪烁问题
语法：

<div id="app" v-cloak>
    {{context}}
</div>
// css
[v-cloak]{
    display: none;
}

v-text指令

解决插值表达式闪烁问题，是属性非插值，覆盖原文本内容
语法：

<h1 id="app1" v-text="'今天是'+year+'年'+month+'月'"></h1> 
var app1 = new Vue({ 
	el : "#app1", 
	data : { 
		year : new Date().getFullYear(), 
		month : new Date().getMonth()+1 
	} 
})

v-html指令

把内容填充到标签之间，解析HTML元素
语法：

<div id="app" v-html="msg"></div>

v-bind指令

数据绑定，简写为"："
语法：

<div id="app" v-bind:title="msg"></div>

v-on指令

事件绑定，简写为"@"
语法：

<div id="app" v-on:click="msg"></div>

事件修饰符
- @click.stop 阻止事件冒泡
- @click.prevent 阻止默认行为
- @click.capture 捕获触发事件机制
- @click.self 点击当前事件触发
- @click.once 只触发一次

v-model指令

数据双向绑定
语法：

<div id="app" v-model="msg">绑定data中的msg</div>

样式属性

class

:class="['a','b']" 数组样式
:class="[data中的flag？'a':'b']" 三元表达式
:class="[{'a',flag}]" 嵌套对象
:class="{data中的属性名：标识符}"

style

:style="{color：'red'}"
:style="data中的属性"
:style="[属性1，属性2]"

v-for指令

循环指令
语法：

<div id="app" v-for="item in list"></div>

逻辑指令

v-if语法：

<div id="app" v-if="flag"></div>
<div id="app" v-else="flag"></div>

v-show指令

<!-- 显示与隐藏 -->
<div id="app" v-show="flag"></div>

自定义指令

全局指令

Vue.directive('指令名称', {
	钩子函数：function(el){
		el.focus()
	}
}

局部指令

var app1 = new Vue({
	directives:{
		"指令名称":{
			钩子函数：function(el){
				el.focus()
			}
		}
	}
})

组件

是一个微型的vm对象. 也有视图部分 template ,也有数据部分 data ,data不是对象,是方法.方法里面返回对象.data里面的变量都是局部变量,只在组件内部有效，组件中的元素必须有根节点

全局组件

方式一

var com = vue.extend({
	template:'组件的HTML结构'
})
vue.component('组件名'，com)

方式二

vue.component('组件名'，{
	template:'组件的HTML结构',
	data:function(){
		return {
			msg:"hello component"
		}
	}
})

方式三

<template id='id名'></template>
vue.component('组件名'，{template:'#id名'})

局部组件

var app1 = new Vue({
	组件名：{
		template：'#id名或组件的HTML结构'
	}
	data:function(){
		return {
			msg:"hello component"
		}
	}
})

组件传值

<template id="coma">
	<div>
		<div>head {{title}}</div>
		<ul>
			<li v-for=" t in fudata" > <a :href="t.url">{{t.text}} </a></li>
		</ul>
	</div>
</template>
<template id="coma">
	<div>
		<div>body {{title}}</div>
	</div>
</template>
let componetA={
	template:"#coma",
	data:function () {
		return { title:"A标题" }
	},
	props:["fudata"]
}
let componetB={
	template:"#comb",
	data:function () {
		return { title:"B标题" }
	},
}
let vue= new Vue({
	el:"#app",
	data:{
		titileList:[{text:"首页",url:"/firstPage"},{text:"新闻",url:"/news"},{text:"体育",url:"/sport"}]
	},
	components:{
		"component-a":componetA,
		"component-b":componetB,
	}
})

父传子

// 父部分
data:{titileList:[{text:"首页",url:"/firstPage"},{text:"新闻",url:"/news"}, {text:"体育",url:"/sport"}]},
<component-a :fudata="titileList"></component-a>
// 子部分
props:["fudata"]
<template id="coma">
	<div>
		<div>head {{title}}</div>
		<ul>
			<li v-for=" t in fudata" > <a :href="t.url">{{t.text}} </a></li>
		</ul>
	</div>
</template>

子传父

// 子部分
<ul>
	<li style="float: left;margin-left: 30px;list-style-type: none" v-for=" t in fudata" > <a href="#" @click="myclick(t.text)">{{t.text}} </a></li>
</ul>
methods:{
	myclick:function (text){
		this.$emit("formson",text);
	}
}
// 父部分
<component-a :fudata="titileList" @formson="getSon"></component-a>
methods:{
	getSon:function(val){
		this.sonData=val;
	}
}

slot 插值

// 父部分
<component-b :son2="sonData" >
	<div slot="sonSlot1">sonSlot1</div>
	<div slot="sonSlot2">sonSlot2</div>
	<div >sonSlotDefault</div>
</component-b>
// 子部分
<template id="comb">
	<div>
		您点击了 {{son2}} 元素<br>
		<slot name="sonSlot2"> </slot> <br>
		<div><slot name="sonSlot1"> </slot></div>
	</div>
</template>

过滤器

针对插值属性，{{}} 可以自定义过滤器，过滤器只是影响显示的效果，不会改变原来的值，对数据加以处理

全局过滤器

Vue.filter('过滤器名', function (原数据，参数) {
	实现过滤功能
})

局部过滤器

var app1 = new Vue({
	filters:{
		过滤器名称 : function (v) {
			实现过滤功能
		}
	}
})

计算属性

计算属性具有缓存,执行一次后,下次从缓存中获取

let vm= new Vue({
	computed:{
		msg:function () {
			return "参数";
		}
	}
})

watch监控

let vm= new Vue({
	...
	watch:{
		msg(nval,oval){}
	}
})

生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程，过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
beforeCreate(){}：vue创建时默认事件创建
Create(){}：data和methods创建
beforeMount(){}：内存中创建
Mount(){}：挂载到页面
beforeUpdate(){}：data改变
updated(){}：渲染到页面
beforeDestroy(){}：所有可用准备销毁
Destroy(){}：安全销毁