vue基础语法

1.双向数据绑定（v-model）

<input type="text" ref="name" v-on:keyup="changeName"> //html使用ref

changeName:function(){
	this.name = this.$refs.name.value;
}
//js调用refs

或者

<input type="text" ref="name" v-model="name"> //使用v-model

2.计算方法(computed)

和js中method同级，只渲染数据改变时的方法，节约性能

    methods: {  //所有方法都会执行
        /*addToA: function(){
            console.log('addToA');
            return this.a + this.age;
        },
        addToB: function(){
            console.log('addToB');
            return this.b + this.age;
        }*/
    },
    computed: { //仅会执行相应方法
        addToA: function(){
            console.log('addToA');
            return this.a + this.age;
        },
        addToB: function(){
            console.log('addToB');
            return this.b + this.age;
     }

3.动态绑定Class(v-bind)

html:
<h1 v-bind:class={h1Css:ish1Css}></h1>  //class=后边是一个对象，冒号后只能是false或true
                                        //true便使用该css，否则不使用
css:
ish1Css:true

4.条件判断(v-if ) | 显示与隐藏(v-show)

html：
<p v-if="istrue==3">isTrue</p>       //非占位，if判断为false则无该元素
<p v-else-if="isFalse">isFalse</p>
<p v-else>6</p>

<p v-show="istrue">isshow</p>        //占位，无论true与否，只是display了

js:
istrue:2,
isFalse:false

5.for循环(v-for)

js:
    data: {
        characters: ['Mario', 'Luigi', 'Yoshi', 'Bowser'],
        ninjas: [
            { name: 'Ryu', age: 25 },
            { name: 'Yoshi', age: 35 },
            { name: 'Ken', age: 55 }
        ]
    }

htmml:

            <ul>
                <li v-for="character in characters">{{ character }}</li>
            </ul>
            <ul>
                <li v-for="(ninja, index) in ninjas">{{ index }} . {{ ninja.name }} - {{ ninja.age }}</li>
            </ul>
            <!-- <div v-for="(ninja, index) in ninjas">
                <h3>{{ index }} . {{ ninja.name }}</h3>
                <p>Age - {{ ninja.age }}</p>
            </div> -->

6.初始化多个vue

var one = new Vue({   //两个vue可以进行数据更改
	el:"#binddata",
	data:{
		istrue:true
	},
	methods:{
		
	}
});

var two = new Vue({
	el:"#binddata-two",
	data:{

	},
	methods:{
		change:function(){
            one.istrue = false;
	}
})

7.组件(component)

js:
Vue.component("hello",{
	template:`   //使用 · 可以换行
				<p>
					{{name}}:大家好，我是Vae
					<button v-on:click="changeName">改名</button>
				</p>
			`,
	data:function(){  //data一定要这么写，避免全局更改
		return{
			name:"松鼠"
		}
	},
	methods:{
		changeName:function(){
			this.name = "beiqiu"
		}
	}
})

html:
<hello></hello>