VUE.JS / 官方文档 / 介绍部分的练习
以下代码为阅读【VUE.JS】官方文档的【介绍】章节的笔记练习；
具体如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 |
< !DOCTYPE html> <html> <head> <title>My first Vue app</title> <!-- 通过UNPKG获得VUE的引用 --> <!-- <script src="https://unpkg.com/vue"> --> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> --> <!-- 生产环境版本，优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <!-- 声明式渲染 --> <hr /> <h3>声明式渲染</h3> <hr /> <div id="app-1"> {{ message }} </div> <script> var app1 = new Vue({ el: '#app-1', data: { message: 'Hello Adamhuan! - [This is Vue.JS]' } }) </script> <!-- 声明式渲染 / 绑定元素 --> <hr /> <h3>声明式渲染 / 绑定元素</h3> <hr /> <div id="app-2"> <span v-bind:title="message"> 鼠标停留几秒钟，将会看到这里的绑定变量。 </span> </div> <script> var app2 = new Vue( { el: '#app-2', data: { message: '当前时间：【' + new Date().toLocaleString() + '】' } } ) </script> <!-- 条件与循环 --> <hr /> <h3>条件与循环 / 1</h3> <hr /> <div id="app-3"> <p v-if="seen">You can see me now.</p> </div> <script> var app3 = new Vue({ el: '#app-3', data: { seen: true } }) </script> <hr /> <h3>条件与循环 / 2</h3> <hr /> <div id="app-4"> <ol> <li v-for="li_item in li_list"> {{ li_item.text }} </li> </ol> </div> <script> var app4 = new Vue({ el: '#app-4', data: { li_list: [ {text: '百度云'}, {text: 'AWS'}, {text: 'Azure'}, {text: '阿里云'}, {text: '腾讯云'} ] } }) </script> <!-- 处理用户输入 --> <hr /> <h3>处理用户输入 / 1</h3> <hr /> <div id="app-5"> <p>内容为：{{ the_data }}</p> <button v-on:click="reverseMessage">【翻转数据】</button> </div> <script> var app5 = new Vue({ el: '#app-5', data: { the_data: "这些数据将会被翻转" }, methods: { reverseMessage: function () { this.the_data = this.the_data.split('').reverse().join('') } } }) </script> <hr /> <h3>处理用户输入 / 2</h3> <hr /> <div id="app-6"> <input v-model="message_data"/> <p> {{ message_data }} </p> </div> <script> var app6 = new Vue({ el: '#app-6', data: { message_data: "你需要输入的内容" } }) </script> <hr /> <h3>组件化应用构建</h3> <hr /> <div id="app-7"> <ol> <todo -item v-for="item in TheList" v-bind:todo="item" v-bind:key="item.id" ></todo> </ol> </div> <script> //注册一个VUE的组件 // 1 Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) //使用VUE的组件 var app7 = new Vue({ el: '#app-7', data: { TheList: [ { id: 0, text: '苹果' }, { id: 1, text: '橘子' }, { id: 2, text: '香蕉' }, { id: 3, text: '西瓜' } ] } }) </script> </html> |
