VUE总结

、Vue总结

1

"""
1、在html页面中用script标签导入vue环境
	<script src="js/vue.js"></script>
	
2、new Vue({ el: "#app" })挂载页面标签，建立关联后控制页面标签
	挂载点才有css3选择器语法
	挂载点就是vue与页面的关联
	挂载点只检索第一个匹配结果

3、插值表达式{{ }}可以完成基础运算
	num | num + 10 | str.split() + "拼接" 

4、插值表达式中的变量有实例成员 data 来提供
	<p id="app">{{ msg }}</P>
	let msg = '12345'
	new Vue({
		el: "#app",
		data: {
			msg,
		}
	})

5、v-on指令可以给标签绑定事件，事件函数由实例成员 methods 来提供
6、插值表达式{{ 变量 | 过滤器 }}的过滤器由实例成员 filters 来提供
	<p id="app" @click="fn">{{ msg | f1(1), 10 | f2(100, 200) }}</P>
	let msg = '12345'
	new Vue({
		el: "#app",
		data: {
			msg,
		},
		methods: {
			fn(){}
		},
		filters: {
			f1(v1,v2){return v1+v2},
			f2(v1,v2,v3,v4){return v1+v2+v3+v4}
		}
	})


7、面向对象js： { 变量, } | function Fn(值){ this.属性 = 值 } | obj = { 方法(){} }
	function Fn(v1, v2){
		this.n1 = v1;
		this.n2 = v2;
	}
	let f1 = new Fn(10, 20);
	f1.n1

8、文本指令：{{ }} | v-text=""  | v-html=""
9、事件指令: v-on:事件名="" | @事件名="" | :事件名="fn" | :事件名="fn($event, 自定义参数)"
	@click="fn"  |  @click="fn()"  |  @click="fn(10， 20)"  |  @click="fn($event, 10)"

10、属性指令：v-bind:属性名="" | :title="变量" | :style="字段变量" | 
			:class="变量" | :class="[变量1, 变量2]" | :class="{类1:真假, 类2:真假}"
	:title="var1" | :style="dic1" | :class="var2" | :class="[var3, var4]" | 
	:class="{box: true|false}"
	
	var2 = 'box' | var2 = 'box circle'
			
"""

2

"""
1、v-model完成表单指令，简单的控制value，单选框中的使用，单独复选框的使用以及复选框中的使用
	<input type="password" v-model="控制value的变量" />

2、了解：斗篷指令解决页面闪烁
	v-cloak =>  [v-cloak] {display:none} => 加载vue就会清除v-cloak属性

3、条件指令v-if与v-show区别，v-if家族成员以及上分支会成立会屏蔽下分支的工作机制
	v-if不渲染隐藏 | v-show以display:none渲染隐藏
	v-if | v-else-if | v-else

4、循环指令v-for如何循环渲染字符串、数组、字典，以及需要嵌套循环渲染赋值结构
	v-for="v in str"  v-for="（v,i) in str"
	v-for="v in arr"  v-for="（v,i) in arr"
	v-for="v in dic"  v-for="（v,k) in dic"  v-for="（v,k,i) in dic"
	[{},{}] {a:[]} [str1,str2]

5、了解：delimiters实例成员解决插值表达式符号冲突
	delimiters: ['{{', '}}']

6、计算属性(方法属性)在computed中声明，方法内部变量会被监听，值来源于方法返回值
	computed: {
		methodAttr() {
			// 内部出现的变量都会被监听，发生值更新会回调该方法
			return '方法属性的值'
		}
	}
	
7、监听watch可以设置数据的监听方法，在监听属性更新时，完成特定逻辑
	watch: {
		attr() {
			// attr属性被监听，发生值更新会回调该方法
		}
	}
	
8、重点：组件的概念，组件就是vue实例(对象)
	<div id="app">
		<tag />
		<tag />
	</div>
	
	let tag = {
		template: '<p>子组件</p>'
	}
	
	new Vue({
		el: '#app',
		components: {
			tag,
		}
	})

9、创建、注册、使用子组件的三部曲
"""

3

"""
1、可以用来复用的子组件，数据data需要做局部化处理，当组件被复用时，数据会相互独立
	let tag = {
		template: '...',
		data() {
			return {
				...
			}
		}
	}

2、将父组件的数据传递给子组件，在渲染子组件标签时，给自定义属性设置父级数据，在子级内部用自定义属性拿父级数据
	let tag = {
		template: '<div>{{ msg }}</div>',
		props: ['msg']
	}
	new Vue({
		template: '<div><tag :msg="msg"></tag></div>',
		components: {
			tag,
		},
		data: {
			msg: '123'
		}
	})

3、将子组件的数据传递给父组件，子组件需要主动触发$emit自定义事件携带出数据，父级实现自定义事件方法，就可以接收到子级数据
	let tag = {
		template: '<div @click="fn">{{ msg }}</div>',
		data() {
			return {
				msg: '123'
			}
		},
		methods: {
			fn() {
				this.$emit('func', this.msg)
			}
		}
	}
	new Vue({
		template: '<div><tag @func="f"></tag></div>',
		components: {
			tag,
		},
		methods: {
			f(msg) {
				console.log(msg)
			}
		}
	})

4、搭建vue环境需要依赖node环境，以及用npm包管理器安装vue脚手架cli（npm可以换源为cnpm）
5、通过 vue create 项目 来创建前台项目，选择配置好项目所需的依赖
6、用pycharm来配置vue项目启动
7、属性vue项目目录结构，以及基本的各种原理：项目入口从main.js开始
"""

4

"""
1、箭头函数 let fn = (a, b) => a + b;
	let 函数名 = (参数列表) => {函数体}

2、函数原型：给函数设置原型 Fn.prototype.变量 = 值，那么Fn new出来的对象都可以共用 原型变量
	function Fn() {}
	let f1 = new Fn()
	let f2 = new Fn()
	Fn.prototype.fn = () => {}
	Fn.prototype.fn2 = function () {}
	f1.fn()
	f2.fn()

3、vue项目的请求生命周期：main.js完成环境的加载与根组件的渲染；router的index.js完成路由映射
	项目启动：加载main.js：index.html、new Vue()、Vue、router、store、完成App.vue的挂载
	请求：请求路径 => router路由 => 页面组件(小组件) => 替换<router-view />完成页面渲染 => <router-link>（this.$router.push()）完成请求路径的切换
	
4、<router-view />标签作为路由映射的页面组件占位符
5、<router-link></router-link>来完成路由的跳转
	<router-link to="/1" :to="{name:'home', params={arg: 1}}">主页</router-link>
	
	{
		path: '/:arg',
		name: 'home',
		component: Home
	}
	
6、this.$router来完成路由的跳转：push() | go()
	this.$router.push('/1');
	this.$router.push({name:'home', params={arg: 1}});
	this.$router.go(-1);
	this.$router.go(1);

7、this.$route来完成路由的传参
	this.$route.params.arg
	this.$route.params['arg']
	
8、资源的加载
	require(资源的相对路径)
"""

5

"""
1、vue项目配置全局css文件：在main.js中用import导入或是require()加载 .css 文件
	assets/css/global.css
	import '@/assets/css/global.css' | require('@/assets/css/global.css')

2、vue项目配置全局js文件：在main.js中用import导入 .js 文件，并将其设置给 Vue 原型
	settings.js => export default {base_url='http://127.0.0.1:8000'}
	import settings from '@/assets/js/settings.js'
	Vue.prototype.$settings = settings => this.$settings.base_url
	
3、vuex提供的store仓库存储，可以完成组件间的传参(了解)
	store/index.js => state: {num: 0}
	this.$store.state.num

4、vue项目配置axios可以完成前后台交互：this.$axios({}).then(response=>{}).catch(error=>{})
	import axios from 'axios'
	Vue.prototype.$axios = axios
	this.$axios({
		url: '后台接口',
		method: 'get|post',
		params: {},
		data: {},
		headers: {},
	}).then(response=>{
		response.data
	}).catch(error=>{
		error.response.data
	})

5、django利用django-cors-headers插件解决前后台分类项目跨越问题(重点)
	注册corsheaders => 添加中间件 => 允许跨越

6、前台两种提交数据的方式：url拼接参数，数据包参数
7、前后台分离，后台登录通过的token会返回给前台，前台自己处理存储在cookie中：vue-cookies插件操作cookie
	token = response.data.token
	
	this.$cookies.set(k, v, exp);
	this.$cookies.get(k);
	this.$cookies.remove(k);
	
8、全局应用配置element-ui、bootstrap
	import ElementUi from 'element-ui'
	Vue.use(ElementUi)
"""