Vue 入门基础使用

详细内容可以到  vue官方文档 查看

1. data参数用来绑定VUE实例的数据变量，每个不同变量之间用逗号分隔

这个双大括号的语法叫做 mustache 语法，大括号里面的是作为变量形式出现的。

<template>
    <div>
        <p>data里面显示{{msg}}</p>
    </div>
</template>
<script>
export default {
    data(){
        return{
            msg:'Hello,Vue!'
        }
    }
}
</script>

运行结果

2.  v-model 数据双向绑定

<template>
  <div>
    <el-form style="width:500px;margin-top:40px;text-align:center" ref="form" :model="form" label-width="80px" :rules="rules">
      <el-form-item label="名称" prop="userName">
        <el-input v-model="form.userName"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="passWord">
        <el-input v-model.number="form.passWord"></el-input>
      </el-form-item>
      <el-button type="primary" @click="submit('form')">提交</el-button>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        userName: "张三",
        passWord:'123456'
      }
    };
  }
};
</script>

运行效果

 3. v-bind  绑定属性(元素的属性) class,style,hidden,width,height  v-bind="属性"  或  :属性  或 父组件调用子组件父组件给子组件传值的时候

<template>
  <div>
      <div :class="[flag ? 'red' : 'blue']">Hello,Vue!</div>
      <div :class="{show:true}">Hello,Vue!</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      flag:true
    };
  }
};
</script>
<style scoped>
.red{
    color: red;
}
.blue{
    color: blue;
}
.show{
    color: blue;
}
</style>

 1. 首先定义在components/child.vue

<template>
    <div>
        <p>我是父组件传过来的属性:{{value}}</p>
        <el-divider></el-divider>
        <div>
            <p>姓名:{{obj.username}}</p>
            <p>年龄:{{obj.age}}</p>
        </div>
        <el-divider></el-divider>
        <div>
            <div v-for="(item,index) in array" :key="index">
                <p>姓名:{{item.name}}</p>
                <p>性别:{{item.sex}}</p>
                <p>喜好:{{item.happy}}</p>
            </div>
            <p>年龄:{{obj.age}}</p>
        </div>
        <el-divider></el-divider>
        <button @click="getInfo">点我触发点击方法</button>
    </div>
</template>
<script>
export default {
    data(){
        return{

        }
    },
    props:{
        value:String,
        obj:{
            type:Object
        },
        array:{
            type: Array,
            default: () => []
        },
        btnClick:{
            type:Function
        }
    },
    mounted() {
        this.btnClick('123')
    },
    methods: {
        getInfo(){
            this.$emit('btnclick','123')
        }
    },
}
</script>
<style scoped>

</style>

2.  定义views/index.vue

<template>
    <div>
       <child :value="parentValue" :obj="form" :array="dataList" @btnclick="parentMethod"></child>
    </div>
</template>
<script>
import child from '../components/child.vue'
export default {
    name: 'index',
    components:{
        child
    },
    data(){
        return{
            parentValue:'123',
            form:{
                username:'张三',
                age:20
            },
            dataList:[
                {name:'陈心宇',sex:'男',happy:'玩'},
                {name:'张三三',sex:'女',happy:'学习'}
            ]
        }
    },
    methods: {
        parentMethod(value) {
            console.log(value,"子组件传过来的value")
        }
    },
}
</script>

 4.  点击触发方法  v-on(简写@click)

<template>
  <div>
    <el-button type="primary" v-show="showbutton"  @click="printButton">打印</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showbutton: true
    };
  },
  methods: {
    printButton() {
      this.showbutton = false;
    }
  }
};
</script>

5. 页面路由跳转  

//页面路由跳转  params和query传值一样效果只是在需要用的页面取值不同
this.$router.push({name:router.js页面定义组件路由的name,params:{参数名:值}})
this.$router.push({path:router.js定义的路由,params:{参数名:值}})
this.$router.push({path:router.js定义的路由,query:{参数名:值}})


// 取值  
this.$route.query(参数名)
this.$route.params(参数名)

6.  v-show / v-if

v-show:  true/false   v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；，频繁的进行增删DOM操作会影响页面加载速度和性能

　　v-if:  true/false         v-if 是根据判断条件来动态的进行增删DOM元素

7. 遍历页面节点元素  v-for

 <div v-for="(定义变量名,元素下标) in 数组" :key="index">
       <p>姓名:{{item.数组下的元素}}</p>
 </div>
// 用法

　　<div v-for="(item,index) in array" :key="index">

 　　　　<p>姓名:{{item.name}}</p>

        <p>性别:{{item.sex}}</p>

        <p>喜好:{{item.happy}}</p>

　　</div>