【Vue 面试题10道】我好像之前想过要写，不过之前JavaScript面试题比较多，就暂时略过了，这些应该几乎把常问的都包括了

<template>
  <div id="app">
    <HelloWorld msg="我是父组件传过来的值，用props接收~"/>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<template>
  <div class="hello">
      {{ msg }}: props: { msg: String }
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<template>
  <div class="hello">
    <button @click="sonGiveFatherValue">传递数据给父组件</button>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  methods: {
    sonGiveFatherValue() {
      const data = '我是传递给父组件的一个字符串'
      this.$emit('shuju', data)
    }
  }
}
</script>

<template>
  <div id="app">
    <HelloWorld @shuju="childData"/> 
    <div>接收子组件的数据： {{fatherOfChildValue}}</div>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  data() {
    return {
      fatherOfChildValue: ''
    }
  },
  components: {
    HelloWorld
  },
  methods: {
    childData(val) {
      this.fatherOfChildValue = val;
    }
  }
}
</script>

<HelloWorld @shuju="childData"/> 
<script>
childData(val) {
  this.fatherOfChildValue = val;
}
</script>

<template>
  <div>
    <h2>计算属性示例</h2>
    <input v-model="firstNumber" type="number" placeholder="输入第一个数">
    <input v-model="secondNumber" type="number" placeholder="输入第二个数">
    <p>两数之和: {{ sum }}</p>
    <p>两数之差: {{ difference }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      firstNumber: 0,
      secondNumber: 0
    };
  },
  computed: {
    sum() {
      return parseInt(this.firstNumber) + parseInt(this.secondNumber);
    },
    difference() {
      return parseInt(this.firstNumber) - parseInt(this.secondNumber);
    }
  }
};
</script>

<template>
  <div>
    <h2>监听数据示例</h2>
    <input v-model="message" type="text" placeholder="输入消息">
    <p>消息长度: {{ messageLength }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: '',
      messageLength: 0
    };
  },
  watch: {
    message(newMessage) {
      // newMessage 为新的消息值
      this.messageLength = newMessage.length;
    }
  }
};
</script>

// 在路由配置中使用hash模式
const router = new VueRouter({
  mode: 'hash',
  routes: [
    // 路由配置
  ]
})

// 在路由配置中使用history模式
const router = new VueRouter({
  mode: 'history',
  routes: [
    // 路由配置
  ]
})

data:{
  username: ''
},
login() {
  ...
  this.$router.push({
    name: 'home', //注意使用 params 时一定不能使用 path
    params: { username: this.username },
  })
}

<router-link :to="{ name: 'home', params: { username: username } }">

data:{
  username: ''
},
login() {
  ...
  this.$router.push({
    path: '/home',
    query: { username: this.username },
  })
}

<router-link :to="{ path: '/home', query: { username: username } }">

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
调试工具：vue devtools (Vue开发工具)
Vuex就像眼镜：您自会知道什么时候需要它。

export const  pageMixin = {
    data() {
        return {
            page: { // 分页信息
                pageNo: 1, // 当前页
                limit: 10, // 每页行数
                total: 0, // 列表总数量
            },        
            tableList: [], // 列表数据
            loading: false, // 加载列表数据的Loading
            PAGE_SIZES: [5, 10, 20, 30, 50, 100], // 每页行数列表,用于切换每页行数
            LAYOUT: "total, sizes, prev, pager, next, jumper" // Element表格组件中使用的功能
        }
    },
    methods: {
        // 查询列表数据
        queryList() {},
        // 修改当前页
        handleCurrentChange(pageNo) {
            this.page.pageNo = pageNo;         
            this.queryList();
        },
        // 修改每页行数
        handleSizeChange(limit) {
            this.page.pageNo = 1;
            this.page.limit = limit;
            this.queryList();
        },
    },
}

import {pageMixin} from "@/mixins/pageMixin"
export default {
    mixins: [ pageMixin ],
    data() {
      return {      
      }
    }        
}

v-html   //html
v-text   //元素里要显示的内容
v-bind:data    //绑定动态数据   :data
v-on:click      //绑定事件      @click
v-for
v-if //条件渲染指令
v-model    //双向绑定，用于表单