目录
Vue中的过滤器
<!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>Vue的数据模型</title> <script src="../js/vue.js"></script> </head> <body> <!-- 容器 --> <div id="app"> {{msg}}---{{msg|parseUpper}} <hr /> hhhhhjjjjjj </div> <script> /* //全局注册过滤器 Vue.filter("parseUpper", (data) => { return data.toUpperCase(); }); */ // 整个页面只能有一个Vue实例对象 let vm = new Vue({ el: "#app", //局部注册过滤器 过滤器名称是函数名 filters: { parseUpper(data) { return data.toUpperCase(); }, }, data: { msg: "hello", }, methods: {}, }); </script> </body> </html>
Vue中的插件
<!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>Vue的数据模型</title> <script src="../js/vue.js"></script> </head> <body> <!-- 容器 --> <div id="app">{{msg}}----{{msg|myFilter}}</div> <script> let myPlugin = { //istall方法在执行Vue.use(myPlugin) 会被调用 install(Vue, options) { //提供一些静态属性或者方法 Vue.isVue = function () { console.log("isVue"); }; //原型上绑定属性或者方法 Vue.prototype.$sayVue = () => { console.log("isSayVue"); }; //全局注册(组件,过滤器,指令,混入) Vue.filter("myFilter", (data) => { return data.toUpperCase(); }); }, }; Vue.use(myPlugin); console.log(Vue.isVue()); // 整个页面只能有一个Vue实例对象 let vm = new Vue({ el: "#app", data: { msg: "hello", }, methods: {}, }); console.log(vm.$sayVue()); </script> </body> </html>
Vue中的函数渲染
<!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>Vue的数据模型</title> <script src="../js/vue.js"></script> </head> <body> <!-- 容器 --> <div id="app"> {{msg}} <button @click="level++">按钮</button> <my-a :level="level"> <template #header>hello </template> </my-a> </div> <script> let myA = { props: { level: { type: Number, required: true, }, }, /* template: ` <div> <h1 v-if="level==1"> <slot></slot> </h1> <h1 v-if="level==2"> <slot></slot> </h1> <h1 v-if="level==3"> <slot></slot> </h1> </div> `, */ render(createElement) { //createdElement()创建出vNode 虚拟节点 // return createElement("h" + this.level, {}, "组件hello123"); //this.slots.header 指定名字插槽 return createElement( "h" + this.level, { /* attrs: { id: "one", title: "你好", }, style: { color: "red", }, class: { box: true, box1: flase, }, */ }, this.$slots.header ); }, /* //jsx javascript扩展语法 render() { return ( <div> hello <h1>1111</h1> </div> ); }, */ }; Vue.component("my-a", myA); // 整个页面只能有一个Vue实例对象 let vm = new Vue({ el: "#app", data: { msg: "hello", level: 1, }, computed: {}, methods: {}, }); </script> </body> </html>
Vue中的路由(默认和重定向redirect)
<!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>Vue的数据模型</title> <script src="../js/vue.js"></script> <script src="../js/vue-router.js"></script> <style> .box { border: 1px solid red; width: 200px; height: 150px; } </style> </head> <body> <!-- 容器 --> <div id="app"> {{msg}}--- <a href="http://www.baidu.com">百度一下</a> <hr /> <div> <router-link to="/a">去A组件</router-link> <router-link to="/b">去B组件</router-link> </div> <div class="box"> <!-- 路由对应的组件显示的位置 --> <router-view></router-view> </div> </div> <script> /* //1.声明路由对象 let routes=[{ }] */ let comA = { template: `<div>A组件</div>`, }; let comB = { template: `<div>B组件</div>`, }; // 定义路由 let router = new VueRouter({ routes: [ //默认根路径显示组件 // { path: "/", component: comA }, //路由重定向 { path: "/", redirect: "/a" }, { path: "/a", component: comA }, { path: "/b", component: comB }, ], }); // 整个页面只能有一个Vue实例对象 let vm = new Vue({ el: "#app", data: { msg: "hello", }, methods: {}, router: router, }); </script> </body> </html>
Vue中的过滤器filter、插件、函数渲染、路由重定向redirect
于 2022-05-25 10:02:45 首次发布