Vue.js基础

基本格式

`new Vue({//同一个html代码中每个Vue对象指定的id必须是不同且存在的
        	el:"#app1",  表示指定的id
        	data:{//存放数据的地方，一般是key:value的格式
        	name:a.message,
        	age:"12",
        	}
        })  

基本用法

<div id="app">
        <p>{{}}</p>
        <p>{{ 1+1 }}</p>
        <p>{{ 1/2 }} 相当于数学运算中的除法</p>
        <p>{{ 1+1>2?2:3 }}</p>
    </div>
<script><!-- script代码块必须写在指定id的代码块之后才能生效-->
 var a=new Vue({//同一个html代码中每个Vue对象指定的id必须是不同且存在的
        	el:"#app1",  表示指定的id
        	data:{//存放数据的地方，一般是key:value的格式
        	name:a.message,
        	age:"12",
        	}
        })    
    </script>
    <div id="app1">
        <p>{{ name}}</p>
        <p>{{ age}}</p>
    </div>
    <script>
        new Vue({
            el: "#app1",
            data: {
                name: a.message,//不同的Vue对象之间的值可以相互传递
                age: a.age
            }
        })
    </script>  
 </script>

v-show

<div id="app">
        <div v-show="show">此处显示，动态显示和隐藏节点</div>
        <div v-show="noshow">此处不显示，</div>

    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                show: 'true', //可以加单引号，也可以不加单引号
                noshow: false,
                name: "aa"

            }
        })
    </script>

v-html

  <div id="app1">
        <div v-html="html"></div><!--直接在指定id的代码块中使用--!>
    </div>
    <script>
        new Vue({
            el: "#app1",
            data: {
                name: "aa",
                html: '<h1>h1标签<h1>'//定义的值为html代码块
            }
        })
    </script>

v-if v-else-if v-else

<div id="app2">
<div v-if="isCreated"> 动态创建和删除dom节点，当显示为true时，该节点被创建出来</div>
<div v-if="false"> 动态创建和删除dom节点，当显示为false时，该节点被删除</div>
	</div>
	<script>
	new Vue({
	el:"#app2",
	data:{
	isCreated:true,
	}
	})
	</script>

 <div id="app4">
<div v-if="grade>90">优秀</div><!--  先执行if语句，如果if语句执行通过则不再执行下面的语句,且语句格式严格要求if  else-if  else 顺序执行-->
 <div v-else-if="grade>60&&grade<90">良好</div>
 <div v-else>不及格</div>
 </div>
 <script>
 new Vue( {
 	el:"#app4",
 	data:{
 	grade: "80",//数字可以不加引号
 	}
  } )
 </script>

动态绑定class样式