vue.mixin fetch v-ifvue.component单独定义组件模板过滤器

科技2024-11-03 19

vue.mixin

//在Vue里可以使用mixins来做代码的抽离复用，便于维护 //一个mixin其实就是一个纯粹的对象，上面挂载着抽离出来的配置， //在某一个实例中，通过mixins选项导入后，此实例就拥有导入的mixin的配置 //并且不会与原配置相互覆盖，而是合并到一起

fetch

fetch是一种HTTP数据请求的方式，是XMLHttpRequest的一种替代方案。fetch不是ajax的进一步封装，而是原生js。Fetch函数就是原生js，没有使用XMLHttpRequest对象。特点 1、第一个参数是URL: 2、第二个是可选参数，可以控制不同配置的 init 对象 3、使用了 JavaScript Promises 来处理结果/回调: 一个基本的 fetch 请求设置起来很简单。看看下面的代码：

fetch('http://example.com/movies.json') .then(function(response) { return response.json(); }) .then(function(myJson) { console.log(myJson); });

详细参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。也可以用 v-else 添加一个“else 块”：

<h1 v-if="awesome">Vue is awesome!</h1> <h1 v-else>Oh no 😢</h1>

同样v-if可以加到元素上面因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含元素。

v-else 或 v-else-if元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别 v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

vue.component

组件基础这里有一个 Vue 组件的示例：

// 定义一个名为 button-counter 的新组件

Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' })

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

<div id="components-demo"> <button-counter></button-counter> </div> new Vue({ el: '#components-demo' })

全局组件vs局部组件

全局组件

<body>  </body>

局部组件

<body> <div id="app"> <my-app></my-app> </div> <div id="app2"> <my-app></my-app> </div> </body> <script src="./base/vue.js"></script> <script> let App = Vue.extend({ template:"<h2>我是局部组件</h2>" }) new Vue({ el:"#app", components:{ //只能通过components来去配置局部组件，且只能在当前管理的实例当中使用 'my-app':App } }) new Vue({ el:"#app2", }) </script>

单独定义组件模板

//可以在body里创建template模板标签在组件里指定template， //必须只能用id作为标记 //模板内容外层必须有根元素

<body> <div id="app"> <my-app></my-app> </div>  <template id="abc"> <div> <p>哈哈哈1</p> <p>哈哈哈2</p> <p>哈哈哈3</p> </div> </template> </body> <script src="./base/vue.js"></script> <script> //全局组件定义： // Vue.extend({template:"#abc"}) // Vue.component() Vue.component("my-app",{ template:"#abc" }) new Vue({ el:"#app", // components:{ // 'my-app':{ // template:"#abc" // } // } }) </script>

过滤器

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

{{ message | capitalize }}  <div v-bind:id="rawId | formatId"></div>

// 分为两种：全局过滤器，局部过滤器

<body> <div id="app"> {{time | filterTime}} </div> <script src="./base/vue.js"></script> <script> // 过滤器：数据格式化，比如，后端返回我们的数据格式是一个时间戳， //在页面中使用的时候需要变成真正的时间格式 2018-12-26 34.6 78.5 // 分为两种：全局过滤器，局部过滤器 //过滤器只是在数据要显示的时候，将数据变化成某种格式 //全局过滤器内部必须要写return Vue.filter("filterTime", function (val) { let date = new Date(val); return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate(); }), new Vue({ el:"#app", data:{ time:Date.now() } }) // new Vue({ // el:"#app", // data:{ // time:Date.now() // }, // filters:{//过滤器 // filterTime(val){ // // console.log(val) // let date = new Date(val) // return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() // } // } // }) </script> </body>

过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中，filterTime 过滤器函数将会收到 time 的值作为第一个参数。

过滤器可以串联：

在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。

过滤器是 JavaScript 函数，因此可以接收参数：

这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 ‘arg1’ 作为第二个参数，表达式 arg2 的值作为第三个参数。

Processed: 0.010, SQL: 8

vue.mixin fetch v-ifvue.component单独定义组件模板 过滤器