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:"主页
"
}
var news={
template:"#news"
}
var login={
template:"登录 {{$route.query.name}}-{{$route.query.name}}
"
}
var reg={
template:"注册 {{$route.params.name}}-{{$route.params.id}}
"
}
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