第五个Demo 双向绑定事件
<div id="index5"> 请输入文本的信息:<input type="text" v-model="message" value="Hello Vue">{{message}} </div>
var vm = new Vue({ el: "#index5", data: { message: "" } })
<!-- * @Author: error: git config user.name && git config user.email & please set dead value or install git * @Date: 2022-11-06 13:35:51 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git * @LastEditTime: 2022-11-06 20:43:46 * @FilePath: \com.Html\Com.Vue\了解Vue\html\index5.html * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AEbi --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <style> div { width: 100%; background-color: rgb(248, 254, 254); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 30px; } #app { background-color: lightblue; height: 40px; line-height: 40px; color: red; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 20px; } .fist { background-color: bisque; color: red; height: 40px; line-height: 40px; } </style> <!-- 外连接--> <style src="./index.css"></style> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 表单的两个方向的绑定 --> <div id="index5"> 请输入文本的信息:<input type="text" v-model="message" value="Hello Vue">{{message}} </div> <div id="index51"> 多行文本的信息:<textarea v-model="pan"></textarea> {{pan}} </div> <!-- 单选框 --> <div id="index52"> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{checked}}</label> </div> <!-- 下拉单 --> 下拉单: <select name="" id=""> <option value="" disabled>______________请选择信息_________________</option> <option value="">ABCAA</option> <option value="">ABCAB</option> <option value="">ABCAC</option> <option value="">ABCAD</option> <option value="">ABCAE</option> <option value="">ABCAF</option> <option value="">ABCAG</option> <option value="">ABCAH</option> <option value="">ABCAI</option> <span>value{{pan}}</span> </select> <script> var vm = new Vue({ el: "#index5", data: { message: "" } }) var vm1 = new Vue({ el: "#index51", data: { pan: "" } }) </script> <script type="text/javascript"> var vm = new Vue({ el: "#index52", data: { checked: false } }); </script> <!-- 多选框 --> <div id="index53"> 多复选框: <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">JavaScript</label> <input type="checkbox" id="join" value="Join" v-model="checkedNames"> <label for="join">Java</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">MySql</label> <input type="checkbox" id="mikes" value="mikes" v-model="checkedNames"> <label for="mike">Spring SpringMvc MyBatis</label> <input type="checkbox" id="mike2" value="Mike2" v-model="checkedNames"> <label for="mike">SprngBoot</label> <input type="checkbox" id="mike3" value="Mike3" v-model="checkedNames"> <label for="mike">HTML CSS JavaScript</label> <input type="checkbox" id="mike4" value="Mike4" v-model="checkedNames"> <label for="mike">JSP</label> <input type="checkbox" id="mike5" value="Mike5" v-model="checkedNames"> <label for="mike">Servlect</label> <span>选中的值:{{checkedNames}}</span> </div> <script type="text/javascript"> var vm = new Vue({ el: "#index53", data: { checkedNames: [] } }); </script> <script> var vm = new Vue({ el: "#index53", data: { pan: "A" } }) </script> </body> </html>
第六个Demo
组件是可复用的Vue实例,说白了就是一组可以重复使用的模板,跟JSTL的自定义标签、Thymeleaf的th:fragment 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织
<!-- * @Author: error: git config user.name && git config user.email & please set dead value or install git * @Date: 2022-11-06 14:56:25 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git * @LastEditTime: 2022-11-06 20:43:50 * @FilePath: \com.Html\Com.Vue\了解Vue\html\index6.html * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> div { width: 100%; background-color: rgb(248, 254, 254); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 30px; } #app { background-color: lightblue; height: 40px; line-height: 40px; color: red; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 20px; } .fist { background-color: bisque; color: red; height: 40px; line-height: 40px; } </style> <body> <h3> 组件是可复用的Vue实例,说白了就是一组可以重复使用的模板,跟JSTL的自定义标签、Thymeleaf的th:fragment 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织:</h3> <!--view层 模板--> <div id="app"> <my v-for="item in items" v-bind:s="item"></my> </div> </body> <!-- 外连接--> <style src="./index.css"></style> <!--导入js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script> Vue.component("my", { props: ['s'], template: '<li>{{s}}</li>' }) var vm = new Vue({ el: "#app", data: { items: ['Java', 'Python', 'Php', "Mysql", "我是数据信息"] } }) </script> </body> </html>
标题
第七个Demo axios 跟Ajax和JSON数据差不多 这个功能是和后端数据打交道的
{ "name": "weg", "age": "18", "sex": "男", "url":"https://www.baidu.com", "address": { "street": "文苑路", "city": "南京", "country": "中国" }, "links": [ { "name": "bilibili", "url": "https://www.bilibili.com" }, { "name": "baidu", "url": "https://www.baidu.com" }, { "name": "cqh video", "url": "https://www.4399.com" } ] }
<!-- * @Author: error: git config user.name && git config user.email & please set dead value or install git * @Date: 2022-11-06 15:44:33 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git * @LastEditTime: 2022-11-06 20:43:55 * @FilePath: \com.Html\Com.Vue\了解Vue\html\index7.html * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--view层 模板--> <div id="vue"> <div>{{info.name}}</div> <a v-bind:href="info.url">点我进入</a> </div> </body> <style> div { width: 100%; background-color: rgb(248, 254, 254); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 30px; } #app { background-color: lightblue; height: 40px; line-height: 40px; color: red; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 20px; } .fist { background-color: bisque; color: red; height: 40px; line-height: 40px; } </style> <!-- 外连接--> <style src="./index.css"></style> <!--1.导入vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <!--导入axios--> <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:vm的属性 //data():vm方法 data() { return { //请求的返回参数,必须和json字符串一样 info: { name: null, age: null, sex: null, url: null, address: { street: null, city: null, country: null } } } }, //钩子函数,链式编程,ES6新特性 mounted() { axios.get("index.json").then(res => (this.info = res.data)) } }) </script> </html>
第八个Demo
计算属性:methods,computed 方法名不能重名,重名字后,只会调用methods的方法
<!--view层 模板--> <div id="app"> <div>currentTime1: {{currentTime1()}}</div> <div>currentTime2: {{currentTime2}}</div> </div> </body> <!-- 外连接--> <style src="./index.css"></style> <!--导入js--> <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: { //计算属性:methods,computed 方法名不能重名,重名字后,只会调用methods的方法 currentTime2: function () { this.message; // 返回一个时间戳 return Date.now(); } } }) </script>
第九个Demo slot 插槽 这个组件要定义在前面不然出不来数据
<!-- * @Author: error: git config user.name && git config user.email & please set dead value or install git * @Date: 2022-11-06 16:19:10 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git * @LastEditTime: 2022-11-06 20:44:09 * @FilePath: \com.Html\Com.Vue\了解Vue\html\index9.html * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <style> div { width: 100%; background-color: rgb(248, 254, 254); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 30px; } #app { background-color: lightblue; height: 40px; line-height: 40px; color: red; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 20px; } .fist { background-color: bisque; color: red; height: 40px; line-height: 40px; } </style> <!-- 外连接--> <style src="./index.css"></style> <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> <!--1.导入vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <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: ['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>
第十个Demo 自定义事件
<!-- * @Author: error: git config user.name && git config user.email & please set dead value or install git * @Date: 2022-11-06 16:48:16 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git * @LastEditTime: 2022-11-06 20:44:16 * @FilePath: \com.Html\Com.Vue\了解Vue\html\index10.html * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>P12-自定义事件内容分发</title> </head> <body> <style> div { width: 100%; background-color: rgb(248, 254, 254); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 30px; } #app { background-color: lightblue; height: 40px; line-height: 40px; color: red; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 20px; } .fist { background-color: bisque; color: red; height: 40px; line-height: 40px; } </style> <!-- 外连接--> <style src="./index.css"></style> <div id="app"> <todo> <todo-title slot="todo-title" :title="myTitle"></todo-title> <todo-items slot="todo-items" v-for="(it,id) in todoItems" :item="it" v-bind:index="id" v-on:myremove="removeItems(id)" :key="id"></todo-items> </todo> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.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: ["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) { // alert("111"); this.$emit("myremove", index); //自定义事件分发 } } } ); var vm = new Vue({ el: "#app", data: { myTitle: "yubaby的列表", todoItems: ["yppah学java", "yppah学linux", "yppah学vue","Mysql","javaScript"] }, methods: { removeItems: function (index) { console.log("删除了:" + this.todoItems[index]); this.todoItems.splice(index, 1);//一次删除一个元素 } } }); </script> </body> </html>