Vue基础—使用

工作时接触Vue，边学边用时记下的，如有问题，欢迎留言指出。

一、模板语法

1. 数据渲染

获取对象数据

 // html
 <div id="app"> {{ message }} </div>

 // js 
 var app = new Vue({
el : '#app' ,    //将DOM元素进行绑定
data : {   		//定义数据对象、信息
	message : 'Hello Vue'
}
 });

绑定DOM元素特性：v-bind，可以简写

1 2	<span v-bind:title="message"> 鼠标悬停 </span> <span :title="message"> 鼠标悬停 </span>

条件和循环

1 2	<div> <p v-if="seen" > 看到了 </p> </div> <div> <ol> <li v-for="temp in arr">{{ temp.content }} </li> </ol> </div>

事件绑定：v-on ，可以简写为@

<button @click="remove">移除</button>
// 方法
methods:{  
	remove:function(){ ... } 
}

表单双向绑定：v-model（Vue实例中的data与渲染在DOM表单元素【input/textarea/select】上的内容保持一致）
1
2
3
4
5
<el-input v-model="form.title"></el-input>
// data
form:{
title:''
}
如果数据赋值，但视图未刷新，可使用$set方法
1
this.$set(this.obj,'newVar',"这是属性值");

2.条件渲染：v-if/v-else-if

1
2
3

<div v-if="type=='A'"> a</div>
<div v-else-if="type=='B'">b</div>
<div v-else>c</div>

3.列表渲染：v-for

<div v-for="(value,key,index) in object">{{ index}},{{key}}:{{value}}</div>
	
<!-- v-for 和 v-if的结合使用，v-for的优先级高于v-if	-->
<li v-for="todo in todos" v-if="!todo.isCompleted"> {{ todo }} </li>

4.事件处理：v-on

1	<el-tag v-for="item in tags" v-if="tags" class="tag-area_one" closable @close="removeTag(item)">{{item}}</el-tag>

二、入门知识点

router文件夹下index.js配置的是路由访问地址
需要使用到其他组件时，可通过import方式引入
export和export default区别

export不限变量数；export default只输出一次
export输出的变量需要使用{ }盛放；export default不需要
一个js文件可以有多个export，有且只能有一个export default

slot插槽

插槽是一块模板，对于任何一个组件，模板种类分为非插槽模板和插槽模板。
非插槽模板：指html模板，如’div/span/ul/table’这些，它们的显示与隐藏以及怎样显示由插件自身控制。
插槽模板：是slot，它是一个空壳子，显示与隐藏以及最后使用什么样的HTML模板显示由父组件控制，但是插槽显示的位置由子组件自身决定，slot写在组件template的哪块，父组件传过来的模板就显示在哪块。

一个template下就只能有一个根节点<template><div></div></template>
父子组件相互传值

父组件向子组件传值：父页面里，在子组件里定义了一个参数名，子组件里需要定义接收的参数

<!-- 父组件里 -->
<children-componment fatherVar='this is value'></children-componment>
<!-- 子组件里 Vue文件 -->
props:['fatherVar']

子组件向父组件传值：子组件里添加父组件方法的定义回调

子组件使用$emit(“methodName”,params)触发父组件的自定义事件 (“handleClose”, false) –>

1
2
3

<send-back-dialog :showDialog="showSendBackDialog" @handleClose="handleCloseSendBackDialog" @refresh="reload" ></send-back-dialog>
this.$emit("refresh");   <!-- reload是父组件方法名称 -->
this.$emit(event:string,...args:any[]); <!-- 可以传递多个参数 -->

在子组件定义的对象，默认值是()=>{}

props: {
   	paramObj: {
       	type: Object,
       	default: ()=>({})
       }
   }

对象中添加原型方法，则直接在created上定义

Array.prototype.indexOf = function(val){
    for(var i=0;i<this.length;i++){
          if(this[i] == val) return i;
    }
    return -1;
}
Array.prototype.remove = function(val){
    var index = this.indexOf(val);
    if(index>-1){
        this.splice(index,1);
    }
}

刷新页面，重新获取数据：通过路由的显示隐藏

<!-- App.vue -->
<template>
  <div id="app">
        <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>
<script>
export default {
  name: 'App',
  provide (){
     return {
       reload:this.reload
     }
  },
  data(){
    return {
       isRouterAlive:true
    }
  },
  methods:{
    reload (){
       this.isRouterAlive = false
       this.$nextTick(function(){
          this.isRouterAlive = true
       })
    }
  },
  components:{
  }
}
</script>

<!-- 子页面 -->
<script>
export default {
inject:['reload'],

methods:{
	clear(){
		this.reload()
	 }
 }
 </script>

来源博客：https://blog.csdn.net/yufengaotian/article/details/81238792

三、相关知识点

1.子组件获取父组件值

在父页面的子组件定义变量后，直接在子页面使用this.$parent.var 即可获取
在父页面的子组件的prop定义变量，子组件直接使用this.var 即可获取

2.watch-监听器

watch: {
	"groupData.qtmc":function(){ }  //【对象的属性，需要加""】  对象-- 			data:function(){ 
		deep:true,			// 深度监听
		handler(newVal,oldVal){}   // 数值改变回调事件
	} 
}

3.删除对象属性

1	Vue.detele(this.object,"propertyName");

4.路由：route

route是VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如histort对象；经常用的跳转链接可以用this.$router.push 和 router-link跳转一样；this.$router.push会往history栈中添加一个新的记录

更多
route 相当于当前正在跳转的路由对象，可以从里面获取name,path,params,query等
嵌套路由：父级的路由要 + <router-view> ；通过命名路由，可在同级显示多个子级路由
跳转方式
- 路由组件 router-link
- push方法：this.$router.push({ path: ‘/home/first’ })

四、全局引入（main.js)

jquery

1 2	import jquery from 'jquery' window.jquery = window.$ = jquery

五、其他

1. 问题汇总

报警告，直接修改了组件里的属性
点击传送
数据渲染无效
- 赋值时，执行顺序可能不一定符合从上到下。此时使用定时器setTimeout
- Vue中有些组件拿不到，要考虑是否是还未加载的原因