一、script引包，例如：
<script src="../node_modules/vue/dist/vue.js"></script>
二、创建实例化对象
new Vue({ el:"#app", data:{ msg:"hello vue", show:true } });
三、指令系统
v-if：一般用于DOM操作，隐藏或者渲染一个标签，它是惰性的，只有当条件满足时，才渲染
v-show： 与v-if类似，但页面一加载，它便已经渲染，只是根据条件基于css样式进行切换
<style> .show-test{ width: 50px; height: 50px; background-color: red; } </style>
<div class="show-test" v-if = ‘show‘>哈哈哈</div> <div class="show-test" v-show = ‘show‘>嘿嘿嘿</div>
new Vue({ el:"#app", data:{ msg:"hello vue", show:false } });
v-for：遍历一个数组或者对象
<ul> <li v-for="(site,index) in array_test"> <span>{{index+1}}</span>{{site}} </li> </ul> <ul> <li v-for="(title,data) in object_test"> {{data}}:<span>{{title}}</span> </li> </ul> <script> new Vue({ el:"#app", data:{ msg:"hello vue", show:false, array_test:["北京","南京","东京"], object_test:{"name":"aike","age":18}, } }); </script>
v-bind：绑定属性，可以是内置属性，可以是自定义属性，可以通过object判断是否绑定该属性
v-on：绑定事件，值为一个函数，在vue对象中的methods属性中实现
<style> .show-test{ width: 50px; height: 50px; background-color: red; } .show_yellow{ width: 50px; height: 50px; background-color: yellow; } </style> <div class="show-test" v-bind:class="{show_yellow:bcolor}"> # bcolor为true时，为class添加值show_yellow color </div>
new Vue({
el:"#app",
data:{
msg:"hello vue",
show:false,
array_test:["北京","南京","东京"],
object_test:{"name":"aike","age":18},
bcolor:false,
},
methods:{
coloru(){
this.bcolor=!this.bcolor;
}
}
});
v-html和v-text：对页面的dom进行赋值运算，相当与js中innerText innerHTML
v-bind和v-on的简写方式：
<div :id="1"></div> <div v-bind:id="1"></div> <div v-on:click="test"></div> <div @click="test"></div>
原文：https://www.cnblogs.com/aizhinong/p/12595639.html