渲染的范围
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Title</title> |
| </head> |
| <body> |
| <p>狂神说Java</p> |
| |
| |
| <div id="app"> |
| <span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息!</span> |
| </div> |
| <p>狂神说Java</p> |
| |
| <p>狂神说Java</p> |
| <div id="app1"> |
| <span v-bind:title="message1">hello</span> |
| </div> |
| <p>狂神说Java</p> |
| <div id="app2"> |
| {{message2}} |
| </div> |
| |
| </body> |
| |
| |
| <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> |
| <script> |
| var vm = new Vue({ |
| el: "#app", |
| data: { |
| message: "hello,vue" |
| }, |
| el: "#app1", |
| data: { |
| message1: "hello" |
| }, |
| el: "#app2", |
| data: { |
| message2: "hello123" |
| } |
| }) |
| </script> |
| </html> |
| |
| |
| |
| |

| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Title</title> |
| </head> |
| <body> |
| <p>狂神说Java</p> |
| |
| |
| <div id="app"> |
| <h1 v-if="type==='A'">A</h1> |
| <h1 v-else-if="type==='B'">B</h1> |
| <h1 v-else>C</h1> |
| </div> |
| </body> |
| |
| |
| <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> |
| <script> |
| var vm = new Vue({ |
| el: "#app", |
| data: { |
| type: "A" |
| } |
| }) |
| </script> |
| </html> |
| |

3-v-for
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Title</title> |
| </head> |
| <body> |
| <p>狂神说Java</p> |
| |
| |
| <div id="app"> |
| <li v-for="item in items"> |
| 姓名:{{item.name}},年龄:{{item.age}} |
| </li> |
| </div> |
| </body> |
| |
| |
| <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> |
| <script> |
| var vm = new Vue({ |
| el: "#app", |
| data: { |
| items: [ |
| {name: "zhangsan", age: 12}, |
| {name: "lisi", age: 10}, |
| {name: "wangwu", age: 16} |
| ] |
| } |
| }) |
| </script> |
| </html> |
| |
| |

4-clink
| |
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Title</title> |
| </head> |
| <body> |
| <p>狂神说Java</p> |
| |
| |
| <div id="app"> |
| <button v-on:click="sayDog">Click Me</button> |
| <button v-on:click="sayHi">Click Me</button> |
| </div> |
| </body> |
| |
| |
| <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> |
| <script> |
| var vm = new Vue({ |
| el: "#app", |
| data: { |
| message: "你点我干嘛?", |
| dog:"别狗叫" |
| }, |
| methods: { |
| |
| sayHi: (function (event) { |
| alert(this.message) |
| }), |
| sayDog: (function (event) { |
| alert(this.dog) |
| }), |
| } |
| }) |
| </script> |
| </html> |
| |
| |
| |


5-message
| |
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Title</title> |
| </head> |
| <body> |
| <p>狂神说Java</p> |
| |
| |
| <div id="app"> |
| <input type="text" v-model="message">{{message}} |
| </div> |
| </body> |
| |
| |
| <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> |
| <script> |
| var vm = new Vue({ |
| el: "#app", |
| data: { |
| message: "你点我干嘛?" |
| }, |
| |
| }) |
| </script> |
| </html> |

| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Title</title> |
| </head> |
| <body> |
| <p>狂神说Java132</p> |
| |
| |
| <div id="app"> |
| <input type="radio" name="sex" value="男" v-model="qinjiang"> 男 |
| |
| <input type="radio" name="sex" value="女" v-model="qinjiang"> 女 |
| |
| <h1>{{qinjiang}}</h1> |
| </div> |
| </body> |
| |
| |
| <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> |
| <script> |
| var vm = new Vue({ |
| el: "#app", |
| data: { |
| qinjiang: '' |
| }, |
| |
| }) |
| </script> |
| </html> |

6-select
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Title</title> |
| </head> |
| <body> |
| |
| |
| <div id="app"> |
| 下拉框: |
| <select v-model="selected"> |
| <option value="" disabled>-请选择-</option> |
| <option>A</option> |
| <option>B</option> |
| <option>C</option> |
| </select> |
| <p>value:{{selected}}</p> |
| </div> |
| </body> |
| |
| |
| <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> |
| <script> |
| var vm = new Vue({ |
| el: "#app", |
| data: { |
| selected: "A" |
| } |
| }) |
| </script> |
| </html> |
| |
| |
| |

7-v-for
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Title</title> |
| </head> |
| <body> |
| |
| |
| <div id="app"> |
| <qinjiang v-for="item in items" v-bind:qin="item"></qinjiang> |
| </div> |
| </body> |
| |
| |
| <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> |
| <script> |
| Vue.component("qinjiang",{ |
| props: ['qin'], |
| template: '<li>{{qin}}</li>' |
| }) |
| |
| var vm = new Vue({ |
| el: "#app", |
| data: { |
| items: ['Java','Python','Php',"C++"] |
| } |
| }) |
| </script> |
| </html> |
| |
| |

7-zujian
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Title</title> |
| </head> |
| <body> |
| <p>狂神说Java</p> |
| |
| |
| <div id="app"> |
| <ikun></ikun> |
| <li>hello</li> |
| </div> |
| |
| </body> |
| |
| |
| <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> |
| <script> |
| Vue.component("ikun",{ |
| template:'<li>hello</li>' |
| |
| |
| }); |
| var vm = new Vue({ |
| el: "#app" |
| }) |
| </script> |
| </html> |
| |
| |
| |
| |

8-v-bind
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Title</title> |
| </head> |
| <body> |
| |
| <div id="vue"> |
| <div>{{info.name}}</div> |
| <a v-bind:href="info.url">点我进入</a> |
| </div> |
| </body> |
| |
| |
| <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> |
| |
| <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script> |
| <script> |
| |
| var vm = new Vue({ |
| el: "#vue", |
| data: { |
| items: ['Java','Python','Php'] |
| }, |
| |
| |
| data(){ |
| return{ |
| |
| info:{ |
| name: null, |
| age: null, |
| sex: null, |
| url: "./data.json", |
| address: { |
| street: null, |
| city: null, |
| country: null |
| } |
| } |
| } |
| }, |
| |
| mounted(){ |
| axios.get("./data.json").then(res => (this.info=res.data)) |
| } |
| }) |
| </script> |
| </html> |

9-template-bind
| |
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Title</title> |
| </head> |
| <body> |
| |
| |
| <div id="app"> |
| |
| <qinjiang v-for="item in items" v-bind:ikun="item"></qinjiang> |
| </div> |
| </body> |
| |
| |
| <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> |
| <script> |
| Vue.component("qinjiang",{ |
| props: ['ikun'], |
| template: '<li>{{ikun}}</li>' |
| }) |
| |
| var vm = new Vue({ |
| el: "#app", |
| data: { |
| items: ['Java','Python','Php'] |
| } |
| }) |
| </script> |
| </html> |
| |
| |

10-axios
| |
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Title</title> |
| </head> |
| <body> |
| |
| |
| <div id="app"> |
| <div>currentTime1: {{currentTime1()}}</div> |
| --> |
| |
| <div>currentTime2: {{currentTime2}}</div> |
| </div> |
| </body> |
| |
| |
| <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> |
| <script> |
| var vm = new Vue({ |
| el: "#app", |
| data: { |
| message: "hello,world!" |
| }, |
| methods: { |
| currentTime1: function () { |
| return Date.now(); |
| } |
| }, |
| computed: { |
| |
| currentTime2: function () { |
| this.message; |
| |
| return Date.now(); |
| } |
| } |
| }) |
| </script> |
| </html> |
| |

12-compoent
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| </head> |
| <body> |
| <div id="app"> |
| <todo> |
| <todo-title slot="todo-title" v-bind:name="title"></todo-title> |
| <todo-items slot="todo-items" v-for="item in todoItems" v-bind:item="item"></todo-items> |
| </todo> |
| </div> |
| |
| |
| <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> |
| <script> |
| |
| Vue.component("todo", { |
| template: '<div>\ |
| <slot name="todo-title"></slot>\ |
| <ul>\ |
| <slot name="todo-items"></slot>\ |
| </ul>\ |
| <div>' |
| }); |
| Vue.component("todo-title", { |
| |
| props: ['name'], |
| template: '<div>{{name}}</div>' |
| }); |
| Vue.component("todo-items", { |
| props: ['item'], |
| template: '<li>{{item}}</li>' |
| }); |
| let vm = new Vue({ |
| el: "#app", |
| data: { |
| |
| title: "图书馆系列图书", |
| |
| todoItems: ['三国演义', '红楼梦', '西游记', '水浒传'] |
| } |
| }); |
| </script> |
| </body> |
| </html> |
| |
| |

| { |
| "name":"狂神说java", |
| "url": "http://baidu.com", |
| "page": "1", |
| "isNonProfit":"true", |
| "address": { |
| "street": "含光门", |
| "city":"陕西西安", |
| "country": "中国" |
| }, |
| "links": [ |
| { |
| "name": "B站", |
| "url": "https://www.bilibili.com/" |
| }, |
| { |
| "name": "4399", |
| "url": "https://www.4399.com/" |
| }, |
| { |
| "name": "百度", |
| "url": "https://www.baidu.com/" |
| } |
| ] |
| } |
| |
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· RFID实践——.NET IoT程序读取高频RFID卡/标签