<!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: #eee; } </style> </head> <body> <div id="app"> <p>{{ message }}</p> <!-- 使用v-html指令生成html代码--> <div v-html="code"></div> <!-- 使用v-bind指令生成html代码 结合v-model使用 v-bind响应式更新html--> <label for="r1">修改颜色</label> <input type="checkbox" v-model="changeColor" id="r1"/> <br><br> <div v-bind:class="{'changeColor':changeColor}"> 颜色已经改变... ... v-bind:class </div> <br><br> <!-- 表达式 在html中可以直接写表达式 --> {{ 5+5 }} <br> {{ ok ? 'YES' : 'NO' }} <br> {{ dataval.split('').reverse().join('') }} <div v-bind:id="'list-'+id">菜鸟教程</div> <br><br> <!-- 使用v-前缀指令 v-if 设置元素是否插入到dom中 --> <p v-if="pFlag">Now , you can see me</p> <template v-if="descFlag"> <h1> This is the first line</h1> <p> This is the second line</p> <p> We learn for dream , instead of money</p> </template> <br><br> <!-- 使用v-bind指令 响应更新html --> <a v-bind:href="url">点击链接</a> <br><br> <!-- 使用v-on指令 监听dom事件--> <!--<button v-on:click="clickBtn">按钮</button>--> <!-- 指令缩写形式 --> <button @click="clickBtn">按钮</button> <br><br> <!-- 使用v-model 实现双向数据绑定 个人理解：为dom元素初始化赋值，当改变dom元素的input值时，与之关联的元素也会更新--> <template> <input type="text" v-model="inputval"/> <p>反转字符串：{{ reverseInputval }}</p> </template> <br><br> <!-- 管道 --> {{ dataReal | capitalize }} <br><br> <!-- 条件判断语句 v-if --> <template> <div v-if="type === 'A'"> Yeah , now you can see the A situation </div> <div v-else-if="type === 'B'"> And now you can see the B situation </div> <div v-else-if="type === 'C'"> situation : C </div> <div v-else="type === D"> all right Not in A/B/C </div> </template> <br><br> <!-- 使用v-show指令 注意：v-show 不支持templete语法 --> <div v-show="test"> obviously , it's about showing or not </div> <br><br> <!-- 使用v-for指令循环array --> <template> <p>Here are some new thchnologies that you didn't konw before</p> <ol> <li v-for="data in list"> {{ data.name }} <small>{{ data.author }}</small> </li> </ol> </template> <br><br> <!-- 使用v-for 循环 object 需要注意：循环键值对第一个表示value 第二个表示key 是反序的--> <template> <h3>Use v-for command for ergodic object</h3> <ul> <li v-for="(value,key,index) in obj"> {{index+1}} ： {{ key }} ：{{ value }} </li> </ul> </template> <br><br> <!-- computed set & get--> <p>{{ aUrl }}</p> </div> <script> var vm = new Vue({ el: '#app', <!-- 数据展现&处理--> data: { message: 'Hello Vue.js!', code:'<h1>This is my first page!</h1>', changeColor:false, ok:false, dataval:'数据展现... ...', id:1, pFlag:true, descFlag:false, url:'www.baidu.com', // clickBtn:function () { // console.log("you click me , so i'll response for you "); // }, inputval:"show the inital value", dataReal:'filter test ... ...', type:'D', test:true, list:[ {name:'storm',author:'royarn1'}, {name:'spark',author:'royarn2'}, {name:'kafka',author:'royarn3'} ], obj:{ name:'royarn', sex:'男', blog:'http://write.blog.csdn.net/postlist' } }, <!-- 过滤器 --> filters:{ capitalize:function (value) { if(!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } }, <!-- 事件处理--> methods:{ clickBtn:function () { console.log("you click me , so i'll response for you "); } }, <!-- 计算属性--> <!--computed vs methods 使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，--> <!--只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。--> <!--使用 computed 性能会更好，但是如果不希望缓存，使用 methods 属性--> computed:{ <!--计算属性的getter--> reverseInputval:function () { return this.inputval.split('').reverse().join(''); }, aUrl:{ <!-- get --> get:function () { return this.name + '，' +this.urlreal; }, <!-- set --> set:function (obj) { var names = obj.split("："); this.name = names[0]; this.urlreal = names[names.length-1]; } } } }); vm.aUrl = "网址：www.baidu.com"; console.log(vm); document.write("网站：" + vm.name); document.write("<br><br>"); document.write("地址：" + vm.urlreal); </script> </body> </html>
Vue入门篇_1
猜你喜欢
转载自blog.csdn.net/lzqworkonline/article/details/73732329
今日推荐
周排行