VUE 基础语法

html语法

v-model  #双向绑定
v-once   #一次绑定数据不跟随变化
v-text   #直接输出文本  不解析内容html标签
v-html   #页面正常解析内容中的html标签
v-bind:id  #数据绑定
v-bind:{attr_name}  #动态数据绑定
:{attr_name}    #缩写 attr_name为属性名称
v-on:click   #绑定事件
@click     #绑定事件缩写
v-if        #判断是否渲染
v-else
key       #管理可复用元素
v-show     #显示或隐藏元素
v-for="item in items"   #for循环
v-for="(item,index) in items"
v-for="(item,name,index) in items"

js语法

var vm = new Vue({
        el:"#app",
        data:{
            message:'response msg',
            info:'info str',
            watch:1,
            res:1,
        },
        watch:{
            watch(newN,oldN){
                this.res = newN*newN;
            }
        },
        methods:{
            dosomething(){
                console.log('click')
            },
            changeinfo(){
                vm.reversedInfo = 'new info';
            }
        },
        computed:{
            reversedMessage(){
                this.message=this.message.split('').reverse().join('');
                return this.message
            },
            reversedInfo:{
                get()
                {
                    return this.info.split('').reverse().join('');
                },
                set(newValue)
                {
                    this.info = newValue;
                }
            }
        }
    });
    vm.$watch('watch',function(newN,oldN){
        this.res = newN*newN;
    });

App.vue

<template>
    <div>
        <Menu :menus="menus" :wenSite="webSite" :addMenu="addMenu" @addMenu="addMenu" ref="menu"></Menu>
    </div>
</template>
<script>
import Menu from './components/Menu';
export default{
    name:'App',
    components:{
        Menu
    },
    data(){
        return {
            menus:[
                {id:1,name:'***'},...
            ],
            webSite:{
                url:'url',...
            }
        },
        methods:{
            addMenu(menu){
                this.meuns.push(menu)
            }
        },
        mounted(){
            this.$refs.menu.$on('addMenu',this.addMenu);
        }
    }
}
</script>

Menu.vue

<template>
    <ul>
        <li v-for="(menu,index) in menus" "key="menu.id">
            <a :herf="'url'+menu.id">{{menu.name}}</a>
        </li>
    </ul>
    <input type="text" v-model="content"/>
    <button @click="add"></button>
</template>

<script>
    export default{
        name:'Menu',
        props:['menus','webSite','addMenu'],
        data(){
            return {
                content:''
            }
        },
        methods:{
            add(){
                const content = this.content.trim();
                if(!content){
                    alert('菜单名称不能为空);
                    return;
                }
                let menu = {id:*,name:content}
                this.addMenu(menu)
                this.$emit('addMenu',$menu);//对应  @addMenu方式调用
            }
        }
    }
</script>