Vue入门教程之Vue语法

川长思鸟来 2023-02-21 09:22 102阅读 0赞

# 1.Vue语法 #

<div id="#app">
    	{
       {msg}}    
    </div>
    <script src = "vue.js"></script>
    <script> let vm = new Vue({ el:"#app", data:{ msg:"vue", }, methods:{ } }) </script>

# 2.v-for #

for循环操作数组

<div id="#app">
    	<li v-for = "obj in studetList">{
       {obj.name}}  |  {
       {obj.age}}</li>
    		
    </div>
    <script src = "vue.js"></script>
    <script> let vm = new Vue({ el:"#app", data:{ studetList[ { name:"章程", age:18, }, { name:"零食", age:12, }, ] } }) </script>

# 3.v-text #

v-text v-html效果一样

# 4.v-if v-on #

<div id="app">
        
        <h1 v-if="flag">{
       {msg}}</h1>
        
        <h1 v-show = "flag">{
       {msg}} </h1>
     	
        <h3 v-if="a==1">111</h3>
        <h3 v-else-if="a==2">222</h3>
        <h3 v-else="a==3">333</h3>
    	<button v-on:click = "fun()">click </button>    
        
        <button @click = "fun1("123")">click </button>    
    </div>
    <script stc = "vue.js"></script>
    <script> let vm = new Vue({ el:"#app", data:{ msg:"ls", flag:true; }, methods:{ fun(){ this.flag = !this.flag; }, fun1(value){ this.msg = value; } } }) </script>

# 5.事件修饰符 #

<div id="app">
        
    	
        
        
        
        
        <a herf = "htttp://www.baidu.com" @click.prevent = "f1()"></a>
        
        
        <input type= "text" @keyup.enter = "f2()">	
    </div>
    <script src = "vue.js"></script>
    <script> let vm = new Vue({ el:"#app", data:{ msg:"123", }, methods:{ f1(){ console.log(123); }, f2(){ console.log(event.keyCode); } } }) </script>