vue+webpack+vue-router+vuex+ssr全解析笔记
添加小程序，兑换各种视频教程/数据资源。
1、vue基础知识：
1.1 实例化vue：
方法1：
new Vue({
el: '#app', //html中被替换的的标签，即挂载到html中#app标签里面
components: { App },
template: '
})
方法2：
const root=new Vue({
components: { App },
template: '
data:{
text:0,
obj:{email:"123"}
}
})
root.$mount("#app"); //html中被替换的的标签，即挂载到html中#app标签里面
实例化vue属性：
root.text=12; //获取实例化vue的data的数据，并改变其值，也可用root.$data.text=12一样。
root.$data; // 实例化vue的data数据组成的对象；
root.$props; // 实例化vue的prop自定义属性传值的对象，前提是要先声明自定义属性传值。
root.$el; // 实例化vue在html中#app标签节点下所有的标签及内容。
root.$options; //实例化vue里面传入的所有属性及值，以及其实例化默认的属性及值。注意：通过
root.$options.$data.text给text赋值，需要等到下一次数据更新时才能其作用。
root.$root===root； //当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。
root.$children ; //root组件下的直接子标签/组件；
root.$parent; //父实例，如果有的话。
root.$slots;
root.$scopedSlots;
root.$refs; //快速的查找到html节点或组件实例， ,
root.$isServer; //在服务端渲染时，才用，不常用
实例vue方法、数据
root.$watch; //监听数据变化,const unWatch=root.$watch("text",(newText,oldText)=>{
console.log(`${newText}:${oldText}`)
}) 然后调用unWatch()即可注销watch监听事件，避免内存溢出，在组件里面watch:{
text (newText,oldText){
console.log(`${newText}:${oldText}`)
}
} 监听完自动注销watch监听
root.$emit("text",val); //绑定一个自定义事件(函数)名为text的事件，常用于子组件向父组件传递方法
root.$on("text",(val)={ //监听了这个事件并触发了，root.$once("text")，表示只监听触发一次，如定时器中仅执行一次。
console.log("text事件被触发了"+val+“是自定义事件传递过来的参数”)
})
root.$off("text"); // 如果没有提供参数，则移除所有的事件监听器；如果只提供了事件，则移除该事件所有的监听器；如果同时提供了事件与回调，则只移除这个回调的监听器。
root.$set(root.obj,"name","Tom")； //为obj对象新添加属性name，并为其赋值Tom,然后obj.name的值就可以直接渲染在
视图中。
root.$delete(root.obj,"email")； //删除obj对象的email属性，并且同步通知到视图中。
root.$nextTick(()=>{
// 这是DOM渲染完，数据加载完之后执行的函数体，如重新添加了dom标签，从后台获取数据完成之后。
})
实例vue生命周期：在某个时间点，会自动执行的函数，执行顺序如下
beforeCreate(){} //new Vue()实例化的时候即创建前后，this.$el在创建生命周期前后（beforeCreate，created）是underfined
created(){}
beforeMount(){} //el:"#app"或root.$mount("#app")即挂载前后的生命周期，如果没有el:"#app"或root.$mount("#app")则不执行挂载前后的生命周期,this.$el在挂载生命周期前beforeMount是,在挂载生命周期后mounted是替换掉的部分。
mounted(){} //所以常对dom有关的操作在mounted里面，对数据有关的操作可以在created或者mounted里面
beforeUpdate(){} //数据更新时执行，如定时器里data里面的text+=1时执行数据更新前后的生命周期
updated(){}
activated(){}
deactivated(){}
beforeDestroy(){} //销毁实例化vue前后执行的生命周期
defstroyed(){}
errorCaptured((h,err)=>{ //捕获到该组件及其子组件下的所有错误,可以阻止子组件错误向父组件冒泡传递。
return h("div",{},err.stack)
}){}
vue的数据绑定：
vue的数据计算属性computed：对于任何复杂逻辑，都应当使用计算属性。计算属性只有在它的相关数据变量发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，则计算属性会缓存message的值，多次访问算属性会立即返回之前的计算结果，而不必再次执行函数。
computed:{ //计算属性写法1：计算数据的改变，常用于数据需要计算后渲染到视图中。
message(){
return "计算属性message值改变时，才会执行该函数"
}
}，
computed:{ //计算属性写法2：计算数据的改变，常用于数据需要计算后渲染到视图中。
message：{
get:function(){}, //获取计算数据message时执行get()
set:function(){} //修改计算数据message时执行set()
}
}，
methods:{
handle(){
return "方法函数每次重新渲染时无论message值是否改变，都会执行该函数"
}
}
vue的监听属性watch： 监听数据改变前后的值，常用于向后台发生数据。
watch:{ //方法1：该写法，在初始化时，不会执行，只有数据改变时，才会执行里面的函数。
val:function(newVal,oldVal){
console.log(newVal,oldVal)
}
}
watch:{ //方法2：该写法，在初始化及数据改变时，都会执行里面的函数。
val:{
handler(newVal,oldVal){
console.log(newVal,oldVal)
},
immediate:true,
deep:true // 是否深入观察，即如果val是对象，当不需要深入观察时，handler只是当val变化时才执行，当需要
深入观察时，当val里面的属性只，或者val对象里面属性对象里面的属性值...改变时都会触发handler执行。
}
}
注意：computed和watch里尽量不要修改原数据值，避免出现无限循环，如data(){return {a:0 }},不要在computed和watch里面做a+=1之类的，会出现无限循环，computed里面是通过原数据计算结果并赋值给新的变量，watch里面监听数据改变前后的值。
vue的指令：
- v-text ：当前标签下的文本内容，和{{}}功能一样。
- v-html ：当前标签下的html内容。能识别字符串里面的标签。
- v-show ：是否显示当前标签，即display:none/block;
- v-if ： 是否挂载当前标签，即动态增删标签节点。
- v-else
- v-else-if
- v-for ：遍历循环对象、数组，渲染在视图。
- v-on ：给当前标签绑定事件。
- v-bind ：给当前标签绑定属性。:value="1",与value="1",后者1是字符串，前者1是数字。
- v-model ：在input、select、textarea里面双向绑定数据，与value可以用于单选多选框中。
-
data: { checkedNames: [] } -
data: { picked: '' } -
data: { selected: '' //selected:[] } -
-
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy修饰符，从而转变为使用 change事件进行同步：在 type="number"时，HTML 输入元素的值也总会返回字符串 如果想自动将用户的输入值转为数值类如果要自动过滤用户输入的首尾空白字符 - v-once ：该标签只渲染一次，后面重新渲染会跳过该标签。
vue的模板语法：{{}}，v-text，v-html，其中{{}}和v-text一样，不会识别标签。
注意：以v-开始的指令，其值如name为js表达式(如js变量)；{{fun()}}仍然可以执行函数方法渲染函数的结果在页面，但是不推荐，推荐放在计算属性中。
vue的组件的定义：
1. 局部组件：
const com={
template:` `，
data(){
return {}
}
}
Vue.component("CompOne",com) //定义局部组件
2. 全局组件：
new Vue({
components:{CompOne}, //调用全局、局部组件
template:`
data(){
return {}
}
})
vue的props属性的父向子组件传值：可以是数组或对象，用于接收来自父组件的数据。单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。props接受的父组件的数据可以和data里面的一样，用于直接渲染在视图，用this.props里面的数据名直接进行计算属性，在vue的方法，生命周期中调用。但是不能直接修改props里面的值，可以在data里面定义一个变量初始化为props里面传递过来的数据值，然后在直接修改data里面这个变量的值。
子修改父组件props传递过来的值：通过子组件触发的事件告诉父组件，要修改props传递过来的值。
方法1：通过父组件传递过来一个方法事件onChange，子组件通过触发该方法事件，告诉父组件，在父组件中修改propOne的值。
const com={ //子组件
props:{ //父组件传递过来的propOne数据
propOne:String，
name:{
type: Number, //传递过来的数据类型
required:true, //该数据必须传递过来，不然报错
default:0 //默认值，可以是个对象default(){return},通常和required不同时出现
},
onChange:Function
},
template:` Handle">{{propOne}}
data(){
return {}
},
methods:{
sonHandle(){
this.onChange(); //子组件点击事件触发父组件传递过来的onChange事件，在父组件中执行该onChange事件的函数，即修改传递给子组件的数据
//或者通过 this.$emit("change"); 子组件自定义change事件，不需要在props接受 父组件传递的
onChange:Function，父组件
}
}
}
Vue.component("CompOne",com)
new Vue({ //父组件
template:`
data(){
return {
prop1:"这是要传递给子组件的数据"
}
}，
methods:{
handleChange(){
this.prop1="这是子组件触发了父组件传递给子组件的onChange事件执行父组件的handleChange函数，在父组件
修改传递给子组件的propOne数据值"
}
}
})
vue的组件的继承：继承的时候，需要propsData{}接受父组件传递的参数，新定义的data数据会覆盖原com组件数据，方法周期等会先执行com组件的，再执行compVue里的。
const com={
props:{
propOne:String，
},
template:` {{propOne}}
data(){
return {
text:0
}
},
}
继承的方法1：
const compVue=Vue.extend(com);
new compVue({
el:"#root",
propsData:{
propOne:'这是继承com组件的新compVue组件'
}
})
继承的方法2：
const compVue2={
extends:com,
data(){return{}}
}
vue的props属性的子向父组件传值：
在父组件调用子组件时
在父组件中定义一个methods方法，处理自定义事件处理函数接受到的子组件的数据
在子组件中定义一个方法触发this.$emit("自定义事件名",要传递的数据)
2、vuex：
简化版vuex的应用：
步骤1：在项目文件目录命令行下npm i vuex -S;
步骤2：新建store文件夹->store.js文件
步骤3：在store.js里面：
步骤4：在vue的入口文件，如main.js里面：全局store
步骤5：在.vue组件文件中通过this.$store获取全局store对象，即可使用store其属性方法API；
模块化vuex的应用：
步骤1：在项目文件目录命令行下npm i vuex -S;
步骤2：新建store文件夹->store.js文件