VUE学习笔记整理（二）

上一篇笔记：https://blog.csdn.net/ws19900201/article/details/98875039

vue指令

v-show
v-if v-else
v-for
@click
v-text
v-html
v-bind:href :href
v-model
v-once

vue 生命周期+组件

beforeCreate 未生成
created 生成 有属性和方法
beforeMount 挂载前
mounted 已经挂载
beforeUpdate
update 修改完成
activated
deactivated
beforeDestroy 卸载前
destroyed 卸载
errorCaptured

父子组件传值：

（在子组件调用父组件的值）

//父组件（fuqin）: attr1
<erzi :attr1="attr1"></erzi>

//子组件（erzi）:attr2 
{{attr1}}
prop:["attr1"]

// props: {
  //   attr1: {
  //     type: String,
  //     attr1: "attr1",
  // 	 default: "STRING"
  //   }
  // },

（在父组件调用子组件的值）

//父组件（fuqin）: attr1
{{attr2}}
<erzi  @world="getdata"></erzi>
data(){
  return{
    attr2:''
  }
}
getdata(attr2){
  this.attr2 = attr2
}

//子组件（erzi）:attr2 
<button @click="send">发送</button>

send(){
  this.$emit("world",this.arrt2)
}

（加载后直接传值）

mounted(){
  this.$emit("world",this.arrt2)
}

（兄弟组件传值）

<comp1></comp1>

<comp2></comp2>

var event = new Vue({});

//comp1:
{{attr2}}

data(){
  return{
    attr2:''
  }
}
mounted(){
  event.$on("world",attr2=>{
    this.attr2 = attr2
  })
}

//comp2:
<button @click="send">发送</button>
send(){
  event.$emit("world",this.arrt2)
}

相关文章：
VUE 之父组件传值给子组件，子组件监听数据渲染完后执行某函数、watch监听prop中的属性有值后再执行、prop中属性值不为空：https://blog.csdn.net/ws19900201/article/details/102602694

VUE兄弟组件之间传值：https://blog.csdn.net/ws19900201/article/details/98587389

vuex state 实现组件间传值:https://blog.csdn.net/ws19900201/article/details/99413648

2020.3.2

vue自定义指令、计算属性、常用属性方法

自定义指令：

<div v-red>red</div>

Vue.directive("red",{
  bind(el,binding){
    el.style.color="#f00"
  },
  inserted(){
    console.log("被绑定自定义指令的元素插入到其父节点的时候调用");
  },
  update(){
    console.log("被绑定自定义指令的元素里面的值更新的时候调用");
    // input 输入值的时候
  }，
  unbind(){
    
  }
})

Vue.directive("red",(el,binding)=>{
  // 调用了bind和update
})

计算属性:

{{msg.split(" ").reverse().join("-")}}

{{msg2}}

{{add()}}

data:{
  msg:"hello world dear"
}

computed:{
  msg2:function(){
    return this.msg.split(" ").reverse().join("-")
  }
}

methods:{
  add(){
    return this.msg.split(" ").reverse().join("-")
  }
}

计算属性和方法的区别：

1.计算属性对属性操作 方法可以任何操作；

2.计算属性会缓存 方法会重复执行；

选择元素：

vm.$el.style.color = "#f00";

<h1 ref="title"></h1>

this.$refs.title

常用属性方法:

<div ref="title">{{msg}}</div>

data:{
  msg:"hello world"
}

vm.msg = "tom";
vm.$nextTick(function(){
  console.log(vm.$refs.title.textContent);
})

watch 方法:

<input type="text" v-model="name">

data:{
  name:"aaa"
}
watch:{
  name:function(newValue, oldValue){
    console.log("新"+newValue,"老："+oldValue);
  }
}


<input type="text" v-model="user.id">

data:{
  user:{
    id:001
  }
}
watch:{
  "user.id":function(newValue, oldValue){
    console.log("新"+newValue,"老："+oldValue);
  }
 
  user:{
    handler:function(newValue, oldValue){
      console.log("新"+newValue,"老："+oldValue);
    },
    deep:true //深度监听，当对象中的属性发送改变的时候也会监听
  }
 
}

vue-router:

<div id="app">
  <router-link to="/home">主页</router-link>
  <router-link to="/news">新闻</router-link>

  <div>
   <router-view></router-view>
  </div>
</div>

<template id="news">
  <div>
    <h3>新闻信息</h3>
    <router-link to="/news/login?name=tom&id=123">登录</router-link>
    <router-link to="/news/reg/tom/123">注册</router-link>

    <div>
     <router-view></router-view>
    </div>

  </div>
</template>

var home={
  template:"<h1>主页</h1>"
}
var news={
  template:"#news"
}

var login={
  template:"<h1>登录  {{$route.query.name}}-{{$route.query.name}} </h1>"
}
var reg={
  template:"<h1>注册  {{$route.params.name}}-{{$route.params.id}}</h1>"
}

var routes=[
  {path:"/home",component:home},
  {path:"/news",component:news,
    children:[
      {path:"login",component:login},
      {path:"reg/:name/:id",component:reg}
    ]
  },
  {path:"/",redirect:"/home"} // 不设置 默认没有内容
]

var router = new VueRouter({
  routes,
  mode:"history"
})

var vm = new Vue({
  el:"#app",
  router
})

vue-cli :

OpenCmdHere.reg

node.js

npm install vue -g

vue init webpack 项目名称

cd 项目名称

cnpm install

cnpm run dev  //启动

如果已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载

安装vue cli3.0+：

npm install -g @vue/cli

查看版本：vue --version

vue 官网：https://cli.vuejs.org/zh/guide/installation.html