Vue基础—使用

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

一、模板语法

1. 数据渲染

  1. 获取对象数据

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     // html
    <div id="app"> {{ message }} </div>

    // js
    var app = new Vue({
    el : '#app' , //将DOM元素进行绑定
    data : { //定义数据对象、信息
    message : 'Hello Vue'
    }
    });
  2. 绑定DOM元素特性:v-bind,可以简写

    1
    2
    <span v-bind:title="message"> 鼠标悬停 </span>
    <span :title="message"> 鼠标悬停 </span>
  3. 条件和循环

    1
    2
    <div> <p v-if="seen" > 看到了 </p> </div>
    <div> <ol> <li v-for="temp in arr">{{ temp.content }} </li> </ol> </div>
  4. 事件绑定:v-on ,可以简写为@

    1
    2
    3
    4
    5
    <button @click="remove">移除</button>
    // 方法
    methods:{
    remove:function(){ ... }
    }
  5. 表单双向绑定:v-model(Vue实例中的data与渲染在DOM表单元素【input/textarea/select】上的内容保持一致)

    1
    2
    3
    4
    5
    <el-input v-model="form.title"></el-input>
    // data
    form:{
    title:''
    }
  6. 如果数据赋值,但视图未刷新,可使用$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

1
2
3
4
<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>

二、入门知识点

  1. router文件夹下index.js配置的是路由访问地址
  2. 需要使用到其他组件时,可通过import方式引入
  3. export和export default区别
  • export不限变量数;export default只输出一次

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

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

  1. slot插槽
  • 插槽是一块模板,对于任何一个组件,模板种类分为非插槽模板和插槽模板。
  • 非插槽模板:指html模板,如’div/span/ul/table’这些,它们的显示与隐藏以及怎样显示由插件自身控制。
  • 插槽模板:是slot,它是一个空壳子,显示与隐藏以及最后使用什么样的HTML模板显示由父组件控制,但是插槽显示的位置由子组件自身决定,slot写在组件template的哪块,父组件传过来的模板就显示在哪块。
  1. 一个template下就只能有一个根节点<template><div></div></template>
  2. 父子组件相互传值
  • 父组件向子组件传值:父页面里,在子组件里定义了一个参数名,子组件里需要定义接收的参数
    1
    2
    3
    4
    <!-- 父组件里 -->
    <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[]); <!-- 可以传递多个参数 -->
    • 在子组件定义的对象,默认值是()=>{}
      1
      2
      3
      4
      5
      6
      props: {
      paramObj: {
      type: Object,
      default: ()=>({})
      }
      }
  1. 对象中添加原型方法,则直接在created上定义

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    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);
    }
    }
  2. 刷新页面,重新获取数据:通过路由的显示隐藏

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    <!-- 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-监听器

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

3.删除对象属性

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

四、全局引入(main.js)

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

五、其他

1. 问题汇总

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

本文标题:Vue基础—使用

文章作者:MangoCheng

发布时间:2020年04月28日 - 20:35:46

最后更新:2020年04月28日 - 21:01:33

原始链接:http://mangocheng.com/posts/2ea23b74.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。