1 DOCTYPE html> 2 <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Titletitle> 6 <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script> 7 head> 8 <style> 9 .class1{ 10 /*background-color: green;*/ 11 background: red; 12 color: yellow; 13 } 14 style> 15 <body> 16 <div id="app"> 17 <p>{{message}}p> 18 <p v-if="seen">现在你看到我了p> 19 <p v-show="ok">Hello!p> 20 <a v-bind:href="url">百度一下a> 21 <a :href="url">百度一下v-bind缩写a> 22 <br> 23 <input v-model="message1"> 24 <br> 25 <button v-on:click="reverseMessage">反转字符串button> 26 <button @click="reverseMessage">反转字符串v-on缩写button> 27 <br>{{message|capitalize}} 28 29 <br><h1>v-if条件语句h1> 30 <div v-if="Math.random()>0.5"> 31 Sorry 32 div> 33 <div v-else> 34 Not Sorry 35 div> 36 37 <div v-if="type == 'A'">Adiv> 38 <div v-else-if="type == 'B'">Bdiv> 39 <div v-else-if="type == 'C'">Cdiv> 40 <div v-else>Not A/B/Cdiv> 41 42 div> 43 44 <hr> 45 <div id="vue_det"> 46 <h1>site:{{site}}h1> 47 <h1>url:{{url}}h1> 48 <h1>{{details()}}h1> 49 div> 50 51 <hr> 52 <div id="app1"> 53 <div v-html="message">div> 54 div> 55 56 <hr> 57 <div id="app2"> 58 <label for="r1">修改颜色label> 59 <input type="checkbox" v-model="use" id="r1"><br> 60 <div v-bind:class="{'class1':use}"> 61 v-bind:class改变颜色 62 div> 63 div> 64 65 <hr> 66 <div id="app3"> 67 {{5+5}}<br> 68 {{ok? 'Yes' : 'No'}}<br> 69 {{message.split('').reverse().join('')}} 70 <div v-bind:id="'list-'+id">百度一下div> 71 div> 72 73 <hr><h1>v-for循环语句h1> 74 <div id="app4"> 75 <ol> 76 <li v-for="site in sites"> 77 {{site.name}} 78 li> 79 ol> 80 <ul> 81 <template v-for="site in sites"> 82 <li>{{site.name}}li> 83 template> 84 ul> 85 <ul> 86 <li v-for="value,key,index in object"> 87 {{index}}:{{key}}---{{value}} 88 li> 89 <li v-for="n in 10">{{n}}li> 90 ul> 91 div> 92 93 <hr><h1>computed计算属性h1> 94 <div id="app5"> 95 <p>原始字符串：{{message}}p> 96 <p>计算后的反转字符串：{{reversedMessage}}p> 97 div> 98 99 <hr><h1>监听属性h1> 100 <div id="app6"> 101 <p style="font-size: 25px;">计数器：{{counter}}p> 102 <button @click="counter++" style="font-size: 25px;">点击计数button><br> 103 千米：<input type="text" v-model="kilometers"> 104 米：<input type="text" v-model="meters"> 105 <p id="info">p> 106 div> 107 108 <hr><h1>样式绑定h1> 109 <div id="app7"> 110 <div v-bind:style="styleObject">字体样式改变div> 111 <div v-bind:style="[styleObject, backStyle]">字体多种样式改变div> 112 div> 113 114 <hr><h1>事件处理器v-onh1> 115 <div id="app8"> 116 <button @click="counter+=1">增加1button> 117 <p>这个按钮被点击了{{counter}}次p> 118 <button @click="say('hi')">Say hibutton> 119 <button @click="say('what')">Say whatbutton> 120 div> 121 <hr><h1>表单，用 v-model 指令在表单控件元素上创建双向数据绑定h1> 122 123 124 <div id="app9"> 125 <input v-model="message" placeholder="编辑内容显示。。。"> 126 <textarea v-model="message1" placeholder="多行文本输入">textarea> 127 128 <p>单个复选框：p> 129 <input type="checkbox" id="checkbox" v-model="checked"> 130 <label for="checkbox">{{checked}}label> 131 <p>多个复选框：p> 132 <input type="checkbox" id="taobao1" value="taobao" v-model="checkedNames"> 133 <label for="taobao1">taobaolabel> 134 <input type="checkbox" id="google1" value="google" v-model="checkedNames"> 135 <label for="google1">googlelabel> 136 <input type="checkbox" id="facebook1" value="facebook" v-model="checkedNames"> 137 <label for="facebook1">facebooklabel> 138 <br> 139 <span>选择的值为：{{checkedNames}}span> 140 141 <p>单选框：p> 142 <input type="radio" id="facebook2" value="facebook" v-model="picked"> 143 <label for="facebook2">facebooklabel> 144 <br> 145 <input type="radio" id="google2" value="google" v-model="picked"> 146 <label for="google2">googlelabel> 147 <br> 148 <span>选择的值为：{{picked}}span> 149 150 <p>下拉列表--select 列表p> 151 <select v-model="selected" name="好像没用上"> 152 <option value="">选择一个网站option> 153 <option value="www.baidu.com">百度option> 154 <option value="www.taobao.com">淘宝option> 155 select> 156 <div id="output">选择的网站是：{{selected}}div> 157 158 div> 159 160 <hr><h1>组件Componenth1> 161 <div id="app10"> 162 <chunfang>chunfang> 163 <chunfang1>chunfang1> 164 <child message="Hello!">child> 165 div> 166 <div id="app11"> 167 <input v-model="parentMsg"><br> 168 <child2 v-bind:message2="parentMsg">child2> 169 div> 170 <hr><h1>组件Component--自定义事件h1> 171 <div id="app12"> 172 <div id="counter-event-example"> 173 <p>{{total}}p> 174 <button-counter v-on:increment="incrementTotal">button-counter> 175 <button-counter v-on:increment="incrementTotal">button-counter> 176 div> 177 div> 178 179 <hr><h1>自定义指令h1> 180 <div id="app13"> 181 <p>页面载入时，input元素自动获取焦点p> 182 <input v-focus> 183 div> 184 185 <script> 186 new Vue({ 187 el:'#app', 188 data:{ 189 message:'baidu!', 190 message1:'百度一下，输入框填入的', 191 seen:true, 192 ok:true, 193 url:'https://www.baidu.com', 194 type:'C' 195 }, 196 methods: { 197 reverseMessage:function () { 198 this.message1 = this.message1.split('').reverse().join('') 199 } 200 }, 201 filters:{ 202 capitalize:function (value) { 203 if(!value) return ''; 204 value = value.toString(); 205 return value.charAt(0).toUpperCase()+value.slice(1) 206 } 207 } 208 }); 209 210 var vm = new Vue({// Vue 构造器 211 el:'#vue_det',//el 参数，它是 DOM 元素中的 id 212 data:{//data 用于定义属性 213 site:"第一个正式的测试VUE", 214 url:"www.baidu.com", 215 alexa:"10000" 216 }, 217 methods:{//methods 用于定义的函数，可以通过 return 来返回函数值 218 details:function () { 219 return this.site + "-这是一个连接到百度的网址"; 220 } 221 } 222 }); 223 224 new Vue({ 225 el:'#app1', 226 data:{ 227 message: '百度一下
' 228 } 229 }); 230 231 new Vue({ 232 el:'#app2', 233 data:{ 234 use:false//判断 use 的值，如果为 true 使用 class1 类的样式，否则不使用该类 235 } 236 }); 237 238 new Vue({ 239 el:'#app3', 240 data:{ 241 ok:true, 242 message:'baidu', 243 id:1 244 } 245 }); 246 247 new Vue({ 248 el:'#app4', 249 data:{ 250 sites:[ 251 {name:'baidu'}, 252 {name:'360'}, 253 {name:'雅虎'}, 254 ], 255 object:{ 256 name:'百度一下', 257 url: 'http://www.baidu.com', 258 slogan:'世界因我而改变！', 259 }, 260 }, 261 }); 262 263 var vm = new Vue({ 264 el:'#app5', 265 data:{message:'反转字符串'}, 266 computed:{ 267 reversedMessage:function () {//声明了一个计算属性 reversedMessage 268 return this.message.split('').reverse().join('')////this指向 vm 实例 269 } 270 }, 271 }); 272 273 var vm = new Vue({//实例进行千米与米之间的换算 274 el:'#app6', 275 data:{ 276 counter:1, 277 kilometers:0, 278 meters:0, 279 }, 280 methods:{}, 281 watch:{ 282 kilometers: function (val) { 283 this.kilometers = val; 284 this.meters =this.kilometers *1000; 285 }, 286 meters:function (val) { 287 this.kilometers = val/1000; 288 this.meters = val; 289 }, 290 }, 291 }); 292 vm.$watch('kilometers',function (newValue,oldValue) {//通过 watch 来响应数据的变化 293 document.getElementById("info").innerHTML ="修改前的值为："+oldValue+"，修改后的值为："+newValue; 294 }); 295 296 new Vue({ 297 el:'#app7', 298 data:{ 299 styleObject:{ 300 color:'green', 301 fontSize:'30px', 302 width:'500px', 303 }, 304 backStyle:{ 305 background:'red', 306 'font-weight':'bold', 307 }, 308 309 }, 310 }); 311 312 new Vue({ 313 el:'#app8', 314 data:{counter: 0}, 315 methods:{//直接绑定到一个方法 316 say:function (message) { 317 alert(message); 318 } 319 }, 320 }); 321 322 new Vue({ 323 el:'#app9', 324 data:{ 325 message:'xian显示在框中', 326 message1:'多行文本显示框中\r\n并换行', 327 checked:false, 328 checkedNames:[], 329 picked:'facebook', 330 selected:'', 331 }, 332 }); 333 334 Vue.component('chunfang',{//// 注册 335 template:'自定义的全局组件
' 336 }); 337 new Vue({//// 创建根实例 338 el:'#app10', 339 }); 340 341 var Child={template: '这是自定义的局部组件
'}; 342 new Vue({//// 创建根实例 343 el:'#app10', 344 components:{////将只在父模板可用 345 'chunfang1':Child, 346 }, 347 }); 348 349 Vue.component('child',{// 注册 350 props:['message'],// 声明 props 351 template:'{{message}}',// 同样也可以在 vm 实例中像 “this.message” 这样使用 352 }); 353 new Vue({// 创建根实例 354 el:'#app10', 355 }); 356 357 Vue.component('child2',{// 注册 358 props:['message2'],// 声明 props、、动态 Prop 359 template:'{{message2}}',// 同样也可以在 vm 实例中像 “this.message” 这样使用 360 }); 361 new Vue({// 创建根实例 362 el:'#app11', 363 data:{ 364 parentMsg:'父组件的内容' 365 }, 366 }); 367 368 Vue.component('button-counter',{ 369 template:'', 370 data:function () {//// data 选项是一个函数，组件不相互影响 371 return {counter:0} 372 }, 373 methods:{ 374 incrementHandler:function () { 375 this.counter+=1; 376 this.$emit('increment');//使用 $emit(eventName) 触发事件 377 }, 378 }, 379 }); 380 new Vue({ 381 el:'#app12', 382 data:{total:0}, 383 methods:{ 384 incrementTotal:function () { 385 this.total +=1; 386 }, 387 }, 388 }); 389 390 Vue.directive('focus',{// 注册一个全局自定义指令 v-focus 391 inserted:function (el) {// 当绑定元素插入到 DOM 中。 392 el.focus();// 聚焦元素 393 }, 394 }); 395 new Vue({// 创建根实例 396 el:'#app13', 397 }); 398 399 script> 400 401 body> 402 html>
Original: https://www.cnblogs.com/chunfang/p/13503339.html
Author: 白月如初12138
Title: Vue_基础功能循环、计算、绑定、事件处理、组件
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/596513/
转载文章受原作者版权保护。转载请注明原作者出处！