、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)
"""