这几天在学习vue，觉得还可以吧，现在分享下学习vue的心得和对于vue学习的总结
一、对于vue中的computed 和 watch的理解。
1、computed:计算属性具有缓存，计算属性只有在它的相关依赖发生改变时才会重新求值。
2、watch:结果监听 而侦听器watch是侦听一个特定的值，当该值变化时执行特定的函数。
如：<template>
<div>{{fullName}}</div>
<div>{{fullName}}</div>
<input v-model="question">
</template>
<script>
export default {
data() {
return {
fristName: "cici",
lastName: "liu",
question: "",
},
computed: {
fullName: function() {
return this.fristName + " " + this.lastName;
}
},
watch: {
question: function(val) {
console.log(val, "dsfgdfgfdgg-------");
return val;
},
fullName: function(val) {
return val;
}
},
}
二、对于filters的理解
1、定义本地过滤器
{{data | dataFun}}
filters:{
dataFun(val){
const data=val | {} {y}-{m}-{d} {h}:{i}:{s}
//下面是自行对时间结构的处理
return data;
}
}
2、定义全局过滤器
首先在main.js文件中引用你所要调用的全局的过滤器
import * as filters from './filters'
// register global utility filters.
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})
filters 文件中的代码如下：
export function parseTime(time, cFormat) {
const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
//下面是自行对时间结构的处理
return data;
}
直接在页面的使用：<div>{{date | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</div>
三、关于对store的理解
store相当于一个全局存储数据的变量，有两种形式可以进行存储：
1、同步存储：在国际化时选择语言时可以进行同步存储，选择的是什么语言就直接进行store存储，如果后面的应用还需要用到可存储在localstorage里面或者cookie里面，因为store是存储在内存中的当页面进行刷新后，store中的数据将会被置空，但是localstorage是存储在硬盘中的，cookie是存储在浏览器中的，但是cookie zai 不同的浏览器有不同的存储大小，但一般不超过4KB。因此使用cookie只能存储一些小量的数据。
2、关于sotre状态管理核心
状态管理有5个核心，分别是state、getter、mutation、action以及module。分别简单的介绍一下它们：
2.1、state
state为单一状态树，在state中需要定义我们所需要管理的数组、对象、字符串等等，只有在这里定义了，在vue.js的组件中才能获取你定义的这个对象的状态。
2.2、getter
getter有点类似vue.js的计算属性，当我们需要从store的state中派生出一些状态，那么我们就需要使用getter，getter会接收state作为第一个参数，而且getter的返回值会根据它的依赖被缓存起来，只有getter中的依赖值（state中的某个需要派生状态的值）发生改变的时候才会被重新计算。
2.3、mutation
更改store中state状态的唯一方法就是提交mutation，就很类似事件。每个mutation都有一个字符串类型的事件类型和一个回调函数，我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数，那么我们需要执行一个相应的调用方法：store.commit。
2.4、action
action可以提交mutation，在action中可以执行store.commit，而且action中可以有任何的异步操作。在页面中如果我们要嗲用这个action，则需要执行store.dispatch
2.5、module
module其实只是解决了当state中很复杂臃肿的时候，module可以将store分割成模块，每个模块中拥有自己的state、mutation、action和getter。
3、对应代码：
在main.js中进行引用，作为全局对象。
import store from './store'
new Vue({
store,
})
在页面中的使用
<div @click="clickhandle">点击我获取store中的登陆数据哦</div>
methods: {
clickhandle() {
console.log(this.$store.getters.token, "---this.$store.getters.token");
console.log(this.$store.getters.loginUser,"----this.$store.getters.loginUser");
}
},
对应store文件的代码：
index.js：
import Vue from 'vue';
import Vuex from 'vuex';
import user from './modules/user'
import getters from './getters'
Vue.use(Vuex);
//store对像要不就是一个数组，要不就是一个对象
const store= new Vuex.Store({
modules:{
user
},
getters
})
export default store
getters.js：
const getters = {
loginUser: state => state.user.loginUser,
token: state => state.user.token
}
export default getters
user.js：
const user = {
state: {
loginUser: {},
token:''
},
mutations: {
SET_TOKEN: (state, token) => {
state.token = token
},
SAVE_USERINFO:(state, data)=>{
state.loginUser=Object.assign({},{data});
}
},
actions: {
LoginByUsername({ commit }, userInfo) {
const data = userInfo;
return new Promise((resolve, reject) => {
commit('SET_TOKEN', 1111)
commit('SAVE_USERINFO',{user:admin:pwd:admin})
})
}
}
}
export default user
备注：通过sotre也可以做国际化，进行语言的切换。
四、对于mock的理解
官网描述：
1.前后端分离
2.不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
3.数据类型丰富
4.通过随机数据，模拟各种场景。
代码如下：
在main.js中引入：require('./mock/index')
mock/index中
import Mock from 'mockjs'
import Detail from './detail'
Mock.mock(/\/detail\/info/, 'get', Detail.getList)
export default Mock
detail.js文件中：
import Mock from 'mockjs';
const List = [];
List.push(Mock.mock({
title: "有了云？服务器还需要防护么？",
description: "自从有了云，安全管理员终于可以松了一口气：再也不用为服务器的安全担心了，这是大部分企业安全管理员一开始的想法，但很快他们就会发现，这只是一厢情愿罢了，相比于没有云之前，他们不但需要照顾本地服务器的安全."
}))
export default {
getList: () => {
return List;
}
}
vue 页面中的引用：
import { detailList } from "@/api/detail";
created() {
detailList(this.$route.params.id).then(response => {
console.log(response.data, "-----data=---");
});
}
在api中的detail文件中：
import request from '@/utils/request'
export function detailList(id) {
console.log(id);
return request({
url: '/detail/info',
method: 'get'
})
}
对请求数据流程的理解：
第一种方式：首先在main.js文件中引入mock，然后页面中去调用api中的函数进行request的请求，如果在main.js中已经引用了mock，那么mock将会拦截http请求，去请求mock中的静态数据，然后再返回在页面中进行显示。
第二种方式：如果在main.js文件中讲mock引入注销点，http讲根据request的请求进行数据接口请求
五、关于指令的理解
指令氛围两种：
一种是自带指令：如：
v-model双向绑定数据
v-for循环
v-show 显示与隐藏
v-if 判断 v-else v-else-if
v-bind
v-on 事件
v-text读取文本不能读取html标签
v-html 能读取html标签
v-class 类名
v-style 与v-class
v-once 加载一次 如果用到事件中就是事件只执行一次（@click.once="show"）
v-cloak防闪烁
v-pre 把标签内部的元素原位输出
另一种是用户自定义指令，如说，当鼠标放上去后可以根据传过来的位置（top\left\right\bottom）来进行hover效果的显示，这个时候就可以用到自定义组件
代码如下：
页面：
<div class="content" v-el-detail.right="'哈哈...我出现啦!'">
请将鼠标放在我上面
</div>
<div id="div_hover" ></div>
import elDetail from "@/directive/detail";
directives: {
elDetail
},
在指令代码中：
index.js:
import detail from './detail'
const install = function (Vue) {
Vue.directive("el-detail", detail)
}
if (window.Vue) {
window['el-detail'] = detail
Vue.use(install)
}
detail.install = install
export default detail
detail.js指令中
export default {
bind(el, binding) {
el.onmouseover = () => {
const ele=document.querySelector('#div_hover');
if(binding.modifiers.right){
ele.innerHTML=binding.expression;
ele.className="right";
}
}
el.onmouseout = () => {
const ele=document.querySelector('#div_hover');
ele.innerHTML="";
ele.className="";
}
}
}
以上是我对学洗vue做的知识点的尝试，有些好的细节就不做说明了。如有什么问题 欢迎来评论和补充。
今天一朋友发了一个关于css方面的文章，地址如下：
https://mp.weixin.qq.com/s/ZLeTRaEP4zrjnZRvk5EESA
扫一扫
485
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
