Vue export default {} 函数基本结构

2022-04-19 19:13:35 by 极墨笔记 in PHP

<script>
//引入组件后面的.vue可以省略import Confirm from '../sub/Confirm';<br/>export default {
        name : "First",
        // components 组件注册
        components: {
            Confirm
        },
        // 注册属性，引用父组件的数据
        props: {
            name: {
                type: String,
                default: "父组件"
            },
        },
        created() {
            // created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
        },
        mounted() {
            // mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
        },
        // data() 为变量赋值等
        data() {
            return {
                msg: "Welcom to FirstApp"
            };
        },
        // methods 编写js函数
        methods: {
            getMessage(val) {
                alert(val);
            }
        }        // 计算属性，里面的属性被调用时会执行        computed:{        total(){
        return this.todos.length
    　　　　}        }}
</script>