Vue第一天
表单元素：
v-model 显示在输入框里面的默认值
v-html 使用 v-html 指令用于输出 html 代码
v-show 控制html代码是否显示
v-if 条件语句
v-for 循环语句(v-for 指令需要以 x in sites 形式的特殊语法， sites 是源数据数组并且 x 是数组元素迭代的别名 )
方法传参 在方法里面传入参数：直接在方法名后面的括号加入
文档事件 如果要函数需要在文档加载完后执行，需要定义mouted属性
键盘事件 @keyup.13表示键盘录入：13是表示enter键
1 //一、v-model: 2 <body> 3 <div id='app'> 4 <!-- <p>{{message}}</p> --> 5 <!-- 显示在输入框里面的默认值 --> 6 <input v-model="message" /> 7 </div> 8 </body> 9 <script> 10 new Vue({ 11 el:'#app', 12 data:{ 13 //默认值 14 message:'男' 15 } 16 }) 17 </script> 18 19 20 //二、v-html: 21 <body> 22 <div id="app"> 23 <div v-html="message"></div> 24 </div> 25 </body> 26 <script> 27 new Vue({ 28 el:'#app', 29 data:{ 30 message:'<h1>我细化你</h1>' 31 } 32 }) 33 </script> 34 35 //三、v-show 36 <body> 37 <div id='app'> 38 <!-- v-show用来控制html元素是否显示 --> 39 <h1 v-show="ok">Hello</h1> 40 <!-- 按钮@click="ss" --> 41 <button @click="ss">点击按钮显示</button> 42 </div> 43 </body> 44 <script> 45 new Vue({ 46 el:'#app', 47 data:{ 48 ok:'false' 49 }, 50 methods:{ 51 ss:function(){ 52 //每点击一次按钮，就给ok赋值：和默认值取反 53 this.ok=!this.ok 54 } 55 } 56 }) 57 </script> 58 59 //四、v-if 60 <body> 61 <div id='app'> 62 <div v-if="type=='1'"> 63 <p>1</p> 64 </div> 65 <div v-else-if="type=='2'"> 66 <p>2</p> 67 </div> 68 <div v-else-if="type=='3'"> 69 <h1>哈哈</h1> 70 </div> 71 <div v-else> 72 <p>没有1/2/3</p> 73 </div> 74 </div> 75 </body> 76 <script> 77 new Vue({ 78 el:'#app', 79 data:{ 80 type:'' 81 } 82 }) 83 </script> 84 85 //五、v-for和方法传参 86 <body> 87 <div id="app"> 88 <table> 89 <thead> 90 <th>id</th> 91 <th>name</th> 92 </thead> 93 <tbody> 94 <tr v-for="x in sites"> 95 <td>{{x.id}}</td> 96 <td>{{x.name}}</td> 97 <!-- 方法传参：两个参数 --> 98 <td><button @click="login(x.id,x.name)">登录</button></td> 99 </tr> 100 </tbody> 101 </table> 102 </div> 103 </body> 104 <script> 105 new Vue({ 106 el:'#app', 107 data:{ 108 sites:[ 109 {id:1,name:"张三"}, 110 {id:2,name:"李四"}, 111 {id:3,name:"王五"} 112 ] 113 }, 114 methods:{ 115 login:function(data,data1){ 116 alert("得到的id是："+data+"名字是"+data1) 117 } 118 } 119 }) 120 </script> 121 122 //六、文档事件 123 <body> 124 <div id='app'> 125 126 </div> 127 </body> 128 <script> 129 new Vue({ 130 el:'#app', 131 mounted:function(){ 132 alert("加载完毕") 133 } 134 }) 135 136 //七、键盘事件 137 <body> 138 <div id='app'> 139 <!-- @keyup.13表示键盘录入：13是表示enter键 --> 140 <button @keyup.13="login">登录</button> 141 </div> 142 </body> 143 <script> 144 new Vue({ 145 el:'#app', 146 methods:{ 147 login:function(){ 148 alert("登录！！！") 149 } 150 } 151 }) 152 </script>
