前端Vue开发笔记

v-on:click=“xxx” 同 @click=“xxx”
<style scoped> 局部样式
显示隐藏 v-show=“true/false”

数据处理

this.form.mktManagerList = this.form.mktManagerList.map(m=>m.name).join(’,’)
data.data.map((m) => {return {name: m.name, grade: m.value, id: m.id}}) map用法
active切换 .router-link-active{ } <li exact></li><li exact></li>
Object.assign({}, this.params, this.paramData) 合并多个对象
b=Array.from(new Set(b)) 数组去重
b=a.concat(b) 数组合并

自定义指令 v-xxx(页面)
Vue.directive(‘xxx’,{bind(el,binding,vnode){el.style.color="#"+Math.random().toString(16).slice(2,8)}})
(main.js中) 随便改变绑定标签的颜色

.splice(index,len,[item]) index:数组开始下标，len: 替换/删除的长度，item:替换的值，删除操作的话 item为空

v-model.trim=“xxx” 去空格 v-model.lazy=“xxx” 延迟更新 v-model.number=“xxx” 转换int型

computed:{
    filteredBlogs:function(){
      return this.blogs.filter((blog)=>{
        return blog.title.match(this.search);
      })
    }
  }  //过滤器搜索功能 

组件

在父组件中注册 components:{xxxx}
在子组件中注册 props:[‘xxxx’]
父向子传值：父中 v-bind:xxx=“a” 子中 props:{ xxx: { type:String, default: ’ 内容 ’ } } typ数据类型，default默认值
传值----传引用

子向父传值（事件传值）：
子中  methods:{                                    
     子方法名:function(){                         
	     this.$emit("事件名","vlue");                
     }                                                                  
}   
                                                                      
父中  v-on:事件名="父方法名（$event）"
 methods:{
      父方法名:function(aa){  
          this.xxx=aa;    
      } 
 }

全局组件

<div id="app">
    <my-component></my-component>
</div>

v-on:keyup=“函数名” 键盘指令 例：v-on:keyup.alt.enter=“xx函数” 按下alt+enter执行xx函数

<script>
 export default{
    name:"test",
    props:{},
    data(){
         return{
               xxx:"",
               xxx:[ ]
         }
    },
    methods:{
         xxx:function(){
         }
    }
}
</script>

e.preventDefault(); 事件执行后不刷新页面
mode:“history” 路由中去#/

事件修饰符：.stop 阻止冒泡 .prevent阻止默认事件 .capture添加事件侦听器时使用事件捕获模式
.self只当事件在该元素本身（比如不是子元素）触发是触发回调 .once事件只触发一次
{{ isEditing ? ‘Save’ : ‘Edit’ }} 同等于 if isEditing {Save} else { Edit }

基本配置

全局安装webpack npm install webpack -g （检查版本号 webpack -v）
全局安装 vue-cli npm install -g vue-cli （检查版本号 vue -V）
创建一个基于webpack模板的新项目 vue init webpack vue-demo
安装依赖 npm install
启动项目 npm run dev
配置文件 config里的index.js 的 post 修改端口号
https://blog.csdn.net/wulala_hei/article/details/85000530
安装http模块 npm install vue-resource --save

api接口网站 tech.yandex.com
trnsl.1.1.20181227T022343Z.8fb5877dc75baec8.44457214c9a29482c3c002d4dd4ffbda20725b8b

post数据网站 placeholderjson
http://jsonplaceholder.typicode.com/posts

搭建express服务器 npm init >> touch server.js >> npm install express >>
http://www.runoob.com/nodejs/nodejs-express-framework.html

node server.js

全局安装nodemon (node开发辅助工具，自动刷新改动)
安装mongoose数据库 npm install mongoose
安装body-parser npm install body-parser
安装 bcrypt npm install bcrypt (密码加密)
运行node。js node server.js
安装全球公认头像 npm i gravatar

安装jwt npm install jsonwebtoken jwt.sign(“规则”,“加密名字”,“过期时间”,“箭头函数”)
安装passport npm install passport npm install passport-jwt