<!DOCTYPE html> <html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <title>Vue learing</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <style> .changeColor{ background: #444; color: red; } </style> </head> <body> <div id="app"> <!-- 使用v-bind指令设置样式--> <template> <div v-bind:class="object">背景</div> </template> <br><br> <!--使用v-bind指令设置样式 class为Object--> <template> <div v-bind:class="object"></div> </template> <!-- 使用v-ob指令添加事件监听--> <template> <button v-on:click="counter += 1">按钮</button> <p>按钮点击次数：{{ counter }}</p><br> <button v-on:click="greet">greet</button> </template> <br><br> <!--使用v-model指令实现数据双向绑定 --> <template> <p>元素</p> <input v-model="inputVal" type="text" placeholder="请输入"/> <p>您输入的元素：{{ inputVal }}</p> <br> <p>元素</p> <textarea v-model="textVal" style="white-space: pre" placeholder="请输入"></textarea> <p>您输入的的文本：{{ textVal }}</p> </template> <br><br> <!-- 复选框练习--> <template> <p>单个复选框</p> <input type="checkbox" id="checkbox" v-model="checked"> <label>{{ checked }}</label> <br> <p>多个复选框</p> <input type="checkbox" id="checkOne" v-model="check" value="storm sprite"> <label for="storm sprite">storm sprite</label> <input type="checkbox" id="checkTwo" v-model="check" value="Invoker"> <label for="Invoker">Invoker</label> <input type="checkbox" id="checkThree" v-model="check" value="Shadow"> <label for="Shadow">Shadow</label> <br> <span>您选择的值：{{ check }}</span> </template> <br><br> <!-- 单选框 --> <template> <input type="radio" id="chose_first" v-model="pick" value="Flume"> <label for="chose_first">Chrome</label> <input type="radio" id="chose_second" v-model="pick" value="Hive"> <label for="chose_second">FireFox</label> <br> <span>您选择的值：{{ pick }}</span> </template> <br><br> <!-- 选择框--> <template> <select v-model="selected"> <option>请选择一个网站</option> <option value="www.baidu.com">百度</option> <option value="wwww.google.com">谷歌</option> </select> <span>您选择的网站：<a>{{ selected }}</a></span> </template> <script> new Vue({ el:'#app', data:{ flag:true, object:{ changeColor:true }, counter:0, inputVal:'show the inintal input value', textVal:'show the inintal textarea value', checked:false, check:[], pick:'Chrome', selected:'' }, methods:{ greet:function (event) { console.log('Hi! , nice to meet you '); console.log('事件对象：'+event.target); } } }) </script> </div> </body>
Vue入门篇_2
猜你喜欢
转载自blog.csdn.net/lzqworkonline/article/details/73732340
今日推荐
周排行