vue基础语法

Bertha 。 2021-12-17 13:17 277阅读 0赞

### 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>

### 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>