柏竹
柏竹
2022-09-18
目录

Vue-选项

选项都是可以直接写在vue实例下的 , 被分为了几类：

  • 数据选项
  • DOM选项
  • 生命周期钩子 选项
  • 资源选项
  • 组合选项
  • 其他选项

由于选项众多 , 不能一一举例 , 更详细了解自行API

# 数据选项

# data 数据

**作用：**将数据响应式同步显示视图

类型：==Object | Function==

关键字： data

数据可在指定的el容器进行数据访问 . 如：数据name , 视图中 访问数据

在容器中数据一旦发生改变 , 视图中的数据也会跟随改变

示例

<div id="app">
    <p>{{count}}</p>
    <p>{{msg}}</p>
    <p>{{list}}</p>
</div>
...
<script>
let vm = new Vue({
    el: '#app',
    data:{
        count: 100,
        msg:"张三最帅！",
        list: [1,2,3,4]
    }
})
vm.count = 300;
console.log(vm);
console.log("=====");
console.log(vm.count);
console.log(vm.msg);
console.log(vm.list);
console.log("=====");
console.log(vm._data);
</script>
<!-- 浏览器结果 
300

张三最帅！

[ 1, 2, 3, 4 ]
 -->
<!-- 控制台结果 (vue太长了)
Vue {...}
=====
300
张三最帅！
(4) [1, 2, 3, 4, __ob__: Observer]0: 11: 22: 33: 4length: 4__ob__: Observer {value: Array(4), dep: Dep, vmCount: 0}[[Prototype]]: Array
=====
{__ob__: Observer}
 -->

# props传递

**作用：**接受父组件传值

类型：==Array | Object==

关键字： props

示例：跳转示例 组件通信

# methods 方法

**作用：**执行方法(函数)的操作

类型：=={ [key: string]: Function }==

**值：**method对象

关键字： methods

  • 可通过 实例对象 访问对象内的方法
  • 方法中 访问本身 属性/方法 需要 自身实例对象/this本身对象
  • method函数不建议使用箭头函数来定义 , 因 箭头函数会绑定上下级关系 , 在本对象的其他方法通过 自身实例对象/this本身对象 进行访问时 , 可能访问不到

书写形式：

methods:{
	<方法名1>:function(){...}
	[,<方法名2>() {...}]
}

示例

<body>
    <div id="app">
        <!-- 也可以直接调用 -->
        <!-- <p>{{fn1()}}</p> -->
        <p>{{count}}</p>
        <button v-on:click="fn1()">count++ (函数1)</button><br/>
        <button v-on:click="fn2">count++ (函数2)</button>
    </div>
    <script src="vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data:{
                count:100
            },
            methods:{
                fn1:function(){
                    console.log("调用了function()函数1");
                    // this对象本身的属性
                    vm.count++;
                },
                fn2() {
                    // vm当前实例的属性
                    console.log("调用了function()函数2");
                    this.count++;
                }
            }
        })
        // 实例对象调用
        // vm.fn1();
        // vm.fn2();
    </script>
</body>

# computed 计算属性

**作用：**为属性值做数据处理 , 以防 插值表达式 应用逻辑复杂

类型：=={ [key: string]: Function | { get: Function, set: Function } }==

**API：**https://cn.vuejs.org/v2/guide/computed.html

关键字： computed

步骤：

  1. 在 data 定义好 数据变量

  2. 定义 计算属性 的方法

    computed:{
    <计算属性名>: function () {
        return ...;
    }
}

  3. 使用计算属性 （使用方式与 插值表达式 一样

computed 与 methods 的区别:

  • computed直接通过 计算属性名 调用 ; 而 methods方法 采用 方法名() 调用
  • computed绑定的是 data中的数据 ; 而 methods方法 无论执行与否 都会重新计算

示例：

<p>{{msg}}</p>
<p>{{reversMsg}}</p>
// hello!
// !olleh
...
<script>
new Vue({
    el:"...",
    data:{
        msg:"hello!"
    },
    computed :{
        reversMsg: function () {
            // split() 将字符串对指定对象进行分割
            // reverse() 将数组反转
            // join() 将数组中对象拼接返回字符串
            return this.msg.split('').reverse().join('');
        }
    }
});
</script>

# watch 数据监听

**作用：**监听指定 数据变化时 触发的函数

类型：=={ [key: string]: string | Function | Object | Array }==

关键字： watch

步骤：

  1. 在 data 定义好 数据变量

  2. 设置监听 属性

    watch: { 
    '<属性名>'(newV, oldV) {...}
    [,'<dat属性名2>'(newV, oldV){...}...]
}

深度监听 用于监听对象、数组

watch: { 
    // 监听id对象
    id:{
		handler(newV, oldV) {...}'
		// 深度监听
		deep: true,
		// 初始化监听
		immdeiate: true
	}
}

笔记

  • computed 必须有返回值 , 由于异步请求缘故 , 返回值可能是无效值
  • watch 无需返回值 , 不用管优先顺序的问题

# DOM选项

# el 选择器

**作用：**指定容器vue实例管理的html视图

类型：==string | Element==

**Element值：**id选择器/class选择器/dom对象

关键字： el

示例：

<body>
    <!-- 提供容器 -->
    <div id="app1">
        <p>{{str}}</p>
    </div>
    <div class="app2">
        <p>{{str}}</p>
    </div>
    <div name="app3">
        <p>{{str}}</p>
    </div>
    <script src="vue.js"></script>
    <script>
        // id选择
        new Vue({
            el: '#app1',
            data: {
                str: '测试对象1'
            }
        })
        // class选择
        new Vue({
            el: '.app2',
            data: {
                str: '测试对象2'
            }
        })
        // dom对象选择
        new Vue({
            el: document.getElementsByName("app3")[0],
            data: {
                str: '测试对象3'
            }
        })
        
    </script>
</body>
<!-- 浏览器 结果 
    测试对象1
    测试对象2
    测试对象3
 -->

# template 模板

作用： 组件应用的模板将会替换挂载指定组件

类型：==String==

关键字：template

示例：跳转示例

**注意：**一个模板最外层只能有一个根元素

# render 渲染

**作用：**将预先注册好的组件 , 可通过 render()方法直接渲染

类型：==(createElement: () => VNode) => VNode==

关键字：render

标签渲染 与 render()方法渲染 的区别:

  • 标签渲染 , 不会覆盖Vue实例控制区域
  • render方法渲染 , 会覆盖Vue实例控制区域

render()方法函数说明：

  1. 必选 , createElement：用于return虚拟DOM
  2. 可选 , context：接收其他组件传递的数据

createElement参数

createElement参数是 用于创建 VNode节点 , 同时也是方法中的第一个参数

createElement创建方式

new Vue({
    el: "#app",
	render: (h) => {
		return h("h6", {class: "abc"}, "我是h6")
	}
})

渲染结果

<div id="app">
	<h6 class="abc">我是h6</h6>
</div>

上面例的 h 是 createElement 的缩写 , 其中有三个形参

参数 类型 说明
1 必选 String 通过字符串解析HTML标签进行创建
2 可选 Object 为虚拟DOM编写属性参数等
3 可选 String | Array 数组视为：子虚拟DOM节点
字符串视为：标签中的内容

添加Vue指令功能以及事件点击详细了解 (opens new window)

示例1：

<div id="app">
    <!-- 解释：
        插槽的作用域 和 组件子父类的作用域 不同 , 因此传递传递参数的方式也不同
            slot-scope : 提供过插槽传递出来的 数据集
            :msg : 传递msg数据传递给子组件应用
        PS：为了更直观的呈现应用了自定义名称传递
    -->
    <father>
        <son slot-scope="aaa" :msg="aaa.bbb"></son>
    </father>

</div>
</body>
...
<template id="father">
    <div>
        <p>我是父组件</p>
        <!-- 为当前插槽传递数据出去 -->
        <slot :bbb="say"></slot>
    </div>
</template>

<script>
    
    Vue.component("father", {
        template: "#father",
        data() {
            return {
                say: "你好我是父组件！"
            }
        }
    })
    
    Vue.component("son", {
        // 组件函数化
        functional: true,
        render: (h, context) => {
            // 接收其他组件传递的数据
            console.log(context)
            return h("h6", {class: "abc"}, context.props.msg)
        },
        props: ["msg"]
    })
    
    new Vue({
        el: "#app"
    })
</script>

渲染结果

<div id="app">
    <div>
        <p>我是父组件</p> 
        <h6 class="abc">你好我是父组件！</h6>
    </div>
</div>

# 资源选项

# directives 自定义指令

类型：==Object==

关键字：directives

示例：跳转示例

# components 组件

类型：==Object==

关键字：components

示例：跳转示例

# filters 过滤器

**作用：**自定义格式化data数据

类型： ==Object==

关键字： filters

**API：**https://cn.vuejs.org/v2/guide/filters.html

步骤：

  1. 定义过滤器 全局/局部 全局过滤器

    Vue.filter(<过滤器名称>, function (value) {
    return ...;
});

    局部过滤器

    filters: {
    <过滤器名称>: function (value) {
        return ...;
    } 
    [, <过滤器名称>: function (value){...}]
}

  2. 应用过滤器 （前提该标签在Vue容器范围内

    // No.1 插值表达式应用
{{<数据>|<过滤器名称>}}
    
// No.2 v-bind指令应用
<p v-bind:id="<数据>|<过滤器名称>">...</p>

示例：

<div id="app1">
   <h2>app1</h2>
   <p>{{msg|no1}}</p>
   <p>{{msg|no2}}</p>
</div>
<div id="app2">
   <h2>app2</h2>
   <p>{{msg|no1}}</p>
   <p>{{msg|no2}}</p>
</div>
...
<script>
   // 全局过滤器 (首字母大写
   Vue.filter("no1", function (v) {
       return v.charAt(0).toUpperCase()+v.slice(1);
   });
   new Vue({
       el: "#app1",
       data: {
           msg: "hello"
       },
       // 局部过滤器 (尾字母大写
       filters: {
           no2: function (v) {
               let len = v.length;
               return v.slice(0, len - 2) + v.charAt(len - 1).toUpperCase();
           }
       }
   });
   new Vue({
       el: "#app2",
       data: {
           msg: "world"
       }
   });
</script>

# 带参串联应用

使用顺序与我们Java方法链式调用方法一样 , 可以多个过滤器串行使用

// 100元人民币
<p> {{msg|unit('元')|type('人民币')}} </p>
...
<script>
    new Vue({
        el: "#app",
        data: {
            msg: 100
        },
        filters: {
            unit: function (val, unit) {
                return val + unit;
            },
            type: function (val, type) {
                return val + type;
            }
        }
    });
</script>

# 日期格式处理

借助第三方插件：http://momentjs.cn/

CDN：http://cdn.staticfile.org/moment.js/2.24.0/moment.js

步骤：

  1. 引入插件 moment.js
  2. 创建格式格式化日期过滤器
  3. 格式化日期操作 ==moment(<日期对象>).format(<日期格式>)==

示例：

// 2022-03-12 18:23:46
<p>{{msg|dateFormat}}</p>
...
<script src="https://cdn.staticfile.org/moment.js/2.24.0/moment.js"></script>
<script>
new Vue({
    el: "#app",
    data: {
        msg: new Date()
    },
    filters: {
        dateFormat: function (v) {
            return moment(v).format("YYYY-MM-DD HH:mm:ss");
        }
    }
});
</script>
#Vue

← Vue-组件→

最近更新
01
HTTPS自动续签
10-21
02
博客搭建-简化版(脚本)
10-20
03
ruoyi-vue-plus-部署篇
07-13
更多文章>
Theme by Vdoing | Copyright © 2019-2024 | 桂ICP备2022009417号-1