<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/vue.js"></script> <style> .active{ color:red; } </style> </head> <body> <div id="app"> <span>{{message}}</span></br> <!--v-once 指令，只渲染一次，不会随着数据的改变而改变--> <span v-once>{{message}}</span></br> <!--可以解析服务器返回的html代码--> <span v-html="html1"></span></br> <!--v-text通常情况下接受一个String类型--> <span v-text="message"></span></br> <!-- v-pre 用于跳过这儿元素和他的子元素的编译过程 把里面的东西原封不动的显示出来 --> <span v-pre>{{message}}</span></br> <!--v-cloak cloack:斗篷 --> <!--绑定v-bind 给一个属性（src）绑定一个变量（img） 语法糖：直接写个冒号： --> <img v-bind:src="img" alt="" ></br> <img :src="img" alt=""></br> <input :value="message"></br> <!-- 动态的绑定class class="{active:isActive} 第一个参数为类名第二个为布尔值 里面可以写很多的类名和布尔值 有两种写法一种直接写 一种通过方法来调用 --> <h4 :class="{active:isActive}">红色</h4> <h4 :class="getClass()">红色</h4> <button @click="change">改变</button> </div> <script> const app=new Vue({ el:"#app", data:{ message:'hello', html1:'<a href="http://www.baidu.com">baidu</a>', img:'../img/timg.jpg', isActive:true }, methods:{ change:function () { if(this.isActive==true){ this.isActive=false; }else{ this.isActive=true; } }, getClass:function(){ return {active:this.isActive}; } } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/vue.js"></script> </head> <body> [v-cloak]{ display:none; } <div id="app"> <!--在vue解析之前，div中you一个属性v-cloak 在vue解析之前，div中you没有一个属性v-cloak 这是为了防止html已经加载而 vue代码卡了的情况 --> <span v-cloak>{{message}}</span> </div> <script> setTimeout(function () { const app=new Vue({ el:"#app", data:{ message:'hello' } }) },50000) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/vue.js"></script> </head> <body> <!-- mustache语法也就｛｛｝｝--> <div id="app"> <span>{{message}}，zheng</span> <br> <!-- 不仅仅能直接写变量，能写简单的表达式--> <span>{{firstname+lastname}}</span> <span>counter: {{counter*2}}</span> </div>sadsa <script> const app=new Vue({ el:"#app", data:{ message:'hello', firstname:'zheng', lastname:'shang', counter:'100' }, method:{ } }) </script> </body> </html>