Vue基础—实践：模板语法、路由

前言

Vue基础模板语法：数据渲染、路由
博客地址：芒果橙的个人博客 【http://mangocheng.com】

一、模板语法

1. 数据渲染

1. 获取对象数据

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

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

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

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

3. 条件和循环

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

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

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

5. 表单双向绑定：v-model（Vue实例中的data与渲染在DOM表单元素【input/textarea/select】上的内容保持一致）

<el-input v-model="form.title"></el-input>
// data
form:{
	title:''
}

6. 如果数据赋值，但视图未刷新，可使用$set方法

this.$set(this.obj,'newVar',"这是属性值");

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

<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

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

---

二、入门知识点

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

• export不限变量数；export default只输出一次

• export输出的变量需要使用{ }盛放；export default不需要

• 一个js文件可以有多个export，有且只能有一个export default

4. slot插槽

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

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

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

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

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

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

  <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: ()=>({})
      }
  }
  

7. 对象中添加原型方法，则直接在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);
    }
}

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

<!-- 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.删除对象属性

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)

1. jquery

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

---

五、其他

1. 问题汇总

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