标签 node.js 下的文章 - 蘇阿細

登录

标签搜索

蘇阿細

累计撰写 389 篇文章
累计收到 4 条评论

搜索到 1 篇与的结果

2020-12-22
Vue基础语法 Vue基础语法1、Vue模板<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue模板</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body>  <div id="app"> </div> <script> var vm = new Vue({ el: '#app', //model：数据 data: { } }); </script> </body> </html>2、else if<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>else if</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body>  <div id="app"> <h1 v-if="type==='A'">A</h1> <h1 v-else-if="type==='B'">B</h1> <h1 v-else>C</h1> </div> <script> var vm = new Vue({ el: '#app', //model：数据 data: { type: 'A' } }); </script> </body> </html>2、for循环<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>for循环</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body>  <div id="app"> <li v-for="(item,index) in items"> {{item.message}}--{{index}} </li> </div> <script> var vm = new Vue({ el: '#app', //model：数据 data: { items:[ {message: '孙笑川'}, {message: '刘波'}, {message: 'Giao哥'} ] } }); </script> </body> </html>4、事件绑定<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>事件绑定</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body>  <div id="app"> <button v-on:click="sayHello">点我</button> </div> <script> var vm = new Vue({ el: '#app', //model：数据 data: { message: "Hello World" }, methods:{ //方法必须定义在Vue的methods对象中,v-on:事件 sayHello: function () { alert(this.message); } } }); </script> </body> </html>5、双向绑定<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>双向绑定</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body>  <div id="app"> 用户名：<input type="text" v-model="msg"> {{msg}} <br> 文本框：<textarea name="text" id="" cols="30" rows="10" v-model="msg1"></textarea>{{msg1}} <br> 性别： <input type="radio" name="sex" value="男" v-model="msg2"> 男 <input type="radio" name="sex" value="女" v-model="msg2"> 女 <span>选中的性别为：{{msg2}}</span> <br> 选择城市： <select v-model="msg3"> <option value="" disabled>--请选择--</option> <option >北京</option> <option>上海</option> <option>广州</option> </select> <span>{{msg3}}</span> </div> <script> var vm = new Vue({ el: '#app', data: { msg: "", msg1: "", msg2: "", msg3: "" } }); </script> </body> </html>6、组件<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body>  <div id="app">   <test v-for="item in items" v-bind:test01="item"></test> </div> <script> //定义一个Vue组件component Vue.component("test",{ props: ['test01'], //接收参数 template: '<li>{{test01}}</li>' //模板 } ); var vm = new Vue({ el: '#app', data: { items: ["孙笑川","刘波","Giao哥"] } }); </script> </body> </html>7、vue-axios<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>vue-axios</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script>  <style> [v-clock]{ display: none; } </style> </head> <body>  <div id="app" v-clock> <div>{{info.name}}</div> <a v-bind:href="info.url">{{info.url}}</a> <div>{{info.page}}</div> <div>{{info.isNonProfit}}</div> <div>{{info.address.street}}</div> <div>{{info.address.city}}</div> <div>{{info.address.country}}</div> </div> <script> var vm = new Vue({ el: '#app', data(){ return{ //请求的返回参数格式必须和json字符串一样 info:{ name: null, url: null, page: null, isNonProfit: null, address:{ street: null, city: null, country: null }, links:[ { name: null, url: null }, { name: null, url: null }, { name: null, url: null }, ] } } }, mounted(){ //钩子函数链式编程 axios.get('../data.json').then(response=>(this.info=response.data)); } }); </script> </body> </html>8、计算属性<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算属性</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body>  <div id="app"> <p>currentTime1:{{currentTime1()}}</p> <p>currentTime2:{{currentTime2}}</p> </div> <script> var vm = new Vue({ el: '#app', //model：数据 data: { msg: "Hello" }, methods: { currentTime1: function () { return Date.now(); //返回一个时间戳 } }, computed: { //计算属性，与mothods的方法名不能重名，如果重名，只会调用methods的方法 currentTime2: function () { this.msg; //类似于Mybatis缓存，一旦涉及到增删改，虚拟DOM重新计算 return Date.now(); //虚拟DOM } } }); </script> </body> </html>9、插槽slot<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>slot插槽</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body>  <div id="app"> <todo> <todo-title slot="todo-title" v-bind:title="title"></todo-title> <todo-items slot="todo-items" v-for="item in todoItems" v-bind:item="item"></todo-items> </todo> </div> <script> //slot插槽 Vue.component("todo",{ template: '<div>' + '<slot name="todo-title"></slot>'+ '<ul>' + '<slot name="todo-items"></slot>'+ '</ul>'+ '</div>' }); Vue.component("todo-title",{ props: ['title'], template: '<div>{{title}}</div>' }); Vue.component("todo-items",{ props: ['item'], template: '<li>{{item}}</li>' }); var vm = new Vue({ el: '#app', data: { title: "科目", todoItems: ["Java","PHP","Vue"] } }); </script> </body> </html>10、自定义事件内容分发<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义事件内容分发</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body>  <div id="app"> <todo> <todo-title slot="todo-title" v-bind:title="title"></todo-title> <todo-items slot="todo-items" v-for="(item,index) in todoItems" v-bind:item="item" v-bind:index="index" v-on:remove="removeItems(index)"></todo-items> </todo> </div> <script> //slot插槽 Vue.component("todo",{ template: '<div>' + '<slot name="todo-title"></slot>'+ '<ul>' + '<slot name="todo-items"></slot>'+ '</ul>'+ '</div>' }); Vue.component("todo-title",{ props: ['title'], template: '<div>{{title}}</div>' }); Vue.component("todo-items",{ props: ['item','index'], //只能绑定当前组件的方法 template: '<li>{{index}}--{{item}} <button @click="remove">删除</button></li>', methods: { remove: function (index) { //自定义事件分发 this.$emit('remove',index); } } }); var vm = new Vue({ el: '#app', data: { title: "科目", todoItems: ["Java","PHP","Vue"] }, methods: { removeItems: function (index) { console.log("删除"+this.todoItems[index]+"成功！"); this.todoItems.splice(index,1); //一次删除一个元素 } } }); </script> </body> </html>
- 2020年12月22日
- 66 阅读
- 0 评论
- 0 点赞

蘇阿細

389 文章数

4 评论量

标签

舔狗日记