vue

vue

v-html  (渲染html标签)  //  改变标签的样式可以用scss里的深度选择器/deep/（>>>）
v-model  动态双向绑定  //只要有value的标签就可以考虑用它  自定义组件中的v-model的使用▲
v-for数组里包含数组的循环问题：	  
 sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
<ul v-for="set in sets">
	<li v-for="n in even(set)">{{ n }}</li> //可以定义相应事件对内外层数组处理 达到想要的效果
</ul>
this.$nextTick(() => { //dom树重绘   回调函数将在 DOM 更新完成后被调用。
    this.$refs.值  // 相当于dom操作   则不能在created和 mounted中
     console.log(this.$refs.值.$el.innerHTML)
     if(this.value==""){
       this.value=0
     }
 }) 
	 

/*  △vue组件化思想 {
对于需要注意的地方：在组件内的src没有动态绑定就是在当前的位置找静态资源
				src动态绑定了就需要在引用当前组件的位置找静态资源}
*/
// vue动态组件的使用 //比如顶部选型卡效果实现 如果用v-show 来切换  组件页面
// 用动态组件的：is属性来切换
<div id="example">
	<button @click="change">切换页面</button>
	// 失活的组件将会被缓存！
	<keep-alive include="home,archive">//表示只缓存home和archive，不缓存posts
		<component v-bind:is="currentTabComponent"></component>
	</keep-alive>
</div>
//currentTabComponent 可以是 已注册组件的名字，或一个组件的选项对象	
components: {     
	home,
	post,
	archive,
},
data(){
	return {
		index=0，
		arr:[
		{template:`<div>我是主页</div>`},
		{template:`<div>我是提交页</div>`},
		{template:`<div>我是存档页</div>`}
		]
	}
},
methods:{
	change(){ ///事件出触发
		if(index==0){
			this.currentTabComponent="home"
		} 			
	}
}
	 		

//类名绑定方式
	// 在循环中可以将当前元素的index作为参数传递  //v-for对当前元素操作
	对象形式
 	:class="{ active: isActive, 'text-danger': hasError }"
 	//eg   :class="{'active':currentInex==index}" 
 	//eg   :class="{ active :currentInex==index}"
 	数组形式
 	：calss="isTrue?'类名1'，'类名2" 
 	:class="[isActive?'active':'']"//设置再点一次将样式清空
 	:class="[isActive ? activeClass : '', errorClass]"
	//eg  :class="[currentInex==index?select_class:""]"
  	//eg  :class[currentInex==index?'indicator_active':'','indicator_fail']" 
//style 的绑定方式
	:style="{ color: activeColor, fontSize: fontSize + 'px' }"
    //eg  :style="{ height:'calc(100vh - '+bottomheight+')'}"
    多重值
    :style="{color:[index===current ?'#38bdba' :'#333333'] }"

	:style="props" //==>>变量是属性值 
	/*eg ： mounted(){
		 this.props = `height:${data.width}px;line-height:${data.width}px;margin: 10upx calc((100% - ${data.width*7}px) / 14);`
		赋值时必须以字符串的形式 赋值 
	}
	*/
	:style="methods" //==>>变量是方法
	/*eg:  methods(){
		return {//必须以对象的形式返回style
			color:"#23C75D",
			backgroundColor:"rgba(35,199,93,0.08)"
		}
	} */

watch:(N,O)={//普通属性
	N==>>新值 
	O==>>原来的值
}
watch:{//属性为对象  数组
  // immediate: true,  //刷新加载 立马触发一次handler
  deep: true , // 可以深度检测到  data中对象的属性值的变化
  handler:(N,O)=>{}
}
computed:{//只是getter  需要自己setter
    typeColor() {//需要传值的计算属性
      return function(typeColor) {
        let obj = {
          1: { 'border-color': '#1EC559' }, //预约开户
          2: { 'border-color': '#597CDF' }, //变更账户
          3: { 'border-color': '#E10F0F' }, //注销账户
        };
        return obj[typeColor];
      };
    },
   attr:{
     getter:()=>{
        return ... //要返回的值
     },
     setter:(newVal)=>{
       newVal就是传进来的值
     }
  }
}

//插槽（匿名插槽，具名插槽）  作用域插槽
//先让还没接触过插槽的同学对什么是插槽有一个简单的概念：
//插槽，也就是slot，是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定。 
//实际上，一个slot最核心的两个问题这里就点出来了，是显示不显示和怎样显示。
<son>
  <template>
        <div>
            实践匿名slot
        </div>
  </template>
  <template slot="myslot">
        <div>
            实践具名slot
        </div>
  </template>
  //使用的时候就是这样，从子组件传过来的名为data值为todo的数据将会被slot-scope接收，
  //需要注意的是，slot-scope接收的是一个对象，这里命名为slotProps，
  //也就是说你传过来的data将会作为slotProps的一个属性，所以需要slotProps.data才能调用到data。
  //前面说了，data的值为todo，todo是什么呢？todo是todos遍历出来的，所以是一个对象。
   <template slot="myslot" slot-scope="{data}">
        <div>
            实践具名 作用域slot 
            <div v-for="item in data">
                {{item}}
            </div>
        </div>
  </template>
</son>
//子组件内
<template>
    <div>
        <h4>这是子组件</h4>
        <input type="text" placeholder="请输入">
        <slot name="myslot" :data='list'></slot>
    </div>
</template>
<script>
export default {
    name:'Son',
    data(){
        return{
            list:[
                {name:"Tom",age:15},
                {name:"Jim",age:25},
                {name:"Tony",age:13}
            ]
        }
    }
}
</script>

<input v-on:keyup.enter="submit">键盘事件
缩写语法 
<input @keyup.enter="submit">
全部的按键别名：
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

Vue 过渡

在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件。	 
语法格式
 //在css中直接修改
<transition name = "fade(过渡)"> </transition>
  name属性就是添加类名为 
   .fade-enter-active, .fade-leave-active {
    	 transition: opacity .5s;
    }
   .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
      opacity: 0;
    }
.fade-enter{ } 进入过渡的开始状态，元素被插入时生效，只应用一帧后立即删除；(运动的初始状态)
.fade-enter-active{ } 进入过渡的结束状态，元素被插入时就生效
在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
.fade-leave{ } 离开过渡的开始状态，元素被删除时触发，只应用一帧后立即删除；
.fade-leave-active{ } 离开过渡的结束状态，元素被删除时生效
在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数

 //在mothed中命名方法修改
<transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:leave="leave"
    v-bind:css="false"
  >
    <p v-if="show">！！</p>
</transition>

vue.set()
  以使用Vue.set()方法将响应式属性添加到嵌套的对象上
  this.set('this.obj.attr','newVal')
  this.set('this.obj','attr','newVal')
vue.use()的区别 
  Vue的插件是一个对象, 就像Element.
  插件对象必须有install字段.
  install字段是一个函数
Vue.prototype的区别 
 只不过是js中函数原型的特性罢了: 函数原型上的属性/方法, 
 在函数实例化后, 可以在任意实例上读取,    
 // .先查找构造函数实例里的属性或方法，如果有，就立即返回。
 //.如果构造函数的实例没有，就去它的原型对象里找，如果有，就立即返回

vuex

//非模块化
const store = new Vuex.Store({
  strict:true，//开启严格模式后，只能通过mutation来改变状态（不支持异步）否则会报错
  state: {
    count: 0
  },
  getters:{// 可以用于监听、state中的值的变化  且只有当它的依赖值发生了改变才会被重新计算 
  },
  mutations: {
    increment (state,count) {
      state.count=count
    }
  },
  actions: {   在actions中提交mutation再去修改状态值                                               
     fn1(context) {  //fn1（{commit}）    
        return  context.commit("mutation中的函数名");
       // return   commit("mutation中的函数名") 
     }
  }
})

//模块化
const store = new Vuex.Store({
  strict:true,//开启严格模式后，只能通过mutation来改变状态（不支持异步）否则会报错
  modules: {// 通过modules属性引入模块
    status,
    user
  },
  getters
 
})

//modules 
	//getter/index.js
	const getters = {
	  regImgCodeStatus: state => state.status.regImgCodeStatus, //获取 state 下的status模块下的值
	  regPhoneNum:state => state.status.regPhoneNum  //获取保存的phonenum
	}
	export default getters
	//user/index.js
	const user = {
	  state: {
	    token: '',
	    name: '',
	    avatar: '',
	  },
	  mutations: {
	    SET_TOKEN: (state, token) => {
	      state.token = token
	    }
	  },
 	 actions: {
 	    Login({ commit }, userInfo){
 	    	 return new Promise((resolve, reject) => {
        		login(userInfo.username, userInfo.password).then(response => {
		          const data = response.data
		          const tokenStr = data.tokenHead+data.token
		          setToken(tokenStr) //保存token至localstoage
		          commit('SET_TOKEN', tokenStr) 
		          resolve()
		        }).catch(error => {
		          reject(error)
		        })
     		})
 	    }
 	 }
注意：
modules模块中的state不能通过this.$store.state获取，必须加上module的命名空间，比如：this.$store.moduleA.data1
但是getters和mutations能正常使用

属性访问:this.$store.state.属性名|this.$store.state.模块名.属性名
改变属性值：
	1 .同步即当页面加载完成是就全部重绘  如果需要修改store中的值唯一的方法就是提交mutation来修改
	  this.$store.commit("mutations中的函数名 "，"需要改变的参数")
	2. 异步即当页面需要时再加载重绘   
	  this.$store.dispatch("action中的函数名 "，"需要改变的参数")

// （服务器渲染：服务端返回字符串/
什么是服务端渲染
服务端将完整的页面 html 输出到客户端显示，与 SPA （Single-Page-Application）使用 js 渲染页面不同。
//页面加载 先el(created前)==>>dom(mounted前) 就有一段白屏(先挂在data)

为什么使用服务端渲染
更好的 SEO(搜索..)
更快的内容到达时间（首屏加载跟快）

预渲染：在webpack打包阶段）
预渲染的核心是使用 prerender-spa-plugin，

vue值传递 可以参考我的博客uniapp 的传值一，二

vue传值 :父向子传 
父组件中自定义属性 
  ：属性名="变量名（父组件data中的）"
  子组件  props：['属性名']    
		 // 多个可能的类型
		 propB: [String, Number],
		 // 必填的字符串
		 propC: {
		      type: String,
		      required: true
		  },
		  props:{  //带验证的传值
			  type: String,    //传到子组件中的必须为字符串 
			  default: "sd"     //带有默认值                                              
		  }
		  props:{  //带验证的传值
			  type: Object,//Array
			  // 对象或数组默认值必须从一个工厂函数获取
			  default: function () {
					return { message: 'hello' }|[] 或则是默认要加载的对象|数组
			  }                                             
		  }		
                        
 子向父传: 父组件中自定义事件名   @自定义事件="事件名"
  父组件mothod中    事件名（参数）//参数就是子组件传过来的值
  子组件  click等原生事件中  this.$emit("父组件中自定义事件" ，data中的值)
  其他可以自定义事件触发 和用vuex

计算属性computed : 

1. 支持缓存，只有依赖数据发生改变，才会重新进行计算
2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
3.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
4. 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
5.如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

侦听属性watch：

1. 不支持缓存，数据变，直接会触发相应的操作；
2.watch支持异步；
3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
4. 当一个属性发生变化时，需要执行对应的操作；一对多；
5. 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，
　　immediate：组件加载立即触发回调函数执行，
　　deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。